/* ============================================================================
   DALC — web design showcase (work-web-design.html, "Selected work")
   A pinned, full-screen section: each website's landing page fills the frame,
   the next one wipes in from the right as you scroll, its name lights up
   letter by letter, and a placard crossfades in the corner. A compass rose
   turns underneath so the current site's bearing (N, E, S, W) swings to the
   top; the bottom compass needle points at it.

   Default styles are the STATIC layout (no JS, or reduced motion): slides
   simply stack. web-stage.js adds .is-live for the pinned version.
   ========================================================================== */
.ws{--ws-ink:#fff;--ws-dim:rgba(255,255,255,.62);--ws-accent:var(--coral,#F26B4D);--ws-teal:var(--teal,#1FA396);
    position:relative;background:#0f1416;color:var(--ws-ink);margin:0 0 40px}

/* ── static layout ───────────────────────────────────────────────────────── */
.ws-slide{position:relative;min-height:min(100vh,900px);overflow:hidden;display:flex;flex-direction:column;
    justify-content:flex-end;padding:0 32px 36px}
.ws-slide + .ws-slide{border-top:1px solid rgba(255,255,255,.14)}
.ws-shot{position:absolute;inset:0;margin:0;overflow:hidden}
.ws-shot img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;
    object-position:50% 0;will-change:transform}
/* legibility: a light overall dim, heavier at the foot and the top-left corner */
.ws-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(8,14,18,.86) 0%,rgba(8,14,18,.35) 38%,rgba(8,14,18,.16) 62%,rgba(8,14,18,.46) 100%)}
.ws-copy,.ws-card{position:relative;z-index:30}
.ws-desc{margin:0 0 18px;max-width:17em;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:.03em;
    text-transform:uppercase}
/* the site name is set in the page's display face (Caprasimo), same as the
   masthead above it — it was the one big heading on the page still running in
   the body grotesque. Caprasimo is far wider than Figtree at the same size, so
   the clamp comes down and the negative tracking goes: it is already tight. */
.ws-title{margin:0;font-family:var(--font-heading);font-weight:400;letter-spacing:-.005em;line-height:.95;
    font-size:clamp(44px,6.4vw,104px);color:var(--ws-ink)}
.ws-title .ws-word{display:inline-block;white-space:nowrap}
.ws-title .ws-word span{display:inline-block}
.ws-card{margin:24px 0 0;max-width:360px;padding:18px 22px 20px;border-radius:4px 4px 0 0;
    background:linear-gradient(160deg,rgba(18,28,33,.72),rgba(18,28,33,.9));
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ws-card dl{margin:0}
.ws-card dl div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.14)}
.ws-card dt{font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.ws-card dd{margin:0;font-size:14px;color:rgba(255,255,255,.86);text-align:right}
.ws-btn{display:block;width:100%;margin-top:18px;padding:12px 16px;border-radius:999px;cursor:pointer;
    font:700 12.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-align:center;
    color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.55);transition:background .25s,border-color .25s}
.ws-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.ws-btn:focus-visible,.ws-live:focus-visible,.ws-bar:focus-visible{outline:2px solid var(--ws-teal);outline-offset:3px}
.ws-live{display:block;margin-top:12px;text-align:center;font-size:13px;color:rgba(255,255,255,.78)}
.ws-live:hover{color:#fff}
.ws-coords{margin:0 0 6px;font-size:13px;color:var(--ws-dim);letter-spacing:.02em}

/* frame chrome is only meaningful when pinned */
.ws-hud,.ws-rose,.ws-grid,.ws-bar,.ws-top{display:none}

/* ── live (pinned) layout ────────────────────────────────────────────────── */
.ws.is-live .ws-track{position:relative}                 /* height set by JS */
.ws.is-live .ws-frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ws.is-live .ws-slide{position:absolute;inset:0;min-height:0;padding:0;border:0;display:block;overflow:visible}
.ws.is-live .ws-shot{visibility:hidden}
.ws.is-live .ws-slide:first-child .ws-shot{visibility:visible}
.ws.is-live .ws-copy{position:absolute;left:48px;bottom:88px;right:440px}
.ws.is-live .ws-copy .ws-desc{display:none}             /* shown in the shared top-left block instead */
.ws.is-live .ws-card{position:absolute;right:26px;bottom:0;width:360px;margin:0;opacity:0;visibility:hidden;
    padding-bottom:64px}
.ws.is-live .ws-title{visibility:hidden}
.ws.is-live .ws-title .ws-word span{opacity:.2}

.ws.is-live .ws-top{display:block;position:absolute;z-index:30;left:48px;top:96px;max-width:20em}
.ws-top .ws-descs{position:relative;min-height:3.9em}
.ws-top .ws-desc{position:absolute;left:0;top:0;margin:0;opacity:0;transition:opacity .35s}
.ws-top .ws-desc.on{opacity:1}

/* compass rose — the "chart" layer, drawn once and turned by JS */
.ws.is-live .ws-rose{display:block;position:absolute;z-index:25;pointer-events:none;
    width:150vh;height:150vh;left:calc(72% - 75vh);top:calc(52% - 75vh);opacity:.5;will-change:transform}
.ws-rose svg{width:100%;height:100%;display:block;overflow:visible}
.ws.is-live .ws-grid{display:block;position:absolute;inset:0;z-index:24;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.1) calc(25% - 1px) 25%)}

/* bottom HUD: ruler with N/E/S/W stations, a moving marker, compass at centre */
.ws.is-live .ws-hud{display:block;position:absolute;z-index:31;left:0;right:26px;bottom:0;height:64px;pointer-events:none}
.ws-ruler{position:absolute;left:0;right:0;bottom:0;height:22px;
    background-image:linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px);
    background-size:12px 7px;background-repeat:repeat-x;background-position:0 100%}
.ws-station{position:absolute;bottom:10px;transform:translateX(-50%);font:700 11px/1 var(--font-body);
    letter-spacing:.08em;color:var(--ws-dim);transition:color .3s}
.ws-station::after{content:"";position:absolute;left:50%;top:14px;width:1px;height:12px;background:currentColor}
.ws-station.on{color:#fff}
.ws-marker{position:absolute;left:0;bottom:36px;width:0;height:0;margin-left:-6px;
    border:6px solid transparent;border-top:9px solid var(--ws-accent);border-bottom:0;will-change:transform}
.ws-compass{position:absolute;left:50%;bottom:20px;width:40px;height:40px;margin-left:-20px}
.ws-compass svg{width:100%;height:100%;display:block}
.ws-needle{transform-origin:32px 32px;will-change:transform}

/* right edge: the call to action runs up the side */
.ws.is-live .ws-bar{display:flex;position:absolute;z-index:32;top:0;right:0;bottom:0;width:26px;
    align-items:center;justify-content:center;background:var(--ws-accent);color:#fff;text-decoration:none}
.ws-bar span{writing-mode:vertical-rl;font:800 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
.ws-bar:hover{background:#e25a3c}

/* ── full-page viewer ────────────────────────────────────────────────────── */
.ws-viewer{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;background:rgba(10,14,16,.94)}
.ws-viewer.open{display:flex}
.ws-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12)}
.ws-viewer-bar strong{font-weight:600;font-size:15px}
.ws-viewer-bar span{margin-left:10px;font-size:13px;color:rgba(255,255,255,.6)}
.ws-viewer-x{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;font-size:24px;line-height:1;
    color:#fff;background:rgba(255,255,255,.14)}
.ws-viewer-x:hover{background:rgba(255,255,255,.26)}
.ws-viewer-scroll{flex:1;overflow:auto;overscroll-behavior:contain;padding:26px 16px 60px}
.ws-viewer-scroll img{display:block;width:min(1100px,100%);height:auto;margin:0 auto;border-radius:10px;
    box-shadow:0 30px 80px rgba(0,0,0,.5)}

@media (max-width:900px){
  .ws-slide{padding:0 20px 28px}
  .ws.is-live .ws-copy{left:20px;right:20px;bottom:calc(var(--ws-card-h,270px) + 14px)}
  .ws-title{font-size:clamp(34px,9.4vw,56px)}
  .ws.is-live .ws-top{left:20px;top:84px}
  .ws-desc{font-size:13px}
  .ws.is-live .ws-card{left:12px;right:12px;width:auto;padding:12px 16px 58px}
  .ws-card dl div{padding:5px 0}
  .ws-card dt{font-size:11.5px}
  .ws-card dd{font-size:12.5px}
  .ws.is-live .ws-bar{display:none}
  .ws.is-live .ws-hud{right:0}
  .ws.is-live .ws-rose{width:120vh;height:120vh;left:calc(70% - 60vh)}
  .ws.is-live .ws-grid{background:repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(255,255,255,.1) calc(50% - 1px) 50%)}
}