/* PROVI marketplace — the template tier.

   A FLAT PAGE ON PURPOSE. The homepage flies a canyon and About pulls
   sections through a lens; this one is a person deciding whether to spend a
   thousand dollars, and a scroll they have to learn is friction at exactly
   the wrong moment. So it scrolls the way a page scrolls, and the only
   motion is the drifting grain behind it and the reveals as blocks arrive.

   Nearly all of it runs on the shared system in style.css — .band, .wrap,
   .display, .lede, .card-grid, .card, .spec-rows, .btn were all written for
   this page before it existed. What is here is the marketplace's own
   additions and the places the shared defaults need a third column. */

/* ---------- the opening ----------
   No eyebrow above the heading, per the house rule: a label announcing what
   the reader is about to read instead of letting them read it. The heading
   carries it alone. */
.mk-open{
  padding-block:clamp(4.5rem,14vh,9rem) clamp(2.5rem,7vh,4.5rem);
}
.mk-open .display{max-width:18ch}
.mk-open .lede{max-width:44rem}

/* The pitch. One line, and it is the loudest piece of type on the page after
   the heading.

   IN THE BODY FACE, NOT THE DISPLAY ONE. It has to read as bold, and Bruno Ace
   ships in a single weight; asking it for 600 gets a synthetic bold that
   thickens its strokes unevenly and fills in the square counters that give the
   face its shape. IBM Plex Sans has a real 600, so the emphasis is a weight
   that was drawn rather than one the browser invented.

   Solid paper, and no grain on it. The grain is the interface's way of marking
   a surface as active; on a line of type at this size it lightens and breaks
   the strokes, which is the opposite of what a single bold claim needs. */
.mk-pitch{
  margin-top:2.2rem;padding-bottom:1.3rem;
  max-width:36rem;
  font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.62rem);
  line-height:1.35;
  letter-spacing:-.005em;
  color:var(--paper);
  border-bottom:1px solid var(--accent-dim);
}

/* ---------- the grid ----------
   style.css tops out at two columns, which is right for the work pages where
   a card is a case study. A marketplace is a comparison: three across at the
   width that fits them, so a reader can see the range without scrolling. */
@media(min-width:1100px){
  .card-grid--mk{grid-template-columns:repeat(3,1fr)}
}
.card-grid--mk{margin-top:2.5rem}
/* The grid section sits between two full .band paddings, which stacked to
   about fourteen rems of nothing under the last row. The opening block above
   already carries its own bottom padding, so this one only needs to clear
   the rule beneath it. */
.band--grid{padding-block:0 clamp(2.5rem,7vh,4.5rem)}

/* The tag stays off the highlight. Each card already carries a filled button
   and a price in the highlight, and a third coloured element turns the card
   into a list of coloured things with no hierarchy among them. The audience label is
   the least important of the three, so it is the one that gives. */
.card-grid--mk .card-tag{color:var(--paper-dim)}

/* Card lift. The shared .card only moves its border on hover, which is right
   for a portfolio and too quiet for something with a buy button on it.

   This flat lift is the FALLBACK. js/tilt.js replaces it with a real
   pointer-tracked tilt where there is a pointer to track, and tags the root
   .has-tilt when it does; without a fine pointer, under reduced motion, or
   with the script absent, the card still answers a hover. */
.card-grid--mk .card{
  display:flex;flex-direction:column;
  transition:border-color .25s,transform .35s,background-color .25s;
}
.card-grid--mk .card:hover{
  transform:translateY(-3px);
  background:rgba(20,20,22,.72);
}
.has-tilt .card-grid--mk .card:hover{transform:none}
.has-tilt .card-grid--mk .card{
  /* the spring writes transform every frame, so a transition on it would be
     a second easing fighting the first */
  transition:border-color .25s,background-color .25s,box-shadow .25s;
  /* z-index needs a positioned element; js/tilt.js raises the active card */
  position:relative;
}
/* The tilt reads off the card's edges, so the hovered card gets a highlight
   glow as well as a highlight border: it separates the raised card from the
   flat ones behind it, which a 1px line on a near-black ground does not. */
.has-tilt .card-grid--mk .card:hover{
  box-shadow:0 18px 50px -22px var(--accent-glow);
}
/* NO preserve-3d here, deliberately. Children of a rotated element rotate
   with it whether or not the parent preserves 3D; preserve-3d only matters
   when a child carries its own 3D transform, and none of these do. It is also
   specified to be ignored on an element with overflow:hidden, which .card
   has, so asking for it would be a no-op that reads as load-bearing. */
.card-grid--mk .card-body{
  display:flex;flex-direction:column;flex:1;
}
/* pushes the price row to the bottom edge whatever the description runs to,
   so the prices line up across a row instead of stepping with the copy */
.card-grid--mk .card-meta{margin-top:auto;padding-top:1.4rem}

/* The media is a link on a real card, so it needs to fill its box the way the
   shared .card-media img does and take the same hover lift. */
.card-grid--mk a.card-media{display:block}
.card-grid--mk a.card-media img{width:100%;height:100%;object-fit:cover;object-position:top}

/* PLACEHOLDER MEDIA. Stands in for a screenshot at the real aspect so the
   grid can be judged before the templates are shot. Delete this rule with
   the last placeholder card. */
.card-media--empty{
  background:
    repeating-linear-gradient(135deg,
      rgba(242,241,236,.028) 0 2px, rgba(242,241,236,0) 2px 7px),
    var(--ink-2);
  border-bottom:1px solid var(--line);
}

/* ---------- the card's two routes out ----------
   A demo and a start. The demo is the quiet one: a reader who wants to look
   before they commit should not have to weigh two equally loud buttons. */
.card-actions{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1.1rem;
}
.card-actions .btn{padding:.7rem 1.15rem;font-size:.8rem}
.card-demo{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--font-display);font-weight:400;
  color:var(--paper-faint);
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.card-demo:hover{color:#DEDCD4;border-bottom-color:var(--line-strong)}

/* ---------- what every template carries ----------
   The shared .spec-rows, widened. On the marketplace this is the answer to
   "what am I actually buying", so it gets the full measure rather than the
   640px a sidebar list would take. */
.mk-includes .spec-rows{max-width:none}
@media(min-width:900px){
  .mk-includes .spec-rows{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,5vw,4.5rem);
  }
  /* Every row draws its own top rule, so in two columns the first row of the
     RIGHT column needs one too and the last row must not double up with the
     :last-child bottom rule. */
  .mk-includes .spec-row{border-top:1px solid var(--line)}
  .mk-includes .spec-row:last-child{border-bottom:none}
}

/* ---------- the way out for someone this tier does not fit ---------- */
.mk-custom{
  border-top:1px solid var(--line);
  padding-block:clamp(4rem,11vh,7rem);
}
.mk-custom .display{max-width:20ch}
.mk-custom .lede{margin-bottom:2rem}

/* ---------- arrival ----------
   Blocks resolve out of the grain rather than switching on, which is the
   motion rule the rest of the site holds to. IntersectionObserver in
   js/reveal.js adds .is-in; without the script every block simply stays
   visible, so the page never depends on it. */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
/* Staggered down a grid, so a row of cards arrives as a row rather than all
   at once. Capped at six: past that the last card waits long enough for the
   delay itself to be the thing you notice. */
.reveal:nth-child(2){transition-delay:.07s}
.reveal:nth-child(3){transition-delay:.14s}
.reveal:nth-child(4){transition-delay:.21s}
.reveal:nth-child(5){transition-delay:.28s}
.reveal:nth-child(6){transition-delay:.35s}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card-grid--mk .card:hover{transform:none}
}

/* A card whose template does not exist yet. It looks like the button beside
   it so the grid keeps its rhythm, but it is a span rather than a link: there
   is nowhere to go, and a template is no longer something to enquire about. */
.btn-soon{
  display:inline-flex;align-items:center;
  padding:.7rem 1.15rem;font-size:.8rem;font-weight:600;
  border:1px dashed var(--line-strong);
  color:var(--paper-faint);cursor:not-allowed;border-radius:2px;
}

/* The coming-soon state's button row. The cards that used to carry the
   action are gone, so the opening section has to hold it instead. */
.mk-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vh,2rem)}