/* ============================================================
   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{
  --overhang:48px;
  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:calc(-1 * var(--overhang));transform:translateX(-50%);height:118%;z-index:0;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}
/* Phone apertures are 141px shorter than the export (1170x2760 -> 1170x2619).
   The exports have the iOS status bar baked in — 47pt at 3x = 141px — and
   anchoring to the bottom pushes exactly that band above the visible screen,
   so the app content starts flush at the top. Tablet exports have no device
   status bar (what looks like one is the site's own nav), so they keep the
   full 1536x2458 aperture and stay top-anchored.
   A project can override --screen-ratio when its shot isn't a standard export;
   where the override equals the image's own ratio there is no overflow, so the
   bottom anchor has nothing to crop and the whole shot shows. */
.pdrawer__thumb-inset--phone img{aspect-ratio:var(--screen-ratio,1170/2619);object-position:center bottom;border-radius:14px}
.pdrawer__thumb-inset--tablet{border-radius:12px;padding:5px}
.pdrawer__thumb-inset--tablet img{aspect-ratio:var(--screen-ratio,1536/2458);border-radius:8px}
/* Poster variant — printed/flat artwork rather than a screen, so no bezel:
   just the artwork with rounded corners and the same shadow. */
.pdrawer__thumb-inset--poster{border-radius:14px;padding:0;background:transparent;border:0}
.pdrawer__thumb-inset--poster img{aspect-ratio:var(--screen-ratio,3/4);border-radius:14px;object-position:top center}

/* Moovin's drawer artwork is sized correctly but reads better with square
   corners rather than the shared 14px rounding above — targeted by href
   so no other project's mockup is affected. */
.pdrawer__list a[href$="moovin.html"] .pdrawer__thumb-inset,
.pdrawer__list a[href$="moovin.html"] .pdrawer__thumb-inset img{border-radius:0}


/* 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}
/* Wide, short wordmarks. object-fit:contain scales to whichever edge binds first,
   and for these three that is the 64% width cap — so they came out visibly smaller
   than the squarer marks beside them. Widening the BOX (not the tile) lets them
   scale up to match; the height cap is raised out of the way so width still binds. */
.pdrawer__tile--shelterbox .pdrawer__tile-logo,
.pdrawer__tile--pilkington .pdrawer__tile-logo,
.pdrawer__tile--cagney-collins .pdrawer__tile-logo{width:90%;height:60%}
/* SMARTY's mark is the bare numeral 3 - a tall, narrow glyph, so the 38%
   height cap binds long before the width one and it sat visibly smaller than
   the marks around it. Raising both caps lets it scale up; object-fit:contain
   still keeps its proportions and it stays inside the tile's 16px padding. */
.pdrawer__tile--smarty .pdrawer__tile-logo{width:80%;height:64%}
.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:transparent}
.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__list a{--overhang:75px}
  .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__list a{--overhang:38px}
  .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}
}

/* ---- LANDING MARQUEE — per-logo size correction --------------------------------
   The strip gives every logo the same 26px height. That suits a wide wordmark,
   but a compact, near-square mark (Johnson Controls, SMARTY's 3, the Haçienda's
   FAC51, Cagney Collins) then occupies a fraction of the area of the wordmarks
   beside it and reads as much smaller. Scaling only those four up evens out the
   optical weight; the strip's own 26px vertical padding absorbs the overflow, so
   the marquee's height and rhythm are unchanged.
   Matched on data-base (the logo path the marquee JS already emits) rather than a
   new class, so index.html needs no edit. */
.landing__logo img[data-base="assets/logos/johnson-controls"],
.landing__logo img[data-base="assets/logos/smarty"],
.landing__logo img[data-base="assets/logos/hacienda"],
.landing__logo img[data-base="assets/logos/cagney-collins"]{height:140%}