/* NOTE: this file is now served directly by site/index.php. The copy in
   src/app/ belongs to the retired Next.js version of this page and is no
   longer read by anything.

   =========================================================================
   Portfolio — the frame, not the picture
   The five client sites each own a loud identity. This page keeps almost
   none: a neutral near-black gallery wall and one typeface family. Nearly
   every colour is still borrowed from the work being shown at that moment;
   the single exception is --accent below, which belongs to the frame rather
   than to any picture in it.
   ========================================================================= */

.pf {
  --void: #ffffff;
  --raise: #f5f5f5;
  --paper: #0a0a0a;
  --dim: #666666;
  --rule: #e0e0e0;

  /* The frame's own colour. The neutrals here are warm — a warm accent would
     dissolve into them, and the two warm signal colours (live, building)
     already own that side of the wheel. A cool indigo is the one hue that
     reads as deliberate against all three, and it stays on page furniture:
     interaction, state and structure, never on a work's own row. */
  --accent: oklch(74% 0.135 274);
  --accent-ink: oklch(21% 0.055 274);
  --accent-dim: color-mix(in oklab, var(--accent) 60%, var(--dim));
  --accent-wash: color-mix(in oklab, var(--accent) 12%, transparent);

  --face-display: var(--pf-font-display), system-ui, sans-serif;
  --face-body: var(--pf-font-body), system-ui, sans-serif;

  /* One ramp, ~1.15 between the text steps and ~1.4 between the display ones.
     The old scale set each step's clamp independently, so the ratios between
     neighbours changed with the viewport: on a phone the six steps collapsed
     into a 11–27px huddle, on a laptop the display sizes tripled while the
     body text barely moved. Same page, two different typographic systems.
     These are tuned so every step keeps its distance from its neighbours at
     every width — the phone renders a smaller page, not a different one.

     The floors are also higher than they were. Arabic carries its meaning in
     dots and marks that sit outside the x-height, so it needs more size than
     Latin to stay legible; 11px metadata was below that line. */
  --t-name: clamp(2.7rem, 1.5rem + 5.4vw, 7rem);
  --t-end: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --t-row: clamp(1.65rem, 1.15rem + 2.2vw, 3.6rem);
  --t-stat: clamp(1.75rem, 1.3rem + 1.8vw, 2.9rem);
  --t-h2: clamp(1.55rem, 1.3rem + 1vw, 2.4rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --t-lead: clamp(1.08rem, 1.02rem + 0.3vw, 1.3rem);
  --t-body: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --t-note: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --t-data: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);

  /* One leading for running text and one for headings, rather than the four
     near-identical values these rules used to carry between them. */
  --lead-text: 1.8;
  --lead-head: 1.24;

  --gutter: clamp(1.35rem, 0.7rem + 3vw, 5rem);
  --band: clamp(3.5rem, 2rem + 7vw, 9rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--void);
  color: var(--paper);
  font-family: var(--face-body);
  font-size: var(--t-body);
  line-height: var(--lead-text);
  min-height: 100vh;
  overflow-x: clip;
}

.pf ::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:where(.pf h1, .pf h2, .pf h3, .pf p, .pf ul, .pf ol, .pf dl, .pf dd) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Arabic needs real leading: ascenders, descenders and marks all sit outside
   the x-height band. */
.pf h1,
.pf h2,
.pf h3 {
  font-family: var(--face-display);
  font-weight: 600;
  line-height: var(--lead-head);
}

/* Arabic is cursive — tracking would break the joins, so none is applied to
   anything that can carry Arabic. */
.pf-note {
  font-size: var(--t-data);
  color: var(--dim);
}

.pf :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.pf-shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================================
   Masthead
   ========================================================================= */

.pf-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: clamp(1.25rem, 3vh, 2.25rem);
}

.pf-mark {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-lead);
  text-decoration: none;
  color: inherit;
}

.pf-top nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.pf-top nav a {
  font-size: var(--t-note);
  color: var(--dim);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.pf-top nav a:hover {
  color: var(--paper);
}

.pf-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-data);
  color: var(--dim);
}

.pf-open i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #4ec38a;
  animation: pf-pulse 2.4s ease-in-out infinite;
}

@keyframes pf-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (max-width: 700px) {
  .pf-top nav {
    display: none;
  }
}

/* =========================================================================
   Statement
   ========================================================================= */

.pf-hero {
  padding-block: clamp(2rem, 6vh, 5rem) var(--band);
}

.pf-hero h1 {
  font-size: var(--t-name);
  font-weight: 300;
  /* 1.1 was set for a Latin display face. At 45px an Arabic line at 1.1 puts
     the marks of one line inside the ascenders of the next. */
  line-height: 1.16;
  max-width: 16ch;
}

/* The emphasis is already carried by the weight jump; the accent arrives as a
   rule under the words rather than as a second colour of text, which would
   turn a headline into two headlines. */
.pf-hero h1 b {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.16em;
}

.pf-hero__sub {
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  max-width: 56ch;
  color: var(--dim);
  font-size: var(--t-lead);
  line-height: var(--lead-text);
}

.pf-tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 3vh, 2rem);
}

.pf-tally b {
  display: block;
  font-family: var(--face-display);
  font-size: var(--t-stat);
  font-weight: 700;
  line-height: 1.05;
}

/* A figure and a word do not occupy the same space at the same size: "٥" is
   one narrow glyph, "كامل" is four joined ones, and set together the word
   reads as the louder statistic when it is only the longer one. */
.pf-tally b.pf-tally__word {
  font-size: var(--t-h3);
  line-height: 1.2;
  padding-block: calc((var(--t-stat) * 1.05 - var(--t-h3) * 1.2) / 2);
}

.pf-tally span {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-data);
  color: var(--dim);
}

/* =========================================================================
   The index — the work as a list, with the palette of each entry riding
   along with the pointer
   ========================================================================= */

.pf-section {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.pf-section__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.pf-section__cap h2 {
  font-size: var(--t-h2);
}

/* A mark repeated at the head of every section — the one place the page keeps
   a colour that is its own, and the cheapest way to give four sections a
   shared rhythm without a rule or a box around anything. Inline rather than
   flex so the heading keeps the baseline its parent aligns against. */
.pf-section__cap h2::before,
.pf-end h2::before {
  content: "";
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-inline-end: 0.5em;
  vertical-align: 0.08em;
  background: var(--accent);
}

/* ---- Filters ----------------------------------------------------------- */

.pf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.pf-filter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.pf-filter > span {
  font-size: var(--t-data);
  color: var(--dim);
  margin-inline-end: 0.35rem;
}

/* Narrow enough that the chips wrap anyway: with the label sharing their first
   line, the second and third lines start at the page edge and the group loses
   the left edge that made it read as one set. Giving the label its own line
   costs 20px and lines every chip up under it. */
@media (max-width: 640px) {
  .pf-filters {
    gap: 1.15rem;
  }
  .pf-filter > span {
    flex: 0 0 100%;
    margin-inline-end: 0;
  }
}

.pf-chip {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: var(--t-data);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.pf-chip:hover {
  color: var(--paper);
  border-color: var(--dim);
}

.pf-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pf-chip b {
  font-weight: 400;
  opacity: 0.55;
  margin-inline-start: 0.35rem;
}

.pf-group + .pf-group {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.pf-group__label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--t-data);
  color: var(--dim);
  padding-bottom: 0.6rem;
}

.pf-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.pf-empty {
  padding-block: clamp(2rem, 6vh, 4rem);
  text-align: center;
  color: var(--dim);
  font-size: var(--t-note);
  border-top: 1px solid var(--rule);
}

.pf-index {
  border-top: 1px solid var(--rule);
}

/* Status and platform marks on an index row. */
.pf-row__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.pf-tagline {
  font-size: var(--t-data);
  color: var(--dim);
  border: 1px solid var(--rule);
  padding: 0.24rem 0.6rem;
  white-space: nowrap;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.pf-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-data);
  color: var(--dim);
  white-space: nowrap;
}

/* The dot holds the status colour separately from the label, so that when a
   row is hovered and the text has to follow the work's own wash, the signal
   survives the change instead of being repainted along with the sentence. */
.pf-state i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex: none;
  background: var(--state-dot, currentColor);
}

.pf-state--live {
  --state-dot: #4ec38a;
  color: #4ec38a;
}

.pf-state--building {
  --state-dot: #e0b153;
  color: #e0b153;
}

.pf-state--planned {
  --state-dot: var(--dim);
  color: var(--dim);
}

/* A row with no demo of its own is not a link, so it must not look like one. */
.pf-row--static {
  cursor: default;
}

.pf-row--static:hover .pf-row__title h3 {
  transform: none;
}

.pf-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(1rem, 2.6vh, 1.9rem);
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.35s var(--ease);
}

/* The entry's own palette washes in behind it. This is the only colour the
   page ever shows, and it always belongs to the work being pointed at. */
.pf-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  z-index: -1;
  background: var(--wash, transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.pf-row:hover::before,
.pf-row:focus-visible::before {
  opacity: 1;
}

.pf-row__n {
  font-family: var(--face-display);
  font-size: var(--t-data);
  color: var(--dim);
  transition: color 0.35s var(--ease);
}

.pf-row__title {
  display: flex;
  align-items: baseline;
  gap: clamp(0.6rem, 1.6vw, 1.25rem);
  flex-wrap: wrap;
  min-width: 0;
}

.pf-row__title h3 {
  font-size: var(--t-row);
  font-weight: 400;
  line-height: 1.2;
  transition: transform 0.45s var(--ease);
}

.pf-row:hover .pf-row__title h3 {
  transform: translateX(calc(var(--gutter) * -0.22));
}

.pf-row__kind {
  font-size: var(--t-note);
  color: var(--dim);
  transition: color 0.35s var(--ease);
}

.pf-row:hover {
  color: var(--on-wash, var(--paper));
}

.pf-row:hover .pf-row__n,
.pf-row:hover .pf-row__kind {
  color: var(--on-wash-dim, var(--dim));
}

/* Half the works have a light palette, and on a light wash the unchanged
   metadata — grey text inside a near-black border — goes to almost nothing.
   Both follow the wash; only the status dot keeps its own colour. */
.pf-row:hover .pf-tagline {
  border-color: color-mix(in oklab, var(--on-wash-dim, var(--dim)) 45%, transparent);
  color: var(--on-wash-dim, var(--dim));
}

.pf-row:hover .pf-state {
  color: var(--on-wash-dim, var(--dim));
}

@media (max-width: 760px) {
  /* Two columns for three children: the metadata used to be auto-placed into
     the second row of the *first* column — the 2.5rem one holding the index
     number — where a 77px platform tag had nowhere to go but out of its cell.
     It belongs under the title, in the column wide enough to hold it. */
  .pf-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: start;
  }
  .pf-row__n {
    padding-top: 0.15em;
  }
  .pf-row__meta {
    grid-column: 2;
    margin-top: 0.55rem;
  }
  .pf-row:hover .pf-row__title h3 {
    transform: none;
  }
}

/* =========================================================================
   Live viewer — the work running, not a screenshot of it
   ========================================================================= */

.pf-viewer {
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

.pf-tabs {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}

.pf-tabs::-webkit-scrollbar {
  display: none;
}

.pf-tab {
  border: 0;
  background: transparent;
  padding: 0 0 0.85rem;
  font: inherit;
  font-size: var(--t-note);
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pf-tab:hover {
  color: var(--paper);
}

.pf-tab[aria-selected="true"] {
  color: var(--paper);
  border-bottom-color: var(--tint, var(--accent));
}

.pf-screen {
  position: relative;
  margin-top: clamp(1rem, 3vh, 1.75rem);
  border: 1px solid var(--rule);
  background: var(--raise);
  overflow: hidden;
}

.pf-screen__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.pf-screen__bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rule);
}

.pf-screen__bar span {
  margin-inline-start: auto;
  font-size: var(--t-data);
  color: var(--dim);
  direction: ltr;
}

.pf-screen iframe {
  display: block;
  width: 100%;
  height: clamp(340px, 62vh, 720px);
  border: 0;
  background: var(--void);
}

.pf-screen__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.85rem 1.6rem;
  background: var(--paper);
  color: var(--void);
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--t-note);
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.pf-screen__open:hover {
  background: var(--tint, var(--accent));
}

/* =========================================================================
   Systems — the half with no public page
   ========================================================================= */

.pf-systems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pf-system {
  /* Declared, not just applied: the screenshot strip below bleeds to the card
     edge by negating this, and it was negating a hard-coded 1.5rem that the
     padding only equals at one viewport width. */
  --pad: clamp(1.25rem, 2.4vw, 2rem);

  background: var(--void);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.3s var(--ease);
}

.pf-system:hover {
  background: var(--raise);
}

.pf-system__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pf-system__top span {
  font-size: var(--t-data);
  color: var(--dim);
}

/* A work's title is a work's title. This one used to be set at 17px beside a
   62px index row above it, which read as two unrelated pages. */
.pf-system h3 {
  font-size: var(--t-h3);
}

.pf-system p {
  font-size: var(--t-note);
  color: var(--dim);
  line-height: var(--lead-text);
}

.pf-facts {
  display: grid;
  gap: 0.45rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: auto;
}

.pf-fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-data);
}

.pf-fact span:first-child {
  color: var(--dim);
}

.pf-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pf-stack span {
  font-size: var(--t-data);
  color: var(--dim);
  border: 1px solid var(--rule);
  padding: 0.22rem 0.6rem;
}

/* =========================================================================
   Capabilities
   ========================================================================= */

.pf-skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.pf-skill {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.pf-skill__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pf-skill h3 {
  font-size: var(--t-body);
  font-weight: 600;
}

.pf-skill__lvl {
  font-family: var(--face-display);
  font-size: var(--t-data);
  color: var(--dim);
}

.pf-skill__rail {
  height: 2px;
  background: var(--rule);
  margin-block: 0.7rem;
}

/* The one place a bar of solid colour is honest: it is a measurement, and the
   gradient makes eight identical rails read as a set rather than eight
   unrelated white lines. */
.pf-skill__rail i {
  display: block;
  height: 100%;
  background: linear-gradient(to left, var(--accent), var(--accent-dim));
}

.pf-skill p {
  font-size: var(--t-data);
  color: var(--dim);
  line-height: var(--lead-text);
}

/* =========================================================================
   Contact
   ========================================================================= */

.pf-end {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

/* Kept clearly below the hero at every width. On a phone the old clamp put
   this within 5px of the name at the top of the page, so the last section
   read as a second opening. */
.pf-end h2 {
  font-size: var(--t-end);
  font-weight: 300;
  line-height: 1.18;
  max-width: 18ch;
}

.pf-end h2 b {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.16em;
}

.pf-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

.pf-lines a {
  font-size: var(--t-lead);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.pf-lines a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.pf-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid var(--rule);
}

/* =========================================================================
   Motion preferences
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .pf *,
  .pf *::before,
  .pf *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   Additions for the PHP render
   Three fields the old page stored but never showed — the signature technique,
   the screenshots and the links to actually get the thing — plus the measure
   utilities that replace the inline max-width styles the CSP now forbids.
   ========================================================================= */

.pf-note--w40 { max-width: 40ch; }
.pf-note--w44 { max-width: 44ch; }
.pf-note--w46 { max-width: 46ch; }

.pf-hero__sub--gap { margin-top: 1.5rem; }

/* The signature technique, set apart from the description that follows it. */
.pf-system__mark {
  font-size: var(--t-note);
  color: var(--tint, var(--accent));
  margin-bottom: 0.4rem;
}

/* ---- Screenshots -------------------------------------------------------- */

.pf-shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(15rem, 78%), 1fr);
  gap: 0.75rem;
  margin: 1.15rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bleeds to the card edge so a strip that scrolls looks like it continues,
     rather than stopping short inside a padded box. */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width: thin;
}

.pf-shot {
  margin: 0;
  scroll-snap-align: start;
  background: var(--void);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.pf-shot img {
  width: 100%;
  height: auto;
  /* Screenshots arrive at every ratio; a fixed box keeps the strip even and
     stops one tall image from setting the height of the whole row. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.pf-system:hover .pf-shot img { opacity: 1; }
.pf-shot:hover img { transform: scale(1.03); }

/* ---- Get it ------------------------------------------------------------- */

.pf-gets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}

.pf-get {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-note);
  color: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.42rem 0.9rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease);
}

.pf-get:hover {
  border-color: var(--tint, var(--accent));
  background: color-mix(in oklab, var(--tint, var(--accent)) 12%, transparent);
}

/* The primary way to get the thing reads as the primary action. */
.pf-get--download,
.pf-get--demo {
  border-color: color-mix(in oklab, var(--tint, var(--accent)) 55%, var(--rule));
  color: var(--tint, var(--accent));
}

.pf-get--appstore,
.pf-get--playstore {
  color: var(--dim);
}

.pf-get--appstore:hover,
.pf-get--playstore:hover {
  color: var(--paper);
}