/* =========================================================
   AstraShilp — portfolio (18 Sep 2026)
   The content is a 1:1 build of source/portfolio-mockup-2026-09-18.png (796 x 1975); the menu bar and
   footer are the site's own (styles.css / brand.css / scale.css / mobile.css, same markup as every page).
   Everything here is scoped to .pfw, so it never touches the menu bar or the footer.

   1024px and wider: the content is the mockup scaled so its column (mockup x 32..765) runs exactly
   between the menu bar's edges (3vw each side). Every length is in mockup pixels times --k; page-level
   x also adds --ox. Positions live on the elements as --x/--y (mockup px; inside a card, from the card's
   corner), text as --fs (size), --ls (letter-spacing, em) and --lh (line-height). They were fitted against
   the mockup by tools/portfolio/fit.py; change them there or by hand, not with new px values.
   Below 1024px the same markup stacks into a normal page (bottom of this file).
   ========================================================= */

#starfield{display:none}   /* script.js draws the site's starfield into it; this page keeps the mockup's black */

.pfw{
  --pf-bg:#000102;
  --pf-blue:#3fb0f3;
  --pf-line:rgba(255,255,255,.2);
  position:relative;z-index:1;background:var(--pf-bg);color:#fff;
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;
  container-type:inline-size;
  --k:calc((100vw - 6vw) / 733);
  --ox:calc(3vw - 32 * var(--k));
}
@supports (width:1cqw){ .pfw{ --k:calc((100cqw - 6vw) / 733) } }   /* cqw: the page width without the scrollbar */
/* element defaults, kept at element weight with :where() so any class below still wins */
:where(.pfw) img{display:block;max-width:none}
:where(.pfw) :is(h1,h2,h3,p,ul){margin:0;padding:0;font-weight:inherit}
:where(.pfw) ul{list-style:none}
:where(.pfw) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.pfw) :focus-visible{outline:1px solid var(--pf-blue);outline-offset:3px}

/* ---------------------------------------------------------------- the scaled content */
.pfi{position:relative;overflow:hidden;height:calc(2135.78 * var(--k))}   /* ends at the horizon line, where the footer takes over */
@supports (width:round(nearest, 1.5px, 1px)){ .pfi{height:round(nearest, calc(2135.78 * var(--k)), 1px)} }   /* whole px, so the footer lays out exactly as on the other pages */
.wcard > *,.pbtn > *{--ox:0px}   /* inside a card or the button, positions are from its own corner */

.m{
  position:absolute;margin:0;white-space:nowrap;
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));
  font-size:calc(var(--fs) * var(--k));line-height:var(--lh, 1);
  letter-spacing:calc(var(--ls, 0) * 1em);
}

/* the two background pictures (the eclipse over the hero, the horizon above the footer) */
.pplate{position:absolute;left:0;width:100%;pointer-events:none;user-select:none}
.pplate-top{top:0;height:calc(381 * var(--k));object-fit:cover;
  -webkit-mask-image:linear-gradient(#000 93%, transparent);mask-image:linear-gradient(#000 93%, transparent)}
.pplate-bottom{top:calc(1987.78 * var(--k));height:calc(242 * var(--k));object-fit:cover;
  -webkit-mask-image:linear-gradient(transparent, #000 8%);mask-image:linear-gradient(transparent, #000 8%)}

/* ---------------------------------------------------------------- type */
.t-label{font-weight:700;color:#8e9296}
/* the hero label and the line under it, as on every other page (styles.css .sechead__eb / .rule-glow) */
.t-eb{font-family:'Montserrat',system-ui,sans-serif;font-weight:500;color:#36d4ff;text-transform:uppercase}
.eb-rule{position:absolute;left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k))}
.t-h1{font-weight:300;color:#fff}
.t-h1 .blue{color:var(--pf-blue)}
.t-lead{font-weight:500;color:#d0d2d4}
.t-num{font-weight:400;color:#dcdcdc}
.t-h2{font-weight:400;color:#e2e3e3}
.t-p{font-weight:500;color:#b3b6b8}
.t-all{font-weight:800;color:#3a8fd0;cursor:default}   /* shown, but not a link (19 Sep) */
.t-count2{font-weight:500;color:#9a9da0}
.t-title,.t-titlelg{font-weight:500;color:#e6e6e7}
.t-tags{font-weight:700;color:#aeb0b1}
.t-desc{font-weight:500;color:#b5b7b8}
.t-link{font-weight:800;color:#d9d9d9}
.t-q{font-weight:500;color:#dadcde}
.t-cta{font-weight:300;color:#fff}
.t-btn{font-weight:800;color:#d8dadc}
.parr{display:inline-block;letter-spacing:0;transition:transform .3s}
.pfw a:hover .parr,.pfw button:hover .parr,.wcard:hover .t-link .parr{transform:translateX(.35em)}
button.t-link{text-align:left}

/* ---------------------------------------------------------------- lines */
.dash{position:absolute;display:block;
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));
  width:calc(var(--w) * var(--k));height:1px;background:#5a5a5a}

/* ---------------------------------------------------------------- cards */
.wcard{
  position:absolute;overflow:hidden;background:#050607;
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));
  width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
  border:1px solid var(--pf-line);
}
.wcard{cursor:pointer}   /* the whole card, picture included, opens the project (portfolio.js) */
.wcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .7s ease}
.wcard:hover .wcard-img.on,.wcard:not(.wcard-feat):hover .wcard-img{transform:scale(1.025)}
.wcard-feat .wcard-img{opacity:0}
.wcard-feat .wcard-img.on{opacity:1}
/* the featured card darkens its left third so the text reads over a full-bleed picture */
.wcard-feat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,1,2,.84) 0%,rgba(0,1,2,.6) 21%,rgba(0,1,2,0) 43%)}
.wcard-feat > :not(.wcard-img){z-index:2}
/* a 16:9 laptop shot in the featured frame: full height, on the right, fading in from the left */
.wcard-feat .wcard-img.feat-fit{left:auto;right:0;width:auto;max-width:none;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
/* films: the film plays silently full-bleed, darkened on the left for the text */
.wcard-film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,1,2,.92) 0%,rgba(0,1,2,.8) 24%,rgba(0,1,2,0) 48%)}   /* the film has burned-in captions */
.wcard-film > :not(.wcard-img){z-index:2}
.wcard-film .tile-play{left:50%;width:calc(40 * var(--k));height:calc(40 * var(--k))}
.wcard-film:hover .tile-play{background:rgba(0,0,0,.45)}
/* the two cards under it: the laptop across the top, fading into the text below */
.wcard-img--top{height:auto;aspect-ratio:16 / 9;bottom:auto;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
/* branding, right: the storyboard's director's chair on the right, the text on the dark left */
.wcard-img--right{left:auto;width:auto;max-width:none;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.wcard-feat .t-titlelg,.wcard-feat .t-tags,.wcard-feat .t-desc,.wcard-feat .t-link{transition:opacity .35s ease}
.wcard-feat.is-swapping .t-titlelg,.wcard-feat.is-swapping .t-tags,.wcard-feat.is-swapping .t-desc,.wcard-feat.is-swapping .t-link{opacity:0}

.circle{
  position:absolute;display:grid;place-items:center;border-radius:50%;
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));
  width:calc(var(--d) * var(--k));height:calc(var(--d) * var(--k));
  border:max(1px, calc(.6 * var(--k))) solid rgba(255,255,255,.55);
  background:rgba(0,1,2,.3);   /* stays visible over a bright laptop screen */
  transition:background .25s,border-color .25s;
}
.circle svg{width:44%;height:44%;fill:none;stroke:#e9e9e9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.circle:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---------------------------------------------------------------- social row: one line, every piece at its own shape */
.tiles{position:absolute;display:flex;gap:calc(7 * var(--k));
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k))}
.tiles li{flex:var(--a) 1 0;min-width:0;overflow:hidden;background:#0a0b0c}
.tile{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}
.tile-media{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tile:hover .tile-media,.tile:focus-visible .tile-media{transform:scale(1.04)}
.tile-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;
  width:calc(30 * var(--k));height:calc(30 * var(--k));border-radius:50%;
  border:max(1px, calc(.85 * var(--k))) solid rgba(255,255,255,.92);background:rgba(0,0,0,.25);transition:background .25s}
.tile-play svg{width:52%;height:52%;fill:#fff;margin-left:6%}
.tile:hover .tile-play{background:rgba(0,0,0,.45)}

/* ---------------------------------------------------------------- call to action */
.pbtn{position:absolute;display:block;
  left:calc(var(--ox) + var(--x) * var(--k));top:calc(var(--y) * var(--k));
  width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
  border:max(1px, calc(.8 * var(--k))) solid rgba(255,255,255,.62);transition:background .25s,border-color .25s}
.pbtn:hover{background:rgba(255,255,255,.06);border-color:#fff}

/* ---------------------------------------------------------------- the viewer (a <dialog>, outside .pfw) */
.viewer{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,1,2,.94);color:#fff;overflow:hidden;
  font-family:'Nunito Sans',system-ui,sans-serif}
.viewer::backdrop{background:rgba(0,0,0,.6)}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer-stage{margin:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;padding:56px 88px}
.viewer-stage img,.viewer-stage video{display:block;max-width:calc(100vw - 176px);max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);object-fit:contain;width:auto;height:auto;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.viewer-count{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:12px;letter-spacing:.2em;color:#9a9ea2}
.viewer-btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;
  background:none;color:inherit;border:1px solid rgba(255,255,255,.5);transition:background .25s,border-color .25s}
.viewer-btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.viewer-btn svg{width:44%;height:44%;fill:none;stroke:#eee;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.viewer-prev{left:22px;top:50%;translate:0 -50%}
.viewer-next{right:22px;top:50%;translate:0 -50%}
.viewer-close{right:22px;top:22px}
.viewer.is-single :is(.viewer-prev,.viewer-next,.viewer-count){display:none}   /* a single film */

@media (prefers-reduced-motion:reduce){
  .pfw *,.viewer *{transition:none!important}
}

/* =================================================================
   Under 1024px: the mockup scaled down would be unreadable, so the same
   markup stacks into a normal page. Pictures sit above their text.
   The menu bar and footer do whatever they do on the other pages.
   ================================================================= */
@media (max-width:1023px){
  .pfi{height:auto;overflow:visible;padding:0 20px}
  .m{position:static;white-space:normal;font-size:inherit}
  .m br{display:inline}
  .t-p br,.t-desc br,.t-lead br{display:none}

  .pplate-top{height:560px;object-position:72% 0}
  .pplate-bottom{top:auto;bottom:0;height:420px;object-position:62% 100%}

  /* hero: starts under the site's menu bar (motion.js publishes its height as --nav-h) */
  .pfh{position:relative;z-index:1;padding:calc(var(--nav-h, 90px) + 40px) 0 40px;display:flex;flex-direction:column;align-items:flex-start}
  .t-label{font-size:11px;letter-spacing:.2em}
  .t-eb{font-size:12px;letter-spacing:.3em;line-height:1.4}
  .eb-rule{position:relative;left:auto;top:auto;margin:14px 0 6px}
  .t-h1{font-size:clamp(30px,8.6vw,46px);line-height:1.12;margin:14px 0 14px}
  .t-lead{font-size:15px;line-height:1.5;max-width:34em}

  /* section heads */
  .pfs{position:relative;z-index:1;padding:36px 0 0}
  .pfs-head{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-bottom:22px}
  .t-num{font-size:16px;grid-row:1;grid-column:1}
  .dash{position:absolute;display:none}
  .pfs-head .t-label{grid-row:1;grid-column:2}
  .pfs-head .eb-rule{grid-row:2;grid-column:2;margin:10px 0 0}   /* the label's glow line, under the label (21 Sep) */
  .t-h2{grid-column:1 / -1;font-size:clamp(24px,6.6vw,34px);line-height:1.15;margin:10px 0 12px}
  .t-p{grid-column:1 / -1;font-size:14px;line-height:1.6;max-width:36em}
  .t-all{grid-column:1 / -1;justify-self:end;font-size:11px;margin-top:12px}

  /* cards: picture first, text underneath */
  .wcard{position:relative;left:auto;top:auto;width:auto;height:auto;display:grid;grid-template-columns:100%;margin:0 0 14px;padding-bottom:20px}
  .wcard-img{grid-area:1 / 1;position:static;width:100%;height:auto;aspect-ratio:calc(var(--w) / var(--h))}
  .wcard-img--top{aspect-ratio:16 / 9;-webkit-mask-image:none;mask-image:none}
  .wcard-feat .wcard-img,.wcard-feat .wcard-img.feat-fit{aspect-ratio:16 / 9;width:100%;height:auto;object-fit:cover;-webkit-mask-image:none;mask-image:none}
  .wcard-feat::after{display:none}
  .wcard-img--right{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 40%;-webkit-mask-image:none;mask-image:none}
  .wcard > .m{margin:0 18px}
  .wcard-film::after{display:none}
  .wcard-film .tile-play{position:static;grid-area:1 / 1;place-self:center;translate:none;width:52px;height:52px;border-width:1px}
  button.t-link{justify-self:start}
  .wcard .t-count2{grid-area:1 / 1;align-self:start;justify-self:start;margin:14px 16px;z-index:1;font-size:11px;letter-spacing:.12em}
  .t-title,.t-titlelg{font-size:17px;letter-spacing:.1em;margin-top:18px!important}
  .t-tags{font-size:10px;letter-spacing:.2em;margin-top:8px!important}
  .t-desc{font-size:14px;line-height:1.55;margin-top:12px!important}
  .t-link{font-size:11px;letter-spacing:.2em;margin-top:16px!important}
  .circle{left:auto;right:0;top:0;width:34px;height:34px;margin:12px}
  .arrow-prev{right:44px}

  /* social row: swipe sideways through the six pieces */
  .tiles{position:relative;left:auto;top:auto;width:auto;height:auto;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:thin}
  .tiles li{flex:0 0 auto;height:min(300px, calc((100vw - 40px) * .5625));aspect-ratio:var(--a);scroll-snap-align:start}
  .tile-play{width:52px;height:52px;border-width:1px}
  .viewer-stage{padding:56px 12px}
  .viewer-stage img,.viewer-stage video{max-width:calc(100vw - 24px);max-height:calc(100dvh - 112px)}
  .viewer-prev,.viewer-next{top:auto;bottom:12px;translate:none}

  /* call to action */
  .pfc{position:relative;z-index:1;padding:64px 0 56px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .t-q{font-size:19px}
  .t-cta{font-size:clamp(30px,8.4vw,44px);line-height:1.1}
  .pbtn{position:relative;left:auto;top:auto;width:auto;height:auto;margin-top:22px;padding:16px 24px}
  .t-btn{font-size:11px;letter-spacing:.22em}
}
@media (min-width:640px) and (max-width:1023px){
  .pfi > *:not(.pplate){max-width:720px;margin-left:auto;margin-right:auto}
}