/* ==========================================================================
   Selected Work — per-project filmstrip.
   Used on the homepage (index.html) and inside the case-study "The design"
   section (js/case-v2.js). One stylesheet, one component, both places.

   Layout idea: a project header (name + one-line description + tags) sits on
   the page grid, then a horizontal strip of screenshots starts at the container
   edge and runs off the right side of the viewport, so the row reads as
   "there is more here, keep going".

   Screenshots are NEVER cropped. Cards have a fixed height and an automatic
   width, so a tall mobile screen and a wide desktop screen sit on the same
   baseline at their own natural proportions.
   ========================================================================== */

.sw{
  --sw-accent:#FE7A02;
  --sw-ink:#f3f3f3;
  --sw-ink-60:rgba(255,255,255,.60);
  --sw-ink-40:rgba(255,255,255,.40);
  --sw-line:rgba(255,255,255,.10);
  --sw-line-soft:rgba(255,255,255,.07);
  --sw-card-h:clamp(230px,27vw,420px);
  --sw-gap:clamp(10px,1vw,16px);
  /* distance from the viewport edge to the container's content edge */
  --sw-inset:max(var(--gutter,24px),calc((100vw - 1840px) / 2 + var(--gutter,24px)));
  padding-block:clamp(56px,8vw,120px);
}

/* ---------- section heading ---------- */
.sw-head{margin-bottom:clamp(38px,5vw,74px);}
.sw-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sw-accent);}
.sw-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.sw-title{
  margin:0;max-width:20ch;
  font-size:clamp(34px,6.2vw,82px);line-height:1.02;letter-spacing:-.035em;font-weight:600;
  color:var(--sw-ink);text-wrap:balance;
}
.sw-title em{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-style:italic;font-weight:400;letter-spacing:-.01em;
  color:rgba(255,255,255,.42);
}
.sw-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;}
.sw-head-row .sw-all{
  flex:none;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;
  border:1px solid var(--sw-line);color:var(--sw-ink);text-decoration:none;font-size:14px;
  transition:background .25s,border-color .25s;
}
.sw-head-row .sw-all:hover{background:rgba(254,122,2,.12);border-color:rgba(254,122,2,.45);}

/* ---------- one project ---------- */
.sw-item{padding-block:clamp(34px,4.4vw,64px);}
.sw-item:first-of-type{padding-top:0;}
.sw-meta,.sw-tags,.sw-rail{padding-inline:var(--sw-inset);}

/* header row sits on the page grid; the strip below runs to the viewport edge */
.sw-meta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,40px);align-items:start;margin-bottom:clamp(22px,2.6vw,34px);
}
.sw-name{
  margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:-.025em;font-weight:500;
  color:var(--sw-ink);
}
.sw-name a{color:inherit;text-decoration:none;transition:color .25s;}
.sw-name a:hover{color:var(--sw-accent);}
.sw-name sup{font-size:.44em;font-weight:400;vertical-align:super;color:var(--sw-ink-40);margin-left:2px;}
.sw-desc{margin:0;max-width:52ch;font-size:15px;line-height:1.6;color:var(--sw-ink-60);text-wrap:pretty;}

.sw-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,2.4vw,30px);padding-block:0;list-style:none;}
.sw-tags li{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--sw-line);background:rgba(255,255,255,.026);
  font-size:12.5px;line-height:1;color:var(--sw-ink-60);
}
.sw-tags li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--sw-accent);opacity:.85;}

/* ---------- the strip ---------- */
.sw-strip{
  display:flex;gap:var(--sw-gap);align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-padding-inline:var(--sw-inset) 0;
  padding-inline:var(--sw-inset);
  scrollbar-width:none;cursor:grab;
}
.sw-strip::-webkit-scrollbar{display:none;}
.sw-strip.is-dragging{cursor:grabbing;scroll-snap-type:none;}
.sw-strip.is-dragging *{pointer-events:none;}
.sw-strip::after{content:'';flex:none;width:calc(var(--sw-inset) * .4);}

.sw-card{
  flex:none;height:var(--sw-card-h);border-radius:14px;overflow:hidden;
  border:1px solid var(--sw-line-soft);background:#080808;
  scroll-snap-align:start;line-height:0;position:relative;
}
.sw-card img{display:block;height:100%;width:auto;max-width:none;}
.sw-card--link{cursor:pointer;transition:border-color .3s,transform .3s cubic-bezier(.22,.61,.36,1);}
.sw-card--link:hover{border-color:rgba(254,122,2,.32);transform:translateY(-4px);}

/* the vertical identity card that opens every strip */
.sw-spine{
  flex:none;height:var(--sw-card-h);width:clamp(112px,11vw,176px);
  border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--sw-line-soft);
  background:linear-gradient(180deg,#111 0%,#0a0a0a 58%);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(16px,1.6vw,24px) clamp(12px,1.1vw,18px);
  scroll-snap-align:start;text-decoration:none;
}
.sw-spine::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(254,122,2,.55));
  opacity:.55;pointer-events:none;
}
.sw-spine > *{writing-mode:vertical-rl;transform:rotate(180deg);line-height:1.15;position:relative;z-index:1;max-height:100%;}
.sw-spine b{font-size:clamp(17px,1.7vw,25px);font-weight:500;letter-spacing:-.02em;color:var(--sw-ink);}
.sw-spine span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--sw-ink-40);}

/* a screenshot that has not been added yet */
.sw-slot{
  flex:none;height:var(--sw-card-h);width:clamp(260px,30vw,440px);border-radius:14px;
  border:1px dashed rgba(254,122,2,.3);
  background:radial-gradient(circle at 50% 42%,rgba(254,122,2,.07),transparent 62%),#080808;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px;text-align:center;line-height:1.5;scroll-snap-align:start;
}
.sw-slot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:rgba(255,255,255,.72);word-break:break-all;}
.sw-slot small{font-size:10.5px;letter-spacing:.05em;color:var(--sw-ink-40);}

/* ---------- scroll affordance ---------- */
.sw-rail{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,1.8vw,24px);}
.sw-rail-line{position:relative;flex:1;height:2px;border-radius:2px;background:var(--sw-line-soft);overflow:hidden;}
.sw-rail-line i{position:absolute;inset:0 auto 0 0;width:22%;border-radius:2px;background:var(--sw-accent);opacity:.75;transition:transform .12s linear;}
.sw-rail-hint{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sw-ink-40);}

/* ---------- inside a case study ---------- */
.cs3 .sw{padding-block:0;}
.cs3 .sw-item{padding-top:0;border-top:0;}

@media (max-width:760px){
  .sw-meta{grid-template-columns:1fr;gap:12px;}
  .sw-title{max-width:100%;}
  .sw-head-row{align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  .sw-card--link:hover{transform:none;}
  .sw-strip{scroll-behavior:auto;}
}