/* =============================================================================
   polish.css — premium finish for artxdevllc.com
   =============================================================================
   Loaded after the page's inline <style> and after motion.css.

   DESIGN RULE FOR THIS FILE: refine surfaces and type, never layout.
   No element changes size, position, colour scheme or stacking. Everything here
   is edge quality, depth and typographic detail — the things that separate a
   site that "works" from one that feels considered. If a rule would move
   something, it does not belong in this file.

   The five things being fixed, in order of how much they matter:
     1. Font smoothing was off, so all text rendered slightly heavy and fuzzy.
     2. Display headings ran at default tracking. At 56px that reads loose;
        tightening is the single biggest perceived-quality win in typography.
     3. Shadows were one flat layer. Real depth needs a contact shadow plus a
        wider ambient one.
     4. Cards sat on the page as flat fills with a hard grey border.
     5. Numerals were proportional, so stat rows sat unevenly.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Text rendering — the cheapest, most noticeable improvement on the site
   -------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* kerning + standard ligatures; off by default in most browsers for body copy */
    font-feature-settings: "kern" 1, "liga" 1;
}

/* -----------------------------------------------------------------------------
   2. Display typography — tighter tracking as type gets larger.
      Only tracking and line-height change; size and weight are untouched, so
      nothing reflows to a different number of lines.
   -------------------------------------------------------------------------- */
h1 {
    letter-spacing: -0.03em;
    line-height: 1.06;
}

h2,
.section-title,
.profile-name {
    letter-spacing: -0.022em;
}

h3,
h4,
.team-name,
.project-title {
    letter-spacing: -0.014em;
}

/* Small uppercase labels want the opposite treatment: open them up. */
.project-category,
.team-role,
.stat-label,
.section-subtitle {
    letter-spacing: 0.01em;
}

/* Body copy reads better slightly wider than default at this size. */
p {
    line-height: 1.72;
}

/* -----------------------------------------------------------------------------
   3. Numerals — proportional figures make stat rows look misaligned.
      Tabular figures give every digit the same advance width.
   -------------------------------------------------------------------------- */
.stat-number,
.profile-stat .stat-number,
.stat-item .stat-number {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------
   4. Card surfaces — DELIBERATELY LEFT ALONE.

      The pages alternate card colour by section: `.team-card` is dark, while
      `.section:nth-child(even) .team-card` is light, and each is given its own
      shadow alpha (0.3 on the dark variant, 0.1 on the light one) so both read
      correctly against their own backdrop. That is a considered system.

      A blanket `.team-card { box-shadow: ... }` here loses to those three-class
      selectors on About and Careers, but wins on Projects and Services — so the
      site would end up with two different card treatments. Overriding it
      properly would mean re-specifying every light/dark pairing, which is a
      redesign, not a polish pass.

      Depth on this site therefore stays where its authors put it. If you want
      the cards reworked too, say so and I will do it per surface rather than
      blanket.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   5. Avatars — shadow only. The rings are deliberate and differ by page
      (a white 5px ring on the dark profile cards, a translucent one on About),
      so border-color is left exactly as each page set it.
   -------------------------------------------------------------------------- */
.team-avatar,
.profile-avatar {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.25),
        0 12px 28px -10px rgba(0, 0, 0, 0.4);
}

/* Photos benefit from a touch more contrast at small sizes. */
.team-avatar img,
.profile-avatar img {
    filter: saturate(1.04) contrast(1.02);
}

/* -----------------------------------------------------------------------------
   6. Buttons — a flat white fill is fine; a fill with a light source is better.
      Gradient is near-invisible by design, the shadow does the work.
   -------------------------------------------------------------------------- */
.cta-button,
.btn-primary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.05) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 8px 20px -6px rgba(0, 0, 0, 0.45);
}

/* Pill tags read better with a hairline than a hard fill edge. Neutral grey so
   it works on both the light and dark variants of these pills. */
.tech-tag,
.skill-tag {
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2);
}

/* -----------------------------------------------------------------------------
   7. Chrome details — small things people never consciously notice, but which
      look unfinished when they are left at browser defaults.
   -------------------------------------------------------------------------- */
::selection {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Dark scrollbar, so it stops being a bright strip against a black page. */
* {
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    /* inset from the track so the thumb reads as floating */
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
    background-clip: content-box;
}

/* Images should never be draggable ghosts mid-layout. */
img {
    -webkit-user-drag: none;
}

/* -----------------------------------------------------------------------------
   8. Accessibility — loaded after the pages' own reduced-motion block, so opt
      out again for anything here that animates.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .team-avatar img,
    .profile-avatar img {
        filter: none;
    }
}