/* ===================================================================
   surface.css — the component layer for the light page.

   Surface qualities are taken from the Blank 2.7 reference: warm
   off-white page, pure-white raised cards with a soft wide shadow and a
   large radius, a solid near-black primary, and a tinted pill for
   metadata. Its STRUCTURE is deliberately not taken — that kit is a
   SaaS landing grammar (centred everything, dual CTA, social proof,
   pricing) built to convert a stranger, which is not what a portfolio
   has to do.

   The white-card-on-off-white plate earns its place: the screenshots
   split 43% dark / 57% light, and inside a defined white card both
   halves read as objects instead of one half dominating.
   =================================================================== */

/* ===================================================================
   light.css — light theme.

   Surface qualities are borrowed from the Blank 2.7 kit: warm off-white
   page, pure-white raised cards with a soft wide shadow and a large
   radius, near-black solid primary against a bordered secondary, tinted
   pill chips for metadata. The kit's STRUCTURE is deliberately not
   borrowed — it is a SaaS landing grammar (centred everything, dual CTA,
   social proof, pricing) built to convert a stranger, which is not the
   job of a portfolio.

   The white-card-on-off-white plate does real work here. Antonio's
   screenshots split 43% dark / 57% light. On a plain white page the
   light captures dissolve; inside a white card with a defined edge and
   shadow, both halves read as objects.
   =================================================================== */


/* ---- the plate ---- */

.pj__frame {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: .625rem;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
.pj__shot:hover .pj__frame {
  box-shadow: 0 2px 4px rgba(17,17,17,.05), 0 28px 60px -20px rgba(17,17,17,.22);
  transform: translateY(-2px);
}
.pj__frame::before {
  background:
    radial-gradient(circle at .8rem 50%, rgba(17,17,17,.16) 2.5px, transparent 3px),
    radial-gradient(circle at 1.5rem 50%, rgba(17,17,17,.16) 2.5px, transparent 3px),
    radial-gradient(circle at 2.2rem 50%, rgba(17,17,17,.16) 2.5px, transparent 3px),
    transparent;
  top: .625rem; left: .625rem; right: .625rem;
}
.pj__frame img {
  border-radius: calc(var(--radius-card) - .625rem);
  background: var(--bg-sunken);
}

/* Phones get no plate: the bezel is the frame. It is drawn here rather than
   baked into the captures, which are screen content only, so the home and the
   case pages show a screen inside exactly the same device. Dark, because every
   screen in this app is black and a pale frame would draw a bright line around
   the one thing it is there to present. */
.pj__shot--phone .pj__frame {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.pj__shot--phone .pj__frame::before { display: none; }
.pj__shot--phone .pj__frame img,
.pj__shot--phone .pj__frame video {
  border: 5px solid #0B0B0D;
  border-radius: 30px;
  background: #0B0B0D;
  box-sizing: border-box;
  filter: drop-shadow(0 22px 44px rgba(17, 17, 17, .26));
}
.pj__shot--phone:hover .pj__frame { transform: translateY(-2px); }

/* ---- metadata as a tinted chip, the one pattern worth taking whole ---- */

.pj__kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: nowrap;          /* a pill that wraps stops reading as a pill */
  white-space: nowrap;
  overflow: hidden;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, .05);
  color: var(--fg-2);
  font-size: .625rem;
}

/* Numbers read as figures, not as labels: bold and large, mono stays
   for the label underneath. */
.pj__stat b {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--fg-1);
}

/* ---- buttons ---- */

.pj__cta {
  padding: .6rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--fg);
  color: var(--bg-raised);
  font-size: .8125rem;
  font-weight: 500;
  transition: background .3s var(--ease), gap .3s var(--ease);
}
.pj__cta:hover { background: #000; gap: .85rem; }

.progress-bar { background: var(--fg); }
::selection { background: var(--fg); color: #fff; }

/* ---- hero ---- */

.hero-section::after {
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(247,247,245,0) 0%, rgba(247,247,245,.62) 52%, rgba(247,247,245,.97) 100%),
    linear-gradient(180deg, rgba(247,247,245,.9) 0%, rgba(247,247,245,.3) 20%, rgba(247,247,245,.75) 60%, var(--bg) 100%);
}
.wall { opacity: .28; filter: saturate(.45) contrast(.9); }
.wall__col img {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 22px -12px rgba(17,17,17,.18);
}
.hero-section .section-bottom-wrapper { border-top-color: var(--line); }
.hero-scroll-cue i { background: linear-gradient(180deg, rgba(17,17,17,.4), transparent); }

.pj { border-top-color: var(--line); }

/* The kicker pill holds four segments. Below ~900px that cannot fit on
   one line, and a nowrap pill pushes the whole page sideways, so the
   chip drops back to plain wrapped metadata instead. */
@media (max-width: 900px) {
  .pj__kicker {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: var(--t-meta);
  }
}

/* The Webflow-era style.css and layout.css load after tokens.css and set
   their own colours, so the page ramp is re-asserted here, from the last
   stylesheet, rather than by raising specificity in six older files.
   The type families are NOT re-declared here: tokens.css owns them, so a
   page that loads only tokens.css still gets the right faces. */

html, body {
  background: var(--paper) !important;
  color: var(--fg-2);
  font-family: var(--font-text);
}

.section, .hero-section, .site-footer, .work-grid { background: transparent; }

/* ===================================================================
   Per-project accent.

   Each section carries the hue of the product it documents, sampled
   from that product's own screenshots. Hue therefore always answers
   "which product am I looking at", never "look at this colour".

   Yellow cannot be text on paper and blue can, so every accent ships
   as three values rather than one: --accent-tint fills behind text,
   --accent-ink is the legible version for text and rules, --accent is
   the pure marker.
   =================================================================== */

/* All six products are keyed here, the deep cases and the shipped three
   alike, so nothing on the page is left colourless. Keyed by id, so a
   section that gets renumbered keeps its product's hue. */
#proj-01        { --accent: #2F7DE1; --accent-ink: #1B5FBF; --accent-tint: rgba(47,125,225,.10); }  /* Subly blue */
#proj-02        { --accent: #F5E14A; --accent-ink: #7A6608; --accent-tint: rgba(245,225,74,.22); }  /* SHOWBOAT yellow */
#proj-03        { --accent: #2F7DE1; --accent-ink: #1B5FBF; --accent-tint: rgba(47,125,225,.10); }  /* Subly blue */
#also-pumcha    { --accent: #E0344F; --accent-ink: #BE1F38; --accent-tint: rgba(224,52,79,.10); }   /* Pumcha red */
#also-truequego { --accent: #E2701A; --accent-ink: #B45309; --accent-tint: rgba(226,112,26,.11); }  /* TruequeGo orange */
#also-booqd     { --accent: #4F46E5; --accent-ink: #4038CC; --accent-tint: rgba(79,70,229,.10); }   /* booqd indigo */

/* There used to be a short bar of the product's colour sitting on the section
   rule here. It was cut on 2026-08-24: sitting on a divider, 2px tall and
   running partway across, it read as a progress indicator — and the page has
   a real one, fixed at the top in ink. Two things that look the same and mean
   different things is worse than not marking the section at all. The product's
   colour is already carried by the kicker and by the stat figures.
   `.pj { position: relative }` stays in projects.css, which needs it. */

/* The shipped three are cards, not sections. A hairline and a tinted
   shadow were tried here and cut: on a card the colour only needs one
   carrier, and the kicker is already sitting where the eye lands. */
.strip__item .strip__kicker { color: var(--accent-ink); }

.pj__kicker {
  background: var(--accent-tint);
  color: var(--accent-ink);
}

/* Ordering trap: the rule above sits AFTER the max-width:900px block that
   drops the pill back to plain metadata, so at equal specificity it won
   and the tint survived on mobile — with the padding and the radius gone.
   The result was a highlighter smear hugging the text rather than either a
   pill or plain metadata. The accent stays on the ink, never on the ground. */
@media (max-width: 900px) {
  .pj__kicker { background: none; }
}

/* The number is the thing the eye should land on in the meta column. */
.pj__stat b { color: var(--accent-ink); }
.pj__stats { border-top-color: var(--line); }

/* The action stays near-black across every project so "the way in"
   never changes shape; the colour arrives on hover instead. */
.pj__cta { background: var(--fg); color: #fff; }
.pj__cta:hover { background: var(--accent-ink); }

/* The plate picks up the faintest wash of its product's hue, enough to
   stop six identical white cards reading as a spreadsheet. */
.pj__frame { background: var(--bg-raised); }
.pj__shot:hover .pj__frame {
  box-shadow:
    0 2px 4px rgba(17,17,17,.05),
    0 28px 60px -20px color-mix(in srgb, var(--accent) 32%, rgba(17,17,17,.22));
}

/* The discipline sits outside the pill: four segments never fit one
   line in a 20rem column, and a clipped pill reads as a bug. */
.pj__discipline {
  margin: -.85rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}