/* ============================================================
   SLIDE-OUT PROJECTS / CLIENTS DRAWER
   Shared across every page (index.html, project.html, projects.html,
   and every /projects/{slug}.html). The backdrop and panel are
   injected at runtime by assets/drawer.js — this file only needs to
   be linked once per page. Opens from the top nav's Projects/Clients
   links and their mobile hamburger-menu counterparts only — there is
   no floating trigger tab. Uses var() fallbacks so it reads correctly
   whether a page defines --d/--b (project.html style) or
   --font-display/--font-body (index.html style).
   ============================================================ */
.pdrawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:160;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.pdrawer-backdrop.is-open{opacity:1;pointer-events:auto}

.pdrawer{
  position:fixed;top:0;left:0;bottom:0;right:0;
  width:100%;background:#111;z-index:170;
  transform:translateX(-100%);
  transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1));
  display:flex;flex-direction:column;
  box-shadow:20px 0 60px rgba(0,0,0,.35);
}
.pdrawer.is-open{transform:translateX(0)}
.pdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:28px 40px 0}
.pdrawer__head strong{font-family:var(--d,var(--font-display,sans-serif));font-size:16px;color:#fff}
.pdrawer__close{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;transition:background .2s}
.pdrawer__close:hover{background:rgba(255,255,255,.1)}
.pdrawer__tabs{display:flex;gap:8px;padding:22px 40px 0;max-width:520px}
.pdrawer__tab{flex:1;padding:11px 0;text-align:center;border-radius:100px;border:1px solid rgba(255,255,255,.25);font-size:13px;font-family:var(--d,var(--font-display,sans-serif));color:rgba(255,255,255,.6);background:none;cursor:pointer;transition:all .25s}
.pdrawer__tab.is-active{background:#fff;color:#111;border-color:#fff}
.pdrawer__tab:hover{border-color:rgba(255,255,255,.5)}
/* --- Category filter (Projects tab only) --- */
.pdrawer__filter{padding:18px 26px 0;max-width:760px}
.pdrawer__filter-select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:13px 44px 13px 20px;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);background-color:#181818;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:15px;
  color:#fff;font-family:var(--d,var(--font-display,sans-serif));font-size:13.5px;cursor:pointer;
  transition:border-color .25s;
}
.pdrawer__filter-select:hover,.pdrawer__filter-select:focus{outline:none;border-color:rgba(255,255,255,.5)}
.pdrawer__filter-select option{color:#111}

/* --- Projects tab: App Store "Suggested"-style card grid — same
   layout at every screen size (thumb on top, client name + title
   below, View pill at the bottom); auto-fill naturally collapses to
   a single column on narrow phones without needing separate rules. --- */
.pdrawer__list{
  list-style:none;overflow-y:auto;margin:0;flex:1;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;padding:18px 20px 40px;
}
.pdrawer__list li{border-bottom:none}
.pdrawer__list a{
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  border-radius:22px;overflow:hidden;background:rgba(255,255,255,.04);
  font-family:var(--d,var(--font-display,sans-serif));color:#fff;
  transition:background .25s,transform .3s var(--ease,ease);
}
.pdrawer__list a:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.pdrawer__thumb{position:relative;width:100%;height:200px;border-radius:0;background:rgba(255,255,255,.08);flex:none;overflow:hidden}
.pdrawer__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- Drawer device mockups -------------------------------------------------
   Phone/tablet frames mirroring the homepage banner mockups.

   Sized as a PERCENTAGE OF THE TILE, and sitting fully inside it. The previous
   version put the device at bottom:-13% to overhang the card, but
   .pdrawer__thumb is overflow:hidden — so the overhang wasn't a flourish, it
   was a guillotine, taking 17% off the bottom of every device. height:78% +
   bottom:6% keeps the whole device visible at every tile size, and because
   both are relative it can't drift out of step with the tile again.

   The screen aperture is set on the IMG and matches the mockup export ratios
   exactly — 1170x2760 (0.4239) phones, 1536x2458 (0.6249) tablets — so cover()
   crops nothing and leaves no letterbox. The frame shrink-wraps the screen for
   an even bezel, and height-based sizing means a phone and tablet side by side
   are the same height with the tablet correctly wider. */
.pdrawer__thumb-inset{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);height:78%;width:auto;box-sizing:border-box;background:#0a0a0a;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.55);line-height:0;font-size:0}
.pdrawer__thumb-inset img{display:block;height:100%;width:auto;object-fit:cover;object-position:top center}
.pdrawer__thumb-inset--phone{border-radius:18px;padding:4px}
.pdrawer__thumb-inset--phone img{aspect-ratio:1170/2760;border-radius:14px}
.pdrawer__thumb-inset--tablet{border-radius:12px;padding:5px}
.pdrawer__thumb-inset--tablet img{aspect-ratio:1536/2458;border-radius:8px}

/* Right-hand hero image (device mockup/poster), shown as a large centred
   inset card over the banner — echoing the actual hero section, where
   the device mockup sits centred and bleeds off the bottom edge. The
   thumb's own overflow:hidden clips it at the bottom for that same
   cut-off look. Only rendered when a project has one
   (projects-data.json's optional "heroImg" field). */
.pdrawer__copy{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 20px 0}
.pdrawer__client{display:block;font-size:20px;font-weight:700;line-height:1.25;color:#fff}
.pdrawer__proj-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;font-weight:400;line-height:1.4;color:rgba(255,255,255,.55)}
.pdrawer__pill{align-self:flex-start;margin:16px 20px 20px;padding:9px 18px;border-radius:100px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:600;transition:background .25s,color .25s}
.pdrawer__list a:hover .pdrawer__pill{background:#fff;color:#111}

/* --- Clients tab: black square tiles, logo centred ---
   Squares use the aspect-ratio property directly. (This used to be
   built with the classic ::before padding-top:100% spacer trick
   instead, on the assumption that aspect-ratio was the less reliable
   of the two inside a CSS Grid — but the opposite turned out to be
   true here: the padding-trick's computed height was silently not
   propagating to the actual tile box on at least one real device,
   producing short, squashed tiles instead of squares. aspect-ratio
   has been universally supported for years now, so there's no longer
   a good reason to lean on the older, more fragile trick.) */
.pdrawer__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow-y:auto;padding:18px 26px 32px;flex:1;margin:0;max-width:760px}
.pdrawer__tile{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:20px;background:#000;border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:transform .3s var(--ease,ease),border-color .3s}
.pdrawer__tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.pdrawer__tile-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
/* Fixed box, not a percentage of the tile. The uniform-canvas exports
   in assets/logos/clients/ only exist for 7 of 26 clients, so most
   tiles fall back to the tightly-cropped per-page logo — and those
   have wildly different proportions, which is what made the grid look
   inconsistent. Giving every logo the same box and letting
   object-fit:contain letterbox inside it means a wide wordmark and a
   square badge occupy identical space regardless of their source. */
.pdrawer__tile-logo{width:64%;height:38%;object-fit:contain;object-position:center;display:block;margin:0 auto}
.pdrawer__tile-fallback{display:none;color:#fff;font-family:var(--d,var(--font-display,sans-serif));font-weight:700;font-size:19px;line-height:1.3}
.pdrawer__empty{padding:24px 16px;color:rgba(255,255,255,.5);font-size:13.5px}

/* Per-logo size overrides for Hidden/Amy Sha used to live here to
   compensate for those two SVGs having far more built-in blank-canvas
   padding than the rest of the set — since fixed, every logo SVG in
   assets/logos/ now has its viewBox trimmed to a tight bounding box
   around its actual mark, so the plain 85% default above is
   consistent for all of them and no per-slug exceptions are needed. */

/* --- Coming-soon client tiles: logo added ahead of a case study page,
   shown greyed out but NOT pointer-events:none — it still needs to
   receive hover/press so its "Coming Soon" hint (below) can show. It's
   a <span>, not a link, so there's nothing to navigate to regardless.
   Kept clearly visible (not too faint) so the logo itself still reads —
   just desaturated and slightly dimmed. --- */
.pdrawer__tile--disabled{cursor:default;border-color:rgba(255,255,255,.18)}
.pdrawer__tile--disabled .pdrawer__tile-logo,
.pdrawer__tile--disabled .pdrawer__tile-fallback{opacity:.75;filter:grayscale(1) brightness(.85)}

/* --- Hover/press hint pill: "Visit Project" on real project tiles,
   "Coming Soon" on comingSoon tiles. A dark scrim covers the whole
   tile with the pill centred — same treatment either way, only the
   label text differs (set in drawer.js). :hover handles desktop mouse,
   :active/:focus-visible handle touch press and keyboard. --- */
.pdrawer__tile-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.72);opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.pdrawer__tile-hint span{
  padding:9px 18px;border-radius:100px;background:#fff;color:#111;
  font-family:var(--d,var(--font-display,sans-serif));font-size:13px;font-weight:600;
  white-space:nowrap;
}
.pdrawer__tile:hover .pdrawer__tile-hint,
.pdrawer__tile:active .pdrawer__tile-hint,
.pdrawer__tile:focus-visible .pdrawer__tile-hint{opacity:1}

/* --- Desktop: cards get roomier, and the Clients tile grid expands
   to fill the drawer instead of stopping at 760px. --- */
@media(min-width:901px){
  .pdrawer__filter{max-width:none}
  .pdrawer__list{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:28px;padding:28px 40px 56px;
  }
  .pdrawer__thumb{height:260px}
  .pdrawer__copy{padding:20px 22px 0}
  .pdrawer__client{font-size:22px}
  .pdrawer__pill{margin:18px 22px 22px}

  .pdrawer__grid{
    max-width:none;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:22px;padding:28px 40px 56px;
  }
}

@media(max-width:600px){
  .pdrawer__head{padding:24px 20px 0}
  .pdrawer__tabs{padding:20px 20px 0}
  .pdrawer__filter{padding:16px 20px 0}
  .pdrawer__list{padding:14px 14px 32px;gap:14px}
  .pdrawer__grid{padding:14px 14px 32px;gap:10px}
  .pdrawer__thumb{height:170px}
  .pdrawer__client{font-size:18px}
  .pdrawer__proj-title{font-size:13px}
  .pdrawer__pill{padding:7px 14px;font-size:12px;margin:14px 16px 16px}
  .pdrawer__copy{padding:16px 16px 0}
  .pdrawer__tile-fallback{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .pdrawer,.pdrawer-backdrop{transition:none!important}
}