@charset "UTF-8";
/* RWD — project cards
   ==========================================================================
   One card, used by the projects listing and by the homepage.

   It started life inside projects.css scoped to #page-projects, which meant
   the homepage could not have it — so the homepage kept a second, older card
   of its own, and the two drifted until one of them shipped unstyled. Scoped
   to .rwd-cards now: any page that wants this card wraps its grid in that
   class and gets it.

   The card is a sheet read in bands, each one a rule apart from the next:
   picture, name, place, the two figures asked for first, the rest of the
   numbers on their own panel, and the three things to do with a project along
   the foot. The grid is two up, because a sheet with a three-button foot and
   a four-cell panel has no narrow form — the old six-column span system was
   there to let a row be three slim cards, and there are none of those now.

   The palette is the site's: ink, bone, gold for the quiet marks, green on
   the one button that is a conversion. Nothing here introduces a colour.

   It is set in RWD's own faces rather than the redesign's — Maven Pro for
   everything, Lora where a serif is wanted — because that is what rwd.in is
   set in, and a Didone over a photograph of a building was reading as a
   fashion advertisement rather than as a property record. Flat sizes, not
   clamps: the card is one width in a two-up grid, so there is nothing for a
   viewport-scaled size to solve, and the clamps were what made the labels
   collapse to eight and a half pixels of tracked capitals.
   ========================================================================= */

.rwd-cards{
  --bone-2:#EAE5D9;
  --ink-1:#100F0E;
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --rule:rgba(16,15,14,.14);
  --rule-2:rgba(16,15,14,.09);
  --say:#2E2B27;
  --mute:#6C6860;
  --paper-i:#F4F1EA;
}

/* ---- The grid -----------------------------------------------------------
   Two up. The flagship takes the row and turns on its side; everything else
   is the same card at the same width, which is what lets the bands line up
   across a row and read as a table of projects rather than as a pile.
------------------------------------------------------------------------- */
.rwd-cards .pl-grid{
  display:grid; gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* The span classes the pages still write are all one cell now. Kept rather
   than removed from the markup so the listing's filter script, which hides
   and counts .pl-slot, goes on working untouched. */
.rwd-cards .pl-slot,
.rwd-cards .pl-slot.s3,
.rwd-cards .pl-slot.s6{ grid-column:span 1 }
.rwd-cards .pl-slot.is-lead{ grid-column:1/-1 }

@media (max-width:820px){
  /* minmax(0,…), not a bare 1fr: a bare 1fr has a min-content floor, and the
     lead card's photograph is 1600px wide at min-content — it pushed the whole
     column, and the page, to ~1000px on a 390px phone. */
  .rwd-cards .pl-grid{ grid-template-columns:minmax(0,1fr) }
  .rwd-cards .pl-slot,
  .rwd-cards .pl-slot.s3,
  .rwd-cards .pl-slot.s6,
  .rwd-cards .pl-slot.is-lead{ grid-column:1/-1 }
}

/* ---- The sheet ----------------------------------------------------------
   A hairline box on paper, not a shadowed tile. The shadow is kept for the
   hover, where it is doing something.
------------------------------------------------------------------------- */
.rwd-cards .pl-card{
  position:relative; display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  background:var(--white); color:inherit;
  border:1px solid var(--rule-2);
  transition:border-color .35s ease, box-shadow .45s ease, transform .45s ease;
}
.rwd-cards .pl-card:hover{
  border-color:var(--rule);
  box-shadow:0 26px 60px -34px rgba(16,15,14,.42);
  transform:translateY(-3px);
}
/* The name's link, stretched over the sheet. Everything that is its own
   action sits above it. */
.rwd-cards .pl-link::after{ content:''; position:absolute; inset:0; z-index:1 }
.rwd-cards .pl-share,
.rwd-cards .pl-act{ position:relative; z-index:2 }
.rwd-cards .pl-card:focus-within{ border-color:var(--gold) }
.rwd-cards .pl-link:focus-visible{ outline:none }
.rwd-cards .pl-card:has(.pl-link:focus-visible){
  outline:2px solid var(--gold); outline-offset:3px;
}

/* The flagship: render one side, the sheet the other. */
.rwd-cards .is-lead .pl-card{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:stretch;
}
.rwd-cards .is-lead .pl-shot{ aspect-ratio:auto; height:100% }
@media (max-width:860px){
  .rwd-cards .is-lead .pl-card{ display:flex }
  .rwd-cards .is-lead .pl-shot{ aspect-ratio:16/10 }
}

/* ---- Media -------------------------------------------------------------- */
.rwd-cards .pl-shot{
  position:relative; overflow:hidden;
  aspect-ratio:16/9; background:var(--bone-2);
}
@media (max-width:660px){ .rwd-cards .pl-shot{ aspect-ratio:4/3 } }
.rwd-cards .pl-shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.rwd-cards .pl-card:hover .pl-shot img{ transform:scale(1.045) }

/* A project with no render gets a drawn plate, not a flat brown rectangle:
   plots get their lattice, anything else its own initial, in gold line on
   bark. Obviously a diagram, which is the point — it must never read as a
   photograph of somewhere it is not. */
.rwd-cards .pl-plate{
  position:absolute; inset:0; background:var(--bark);
  display:grid; place-items:center;
}
.rwd-cards .pl-plate svg{ width:100%; height:100%; display:block }
.rwd-cards .pl-plate .pl-grid-l{ stroke:var(--gold); stroke-opacity:.26; stroke-width:1; fill:none }
.rwd-cards .pl-plate .pl-ave{ stroke:var(--gold); stroke-opacity:.55; stroke-width:2; fill:none }
.rwd-cards .pl-plate .pl-init{
  fill:none; stroke:var(--gold); stroke-opacity:.5; stroke-width:1.4;
  font:600 150px/1 var(--rwd-serif); letter-spacing:.01em;
}

.rwd-cards .pl-tag{
  position:absolute; left:0; top:0; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; background:rgba(16,15,14,.82); color:var(--paper-i);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:700 16px/1 var(--rwd-sans); letter-spacing:.08em; text-transform:uppercase;
}
.rwd-cards .pl-tag i{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
.rwd-cards .pl-tag.is-on i{ background:var(--green) }

/* ---- Share --------------------------------------------------------------
   A disc on the render's top right. Glass rather than a white button, so it
   belongs to the photograph instead of sitting on it.
------------------------------------------------------------------------- */
.rwd-cards .pl-share{
  position:absolute; right:14px; top:14px;
  width:42px; height:42px; display:grid; place-items:center;
  padding:0; border:1px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(16,15,14,.34); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.rwd-cards .pl-share:hover{
  background:var(--gold); border-color:var(--gold); transform:scale(1.06);
}
.rwd-cards .pl-share svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Says what happened on a browser with no share sheet. */
.rwd-cards .pl-share-ok{
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:7px 11px; white-space:nowrap; pointer-events:none;
  background:var(--ink-1); color:var(--paper-i);
  font:600 16px/1 var(--rwd-sans); letter-spacing:.04em;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.rwd-cards .pl-share.is-copied .pl-share-ok{
  opacity:1; transform:translateY(-50%) translateX(0);
}

/* ---- Body ---------------------------------------------------------------
   The card is a stack of bands that each run the full width of the sheet —
   the render, the rule under the name, the spec row, the tinted strip, the
   RERA note and the button bar — with only the type inset. The bands used to
   stop 20px short of either edge, which left the card looking like a page
   with a margin rather than like one object.

   --pad is the inset the type keeps. A band pulls itself back out to the
   edges with a negative inline margin and puts the same amount back as
   padding, so the words stay in line down the whole card while the rules and
   the tints run end to end.
------------------------------------------------------------------------- */
.rwd-cards .pl-body{
  --pad:16px;
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:21px var(--pad) 0;
}

/* The name, and the arrow that is the way in. */
.rwd-cards .pl-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.rwd-cards .pl-body h3{
  margin:0; font:600 22px/1.2 var(--rwd-sans); letter-spacing:-.01em; color:var(--ink-1);
}
.rwd-cards .is-lead .pl-body h3{ font-size:28px }
.rwd-cards .pl-body h3 a{ color:inherit; text-decoration:none }
.rwd-cards .pl-arrow{
  flex:none; width:26px; color:var(--ink-1);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease;
}
.rwd-cards .pl-arrow svg{
  display:block; width:100%; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.rwd-cards .pl-card:hover .pl-arrow{ transform:translateX(6px); color:var(--gold) }

.rwd-cards .pl-loc{
  display:flex; align-items:center; gap:7px; margin:4px 0 11px;
  font:400 16px/1.3 var(--rwd-sans);
  color:var(--say);
}
/* The pin keeps the accent; the place name does not. Gold on the location,
   on its pin and on both 45px icons was three marks competing for the same
   job, and the one that lost was the project's own name above them. */
.rwd-cards .pl-pin{ color:var(--gold) }
.rwd-cards .pl-pin{
  flex:none; width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

.rwd-cards .pl-say{
  margin:10px 0 0; max-width:48ch;
  font:400 16px/1.6 var(--rwd-serif); color:var(--say);
}

/* ---- The two figures ----------------------------------------------------
   How many, and how big. Under a rule, side by side, each with a drawn mark
   — line icons at the same weight as the hairlines around them, so they read
   as part of the ruling rather than as clipart dropped into it.
------------------------------------------------------------------------- */
.rwd-cards .pl-keys{
  list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin:0 calc(var(--pad) * -1);
  padding:15px var(--pad);
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
.rwd-cards .pl-keys li{ display:flex; align-items:center; gap:9px; min-width:0 }
.rwd-cards .pl-ico{ flex:none; width:28px; color:var(--gold) }
.rwd-cards .pl-ico svg{
  display:block; width:100%;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.rwd-cards .pl-key-t{ display:grid; gap:3px; min-width:0 }
.rwd-cards .pl-key-l{
  font:400 16px/1.3 var(--rwd-sans); text-transform:uppercase;
  color:var(--mute);
}
.rwd-cards .pl-key-v{
  font:600 16.5px/1.25 var(--rwd-sans); text-transform:uppercase; color:var(--ink-1);
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- The panel ----------------------------------------------------------
   The rest of the numbers on bone — one tone off the sheet, so it reads as an
   inset strip rather than as another box. Figures on the left, what they are
   on the right.
------------------------------------------------------------------------- */
.rwd-cards .pl-panel{
  display:flex; align-items:stretch;
  margin:0 calc(var(--pad) * -1);
  background:var(--paper-i);
}
.rwd-cards .pl-nums{
  flex:1 1 auto; display:flex; min-width:0;
  padding:12px var(--pad); gap:18px;
}
.rwd-cards .pl-unit{
  flex:1 1 0; min-width:0; display:grid; gap:3px;
}
.rwd-cards .pl-unit b{
  font:600 16px/1.25 var(--rwd-sans); color:var(--ink-1);
  font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.rwd-cards .pl-unit span{
  font:400 16px/1.3 var(--rwd-sans); text-transform:uppercase;
  color:var(--mute);
}
/* pl-nums, not pl-figs: the projects page hero has a .pl-figs of its own,
   under an #page-projects id that outranks anything scoped to .rwd-cards —
   so the card's figures came out white on bone with the hero's margins on
   them. Two blocks with the same job and the same name on the same page.

   Each figure takes the width it needs rather than an even share: a project
   with one number left should not have it stretched across the strip. */
.rwd-cards .pl-nums .pl-unit{ flex:0 1 auto; min-width:0 }

.rwd-cards .pl-panel-l{
  flex:none; width:33.33%; margin:0;
  display:grid; align-content:center; gap:3px; text-align:left;
  padding:12px var(--pad);
  border-left:1px solid var(--rule-2);
}
.rwd-cards .pl-panel-l span{
  font:400 16px/1.3 var(--rwd-sans); text-transform:uppercase;
  color:var(--mute);
}
.rwd-cards .pl-panel-l em{
  font-style:normal;
  font:600 16px/1.25 var(--rwd-sans);
  color:var(--ink-1);
}

/* With no price at the end of the line, the figures that remain share all
   of it: equal columns, each after the first set off by the same rule the
   price box used, so the strip is spread rather than bunched to the left. */
.rwd-cards .pl-panel.no-price .pl-nums{ gap:0; padding:0 }
.rwd-cards .pl-panel.no-price .pl-nums .pl-unit{
  flex:1 1 0; padding:12px var(--pad);
}
.rwd-cards .pl-panel.no-price .pl-nums .pl-unit + .pl-unit{
  border-left:1px solid var(--rule-2);
}

/* The one line of prose a project with no figures has to offer, set where
   the figures would have been so the panel keeps its shape. */
.rwd-cards .pl-said{
  flex:1 1 auto; min-width:0; margin:0;
  display:flex; align-items:center;
  padding:12px var(--pad);
  font:400 16px/1.5 var(--rwd-sans); color:var(--say);
}

/* And a project with neither: the label takes the strip rather than sitting
   in the corner of an empty box. */
.rwd-cards .pl-panel.is-none .pl-panel-l{
  width:auto; flex:1 1 auto; border-left:0;
  grid-auto-flow:column; justify-content:space-between; align-items:baseline;
}

.rwd-cards .pl-rera{
  margin:0 calc(var(--pad) * -1); padding:10px var(--pad);
  border-top:1px solid var(--rule-2);
  font:400 16px/1.4 var(--rwd-sans); letter-spacing:.01em;
  color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- The foot -----------------------------------------------------------
   Three equal buttons, edge to edge along the bottom of the sheet: the way
   in, the paperwork, and the one that is a conversion. Green is the site's
   action colour and it earns its place on the third of these and nowhere
   else on the card.

   margin-top:auto pins the bar to the foot however tall the bands above it
   came out, which is what keeps a row of cards aligned along the bottom when
   one of them has a tagline and the others do not.
------------------------------------------------------------------------- */
/* margin-top cannot be both the gap and the auto that pins the bar down, so
   the gap is carried by whichever band ends up last — the panel, or the RERA
   line when there is one. Without this the bar sat under its own fixed gap
   and the leftover height fell below it, which showed up as two cards in a
   row whose button bars were a RERA line apart. */
/* The bands butt against one another; only the last one before the foot
   carries the slack, and margin-top:auto on the bar takes up whatever is
   left so two cards in a row keep their buttons level. */
.rwd-cards .pl-rera{ margin-bottom:13px }

.rwd-cards .pl-act{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin:auto calc(var(--pad) * -1) 0;
}
.rwd-cards .pl-btn{
  display:grid; place-items:center; text-align:center;
  padding:12px 6px;
  font:600 16px/1.25 var(--rwd-sans); letter-spacing:.6px; text-transform:uppercase;
  text-decoration:none;
  transition:background .3s ease, color .3s ease;
}
.rwd-cards .pl-btn-go{ background:var(--ink-1); color:var(--paper-i) }
.rwd-cards .pl-btn-go:hover{ background:var(--bark) }
.rwd-cards .pl-btn-doc{
  background:var(--bone-2); color:var(--ink-1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5), inset -1px 0 0 rgba(255,255,255,.5);
}
.rwd-cards .pl-btn-doc:hover{ background:var(--gold-lt) }
.rwd-cards .pl-btn-ask{ background:var(--green); color:var(--ink-1) }
.rwd-cards .pl-btn-ask:hover{ background:var(--blue); color:var(--white) }

/* The sheet is narrow enough on a phone that three tracked labels would each
   break to two lines. The way in is the stretched link anyway. */
@media (max-width:420px){
  .rwd-cards .pl-act{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rwd-cards .pl-btn-go{ display:none }
  .rwd-cards .pl-keys{ grid-template-columns:1fr; gap:13px }
  .rwd-cards .pl-panel{ flex-wrap:wrap }
  .rwd-cards .pl-panel-l{ width:100%; border-left:0; border-top:1px solid var(--rule-2) }
}


/* ---- Motion -------------------------------------------------------------
   Both halves gated on html.js. Gating only the opacity:0 rule gives it a
   type selector its .in override does not have, and the hiding rule then
   outranks the thing meant to undo it — which is how the homepage shipped
   invisible once already. */
@media (prefers-reduced-motion:no-preference){
  html.js .rwd-cards .pl-slot{
    opacity:0; transform:translateY(26px);
    transition:opacity .8s ease, transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
  html.js .rwd-cards .pl-slot.in{ opacity:1; transform:none }
  .rwd-cards .pl-grid .pl-slot:nth-child(2n){ transition-delay:.09s }
}


/* ---- The carousel -------------------------------------------------------
   The homepage used to hand-pick six of the fourteen projects across two
   blocks. This carries all of them, one in front at a time, as the same
   card the listing uses — so the card is one card everywhere and the
   homepage and the listing cannot drift apart again.
------------------------------------------------------------------------- */
/* ---- One screen, two columns --------------------------------------------
   The section is a screen tall and no taller. The words take the left
   column — headline, the line under it, the count, and the controls — and
   the stack takes the right, as tall as the screen leaves it. Inside each
   card the render is the part that flexes: the body is its own height and
   the picture absorbs whatever is left, so a taller window gets more
   photograph and the type never moves.

   svh, not vh: on a phone vh is the tallest the viewport ever gets, so the
   section would be a browser chrome taller than the screen it is meant to fit.

   `section.pl-car-sec` with the id, not the bare class: home.css writes its
   block padding as `#page-home section.block`, and only the same shape
   loaded later beats it. */
#page-home section.pl-car-sec,
section.pl-car-sec{
  height:100svh;
  display:grid;
  grid-template-columns:minmax(300px,4fr) 7fr;
  column-gap:clamp(32px,5vw,96px);
  align-items:center;
  /* The top clears the fixed bar. */
  padding-top:max(clamp(26px,3.4vh,44px), 92px);
  padding-bottom:clamp(28px,4vh,52px);
  /* The cards furthest back fan out past the right edge; clipped here so
     they never put a sideways scroll on the page. */
  overflow:clip;
}

/* ---- The words ----------------------------------------------------------- */
#page-home .pl-car-sec .block-head,
.pl-car-sec .block-head{
  display:flex; flex-direction:column; align-items:flex-start;
  margin:0; padding:0; min-width:0;
}
#page-home .pl-car-sec .block-head h2{
  font-size:clamp(34px,3.6vw,60px); margin-top:0;
}
/* The section's name is the headline, so the line that used to be the
   headline steps down to sit under it — same serif, a size below. */
.pl-car-sec .pl-car-sub{
  margin:clamp(6px,.8vh,10px) 0 0;
  font:italic 400 clamp(18px,1.6vw,26px)/1.25 var(--lux);
  color:var(--ink-2, var(--ink-1));
}
.pl-car-sec .block-head .lead{
  margin-top:clamp(14px,2vh,22px); max-width:34ch;
  font-size:clamp(16px,1vw,16px); line-height:1.65;
}
.pl-car-sec .block-head .btn{ margin-top:clamp(26px,4vh,44px) }

/* The count sits under the front card, centred on it (pull:0 in cards.js
   keeps the front card in the middle of the column); the arrows stand
   either side of the stack; the dots stay in the words column. Only once the script has built the stack —
   without it there is nothing for them to move. */
.pl-car-ctrl,
.pl-car-dots{ display:none }
.pl-car-sec.has-depth .pl-car-ctrl{
  flex:none; display:flex; align-items:center; justify-content:center;
  gap:18px;
  margin-top:clamp(12px,2vh,22px);
  position:relative; z-index:3000; cursor:auto;
}
/* Level with the middle of the stage (the count's line is below it, hence
   the offset). Above every card's z-index, which runs up to 2000-odd. */
.pl-car-btn{ display:none }
.pl-car-sec.has-depth .pl-car-btn{
  position:absolute; z-index:3000;
  top:calc(50% - 30px); transform:translateY(-50%);
  width:52px; height:52px; display:grid; place-items:center;
  padding:0; cursor:pointer; border-radius:999px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 12px 30px -16px rgba(16,15,14,.4);
  transition:background .25s ease, color .25s ease,
             border-color .25s ease, transform .2s ease;
}
.pl-car-btn.is-prev{ left:0 }
.pl-car-btn.is-next{ right:0 }
.pl-car-btn svg{
  width:19px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.pl-car-btn:hover{ background:var(--ink); color:var(--white); border-color:var(--ink) }
.pl-car-btn:active{ transform:translateY(-50%) scale(.94) }
.pl-car-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.pl-car-count{
  margin:0; font:400 16px/1 var(--lux-sans); letter-spacing:.18em;
  color:var(--ink-3, var(--ink)); font-variant-numeric:tabular-nums;
}
.pl-car-count b{ font-weight:500; color:var(--ink) }

.pl-car-sec.has-depth .pl-car-dots{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(14px,2vh,20px);
}
.pl-car-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:999px;
  background:rgba(16,15,14,.22); cursor:pointer;
  transition:width .25s ease, background .25s ease;
}
.pl-car-dot[aria-selected="true"]{ width:22px; background:var(--ink) }

/* ---- The card inside the stack -------------------------------------------
   The render gives up its fixed ratio and takes the slack, with a floor so a
   very short window crops the picture rather than deleting it. The body is
   flex:1 in the listing grid, where it stretches so button bars line up; in
   here it is the fixed part, or the picture never grows past its floor. */
.pl-car-sec .pl-shot{
  aspect-ratio:auto; flex:1 1 auto; min-height:150px;
}
.pl-car-sec .pl-body{ flex:0 0 auto }
.pl-car-sec .pl-card{ height:100% }

/* ---- The depth stack ----------------------------------------------------
   After React Bits' DepthCarousel. The focused project stands at the front;
   the ones after it recede along a rail behind and to the right, each a step
   further back, turned a little on its vertical axis, darker and softer. All
   of the placing is done by cards.js, which writes each card's transform,
   filter and opacity on every frame of a move.

   Without the script there is no stack: .is-depth never lands, and the same
   cards sit in a row that scrolls sideways — every project still reachable.
------------------------------------------------------------------------- */
.pl-car{
  align-self:stretch; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  position:relative; outline:none;
  --car-w:clamp(300px,28vw,450px);
}
.pl-car:focus-visible{ outline:2px solid var(--gold); outline-offset:6px }

/* The no-script row. */
.pl-car-stage{
  flex:1 1 auto; min-height:0;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:min(var(--car-w),86%);
  gap:clamp(20px,2.4vw,36px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.pl-car-stage::-webkit-scrollbar{ display:none }
.pl-car-item{ position:relative; min-height:0; scroll-snap-align:start }

/* The stack. The stage is the 3D viewport and fills the column; each card
   is pinned to its centre and moved from there. */
.pl-car.is-depth{
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.pl-car.is-depth.is-dragging{ cursor:grabbing }
.pl-car.is-depth .pl-car-stage{
  display:block; position:relative; overflow:visible;
  flex:1 1 auto; min-height:0;
  perspective:1400px; perspective-origin:50% 50%;
}
.pl-car.is-depth .pl-car-item{
  position:absolute; top:50%; left:50%;
  width:var(--car-w); height:min(calc(100% - 12px), 780px);
  transform:translate(-50%,-50%);
  transform-origin:center center;
  box-shadow:0 30px 60px -24px rgba(16,15,14,.42),
             0 8px 20px -12px rgba(16,15,14,.3);
  will-change:transform, opacity, filter;
}
/* The cards behind are a way to reach a project, not the project: a click
   on one brings it forward. Their contents are inert (cards.js), so the
   click lands on the item itself. */
.pl-car.is-depth .pl-car-item:not(.is-front){ cursor:pointer }
.pl-car.is-depth .pl-car-item:not(.is-front) .pl-card:hover{
  transform:none; box-shadow:none;
}
/* Shade multiplied over the card as it recedes — the depth is read off
   the darkening as much as the size. */
.pl-car-tint{
  position:absolute; inset:0; z-index:5;
  background:var(--ink-2); mix-blend-mode:multiply;
  opacity:0; pointer-events:none;
}

/* Below this there is no honest way to fit a whole card in one screen, so
   the section stops pretending and scrolls like any other. */
@media (max-height:660px){
  #page-home section.pl-car-sec,
  section.pl-car-sec{ height:auto }
  .pl-car.is-depth .pl-car-stage{ height:560px }
  .pl-car-sec .pl-shot{ aspect-ratio:16/9; flex:0 0 auto }
}
/* One column once two will not sit side by side: the words above, the
   stack under them. */
@media (max-width:900px){
  #page-home section.pl-car-sec,
  section.pl-car-sec{
    height:auto; grid-template-columns:1fr; row-gap:clamp(28px,4vh,40px);
  }
  .pl-car{ --car-w:min(78vw,380px) }
  .pl-car.is-depth .pl-car-stage{ height:clamp(520px,70svh,680px) }
  .pl-car-sec .block-head .lead{ max-width:46ch }
}
@media (prefers-reduced-motion:reduce){
  .pl-car.is-depth .pl-car-item{ will-change:auto }
  .pl-car-dot{ transition:none }
}