/* AM Portfolio — shared styles
   Layout: 1200px content column, 120px gutters at 1440 (scales down to 16px), sticky glass nav. */
:root {
  --lav: #aaa2ff;            /* intro page ground */
  --ink: #222;               /* text on lavender, case-study ground */
  --ink-2: #4d4d4d;
  --ink-muted: rgba(34,34,34,.6);
  --tint: rgba(34,34,34,.05);
  --paper: #fff;             /* text on dark */
  --paper-2: #979797;
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 8.333vw, 120px);
  --max: 1200px;
  --t-hero: clamp(30px, 4.167vw, 60px);
  --t-h2: clamp(22px, 2.22vw, 32px);
  --t-body: clamp(15px, 1.39vw, 20px);
  --t-nav: clamp(13px, 1.11vw, 16px);
  /* glass rim: cool blue top-left, clear through the middle, faint blush bottom-right */
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  font-family: var(--font); font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
img { max-width: 100%; }
.wrap {
  width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Header + glass nav pill */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  padding-top: clamp(16px, 4.167vw, 60px);
  pointer-events: none;
}
.site-header .wrap { display: flex; justify-content: space-between; align-items: flex-start; }
.site-header a { pointer-events: auto; }
/* Glass rim token, declared on each glass element so its own --gs (scroll sheen, -1..1, set by tone.js) turns the light */
.pill, .logo, .thumb {
  --gs: 0;
  --glass-rim: linear-gradient(calc(135deg + var(--gs) * 50deg), rgba(165,205,255,.9) 0%, rgba(255,255,255,.45) 22%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.2) 72%, rgba(248,210,214,.75) 100%);
}

/* Logo: white AM mark on a small clear glass disc, same lens as the menu */
.logo {
  --d: clamp(44px, 4.167vw, 60px);
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -1px 1px rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 6px 14px -8px rgba(255,255,255,.25),
    0 8px 24px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: url(#glass-lens-round) blur(4px) saturate(150%);
}
.logo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.logo::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(14% 1.5px at calc(50% + var(--gs) * 28%) 1px, rgba(240,246,255,.95), transparent),
    radial-gradient(10% 2px at calc(22% + var(--gs) * 18%) 22%, rgba(225,238,255,.55), transparent),
    radial-gradient(12% 1.5px at calc(50% - var(--gs) * 28%) calc(100% - 1px), rgba(255,236,238,.6), transparent),
    linear-gradient(115deg, transparent calc(30% + var(--gs) * 40%), rgba(255,255,255,.09) calc(40% + var(--gs) * 40%), transparent calc(52% + var(--gs) * 40%));
}
.logo img { display: block; height: calc(var(--d) * .58); width: auto; max-width: none; }
.pill {
  display: flex; align-items: center; gap: 20px;
  height: clamp(44px, 4.167vw, 60px); padding: 0 clamp(20px, 2.22vw, 32px);
  position: relative; isolation: isolate;
  border-radius: 1000px;
  color: #fff;
  /* clear liquid glass: almost no tint, the background is bent at the edges like a lens */
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.04) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -1px 1px rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 6px 14px -8px rgba(255,255,255,.25),
    0 8px 24px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  /* lens refraction (Chromium); other browsers keep the plain blur above */
  backdrop-filter: url(#glass-distort) blur(4px) saturate(150%);
  font-size: var(--t-nav); letter-spacing: -0.02em; text-transform: uppercase;
}
/* thin polished rim, brightest top-left and bottom-right */
.pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* faint cool glints on the rim */
.pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(9% 1.5px at calc(50% + var(--gs) * 30%) 1px, rgba(240,246,255,.95), transparent),
    radial-gradient(3% 1.5px at calc(18% + var(--gs) * 12%) 2px, rgba(225,238,255,.8), transparent),
    radial-gradient(7% 1.5px at calc(56% - var(--gs) * 30%) calc(100% - 1px), rgba(255,236,238,.7), transparent),
    radial-gradient(14% 6px at calc(50% + var(--gs) * 30%) 1px, rgba(205,225,255,.22), transparent),
    linear-gradient(105deg, transparent calc(38% + var(--gs) * 45%), rgba(255,255,255,.07) calc(44% + var(--gs) * 45%), transparent calc(56% + var(--gs) * 45%));
}
.pill a { position: relative; transition: opacity .2s; }
.pill a:hover { opacity: .6; }

/* Phones: 16px side margins */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
}

/* Header tone: dark ink when the glass sits over something light (set by assets/tone.js) */
.pill, .logo img { transition: color .25s ease, filter .25s ease; }
.pill.on-light { color: #18191c; }
.pill.on-light { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.16) 100%); }
.logo.on-light img { filter: invert(1) brightness(.35); }
.logo.on-light { background: radial-gradient(70% 70% at 50% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06) 70%); }

/* Case pages: Back is a round glass button, same disc as the logo */
.pill.back {
  --d: clamp(44px, 4.167vw, 60px);
  width: var(--d); height: var(--d); padding: 0; gap: 0;
  justify-content: center; border-radius: 50%;
  backdrop-filter: url(#glass-lens-round) blur(4px) saturate(150%);
}
.pill.back a { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.pill.back a { font-size: clamp(11px, 0.97vw, 14px); letter-spacing: .01em; }