/* ============================================================
   portfolio-page.css — the /portfolio page only.

   SCOPED ON PURPOSE. styles.css and pages.css are shared by every page on this site, and
   local.css belongs to the home page. Portfolio-only rules live here so that changing the
   look of this page can never move a pixel on any other one. That is the cross-site bleed
   rule applied inside a single site: shared sheets stay shared, page-specific look stays
   page-specific. If a rule here would help another page, promote it deliberately, do not
   quietly widen the selector.

   Tokens (--ink, --paper, --accent, --line, --mono, --t-hi/mid/low, --pad, --maxw) all come
   from styles.css. Do not hardcode a colour that already has a variable.

   WHY A GRID AND NOT THE HOME PAGE'S RAIL: on the home page the rail is a teaser, and a card
   cut off at the right edge is what tells you to swipe. Here the screenshots ARE the page, so
   burying eighteen of them one-at-a-time behind an arrow makes a visitor work for the proof.
   The grid shows range in one glance on a laptop and stacks to a single readable column on a
   phone, which is where most of these will actually be seen.
   ============================================================ */

/* ---------- section furniture ---------- */
.pg__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pg__note{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--t-low);margin-top:18px}

/* ---------- the grid ----------
   One column on a phone, two from 860px. Deliberately never three: these are screenshots of
   software, and at a third of a 1400px page the row labels and numbers inside them stop being
   legible, which defeats the entire point of showing the screen. */
.pg{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,34px);margin-top:30px}
@media (min-width:860px){.pg{grid-template-columns:repeat(2,1fr)}}

.pg__card{margin:0;min-width:0}

/* ---------- the shot ----------
   A fixed 3/2 media box for every card, whatever the source shape, so the grid keeps its rhythm
   and no row is dragged tall by one screenshot. Desktop captures fill it. Phone and tablet
   captures are letterboxed inside it against a darker panel rather than cropped, because
   cropping a phone screen to landscape cuts off the thing the card exists to show. */
.pg__shot{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink-2);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}
.pg__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Tall (phone / tablet) captures: contained, centred, on a recessed panel with a soft edge so
   the letterbox reads as a deliberate device shot rather than as a mistake in the layout. */
.pg__shot--tall{background:
  radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.045), transparent 62%), var(--ink-2)}
.pg__shot--tall img{width:auto;height:100%;object-fit:contain;object-position:center;
  border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.45)}

.pg__card:hover .pg__shot{border-color:var(--accent)}
.pg__shot{transition:border-color .15s}

/* ---------- the stamp ----------
   Every card carries one, and the wording is load-bearing. "Live" and "In use" mean a real
   running product. "Client build (details changed)" means a real product whose names, logo and
   numbers were swapped for invented ones before the screenshot. "Example concept" means an
   image we generated and nobody is using. Those are three different truth claims and the stamp
   is the only place a reader can tell them apart at a glance. Do not merge them. */
.pg__stamp{position:absolute;top:11px;right:11px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;background:rgba(8,8,9,.74);
  border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:4px 9px;backdrop-filter:blur(3px)}
.pg__stamp--live{color:var(--accent);border-color:rgba(231,178,76,.45)}

/* ---------- the caption ----------
   Two lines, never more: what the business is, then what the screen does. The type on the card
   is the only writing on this page that a skimmer actually reads, so it stays short. */
.pg__cap{margin-top:13px}
.pg__biz{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t-low)}
.pg__what{display:block;font-size:16px;line-height:1.45;color:var(--t-hi);margin-top:5px}
.pg__link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.05em;color:var(--t-low);text-decoration:none;transition:color .15s}
.pg__link:hover{color:var(--accent)}
.pg__card a{text-decoration:none;color:inherit;display:block}
.pg__card a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:14px}

/* The per-card disclaimer on a generated concept. It is small, but it is the sentence that keeps
   a card of someone else's business name from reading as a claim that they are a customer. */
.pg__disc{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--t-low);opacity:.8;margin-top:7px}

/* ---------- the closing call to action ---------- */
.pgcta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;padding:clamp(22px,3vw,32px);background:var(--ink-2)}
.pgcta__k{font-size:clamp(19px,2.4vw,25px);line-height:1.3;color:var(--t-hi);max-width:34ch}
.pgcta__p{font-family:var(--mono);font-size:12px;color:var(--t-low);margin-top:8px}

@media (max-width:760px){
  .pg__head{align-items:flex-start}
  .pgcta{flex-direction:column;align-items:flex-start}
}

/* ---------- the access line ----------
   Two states, deliberately different in weight. A demo you can open is an invitation and gets
   the accent colour and an arrow; a private system gets quiet grey and no affordance, so nobody
   clicks at something that will not respond. Both lines exist on every card, because an unlinked
   card with no explanation reads as a broken link rather than as a private system. */
.pg__link--go{color:var(--accent)}
.pg__link--go i{font-style:normal;font-size:11px}
.pg__card--live:hover .pg__link--go{text-decoration:underline}
.pg__link--closed{color:var(--t-low);opacity:.75}
/* Only the openable cards get a pointer and a lift. A private card should not pretend. */
.pg__card--live .pg__shot{cursor:pointer}