/* Shared style for every *.mihran.com site.
   Served from https://mihran.com/_shared/site.css — deploy family/ to update.
   Look: dark "liquid glass": a blurred, tinted sky photo behind frosted panels with a soft gloss.
   One style only: there is no light mode. */

/* Fallback font for non-Windows (Segoe UI is used where installed). */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg-base: #17112a;
  /* Background photo: pastel pink-and-blue sunset sky, from Unsplash (Unsplash License)
     https://images.unsplash.com/photo-1514477917009-389c76a86b68 */
  --sky-photo: url("sky.webp");
  /* Light enough that cloud shapes survive, so the glass panels have something to frost */
  --sky-blur: 12px;
  /* Dusky slate tint over the photo: it mutes the sunset pinks into a cool lavender-gray,
     a little lighter at the top like light through glass */
  --sky-wash:
    radial-gradient(1200px 700px at 50% -10%, rgba(232, 240, 255, .12), transparent 70%),
    linear-gradient(180deg, rgba(31, 32, 54, .60) 0%, rgba(14, 16, 29, .80) 100%);
  --fg: #f6f0fa;
  --muted: #cbbfd8;
  --text-glow: 0 1px 14px rgba(0, 0, 0, .35);
  /* Sunset gradient: pale peach → blush → pale lilac (title, bar text, small labels).
     Kept close to white so the pink is only a hint. */
  --eyebrow-fill: linear-gradient(90deg, #ffe2cf 0%, #ffdae6 50%, #dfd4ff 100%);
  --eyebrow-glow: drop-shadow(0 0 10px rgba(255, 226, 238, .24));
  --line: rgba(255, 255, 255, .12);
  --accent: #ffe0ec;
  --accent-2: #dfd4ff;
  --accent-soft: rgba(255, 224, 236, .11);
  --accent-glow: rgba(255, 224, 236, .20);

  /* Glass recipe */
  --glass: rgba(255, 255, 255, .08);
  --glass-hover: rgba(255, 255, 255, .13);
  --glass-strong: rgba(26, 18, 44, .84);   /* popup menu */
  --glass-tint: rgba(26, 18, 44, .38);      /* top bar and page cards */
  --blur-tint: blur(20px) saturate(120%);
  --glass-solid: #241a3a;
  --glass-edge: rgba(255, 255, 255, .20);
  --glass-shine: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, 0) 100%);
  /* Brighter top edge and a deeper shadow so panels lift off the background */
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 18px 40px -12px rgba(8, 4, 20, .60);
  --blur: blur(18px) saturate(170%);

  --page-w: 800px;   /* column width for the top bar, content, and footer */
  --pad: 40px;       /* side padding inside that column */
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Source Sans 3", -apple-system, system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Source Sans 3", -apple-system, system-ui, sans-serif;
}
/* No blur support, or the user asked for less transparency: use solid panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--glass-solid); --glass-hover: var(--glass-solid); --glass-strong: var(--glass-solid); --glass-tint: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-solid); --glass-hover: var(--glass-solid); --glass-strong: var(--glass-solid); --glass-tint: var(--glass-solid); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-base); }
body {
  color: var(--fg);
  font: 400 17px/1.6 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* The background is two fixed layers (fixed so they don't scroll, and work on iOS):
   ::before is the photo, blurred; ::after is the navy tint on top of it. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  background: var(--sky-photo) center / cover no-repeat;
  filter: blur(var(--sky-blur)) saturate(55%);  /* muted so the sky reads cool, not pink */
  transform: scale(1.12);  /* hides the soft, see-through edges the blur creates */
}
body::after { background: var(--sky-wash); }
a { color: inherit; }
::selection { background: var(--accent-glow); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Shared glass surface */
.sidebar::before,
.sidebar nav,
.card,
.pills a,
.sidebar .menu-toggle {
  background-color: var(--glass);
  background-image: var(--glass-shine);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
}

/* ---------- Top bar + burger menu ----------
   Pages still mark it up as <aside class="sidebar" id="site-nav">; nav.js adds the
   burger button and the popup menu. It's a floating glass pill that stays at the top. */
.sidebar {
  position: sticky;
  top: 12px;
  z-index: 20;
  width: calc(100% - 24px);
  max-width: var(--page-w);
  margin: 12px auto 0;
  min-height: 56px;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The bar's glass is drawn on a pseudo-element: if the bar itself had a backdrop-filter,
   the popup inside it couldn't blur the page behind it. */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Darker than the other glass, with less color boost, so the bar doesn't glow bright blue */
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--blur-tint);
          backdrop-filter: var(--blur-tint);
}
/* "mihran.com" in the bar, in the same blue-to-aqua gradient as .eyebrow */
.sidebar .brand {
  font: 700 20px/1.2 var(--font-display);
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--accent);
  background: var(--eyebrow-fill);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Burger button: three lines that turn into an X when open */
.sidebar .menu-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--fg);
  border-radius: 999px;
  margin-left: auto;  /* stays on the right even on pages with no brand text (the home page) */
  cursor: pointer;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: background-color .15s, color .15s;
}
.sidebar .menu-toggle:hover { background-color: var(--glass-hover); color: var(--accent); }
.burger { position: relative; display: block; width: 18px; height: 12px; }
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; }
.burger span:nth-child(3) { top: 10px; }
.sidebar.open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sidebar.open .burger span:nth-child(2) { opacity: 0; }
.sidebar.open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Popup menu */
.sidebar nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 20px;
  background-color: var(--glass-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.sidebar.open nav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
.sidebar ul { list-style: none; }
.nav > li + li { margin-top: 2px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.nav > li > a { font-weight: 600; font-size: 15px; }
.nav a:hover { background: var(--accent-soft); color: var(--accent); }
/* Current page: a soft blue "selected" highlight with a glossy top edge */
.nav a[aria-current="page"] {
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-glow), var(--accent-soft));
  border-color: var(--accent-glow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.nav .sub {
  margin: 2px 0 8px 12px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.nav .sub a { font-size: 14px; color: var(--muted); padding: 5px 10px; }
.nav .sub a:hover { color: var(--accent); }
.nav .ext { font-size: 12px; opacity: .6; margin-left: auto; }

/* ---------- Content ---------- */
.content { flex: 1; display: flex; flex-direction: column; }
/* Content is centered vertically between the bar and the footer (a bit above true center) */
main {
  flex: 1;
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 48px var(--pad) 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.eyebrow {
  display: inline-block;
  font: 600 14px var(--font-body);
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--eyebrow-fill);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--eyebrow-glow);
}
main > h1, main > h2, .lede, footer { text-shadow: var(--text-glow); }
h1 {
  font: 600 clamp(38px, 6.5vw, 58px)/1.08 var(--font-display);
  letter-spacing: -.025em;
  margin: 8px 0 16px;
}
/* Sunset gradient text, like .eyebrow (used for the big home page title) */
.gradient-text {
  width: fit-content;
  color: var(--accent);
  background: var(--eyebrow-fill);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Bigger, with a soft blush glow so it pops off the sky.
   (text-shadow would paint over the gradient, so this uses drop-shadow filters.) */
main > h1.gradient-text {
  font-size: clamp(48px, 10vw, 88px);
  text-shadow: none;
  filter: drop-shadow(0 0 24px rgba(255, 215, 232, .32)) drop-shadow(0 2px 10px rgba(10, 4, 24, .35));
}
h2 {
  font: 600 24px/1.25 var(--font-display);
  letter-spacing: -.01em;
  margin: 48px 0 14px;
}
.lede { color: var(--muted); font-size: 19px; max-width: 34em; }
main p + p { margin-top: 1em; }

/* Cards: big clickable glass tiles */
.cards {
  align-self: stretch;  /* full column width */
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* cards stretch to fill the row; stack on phones */
  gap: 16px;
}
.card {
  display: block;
  padding: 20px 22px;
  border-radius: 20px;
  text-decoration: none;
  background-color: var(--glass-tint);  /* same navy glass as the top bar */
  -webkit-backdrop-filter: var(--blur-tint);
          backdrop-filter: var(--blur-tint);
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
a.card:hover {
  background-color: var(--glass-hover);
  box-shadow: var(--glass-shadow), 0 12px 34px -10px var(--accent-glow), 0 0 0 1px var(--accent-glow);
  transform: translateY(-1px);
}
.card strong { display: block; font: 600 20px/1.3 var(--font-display); }
.card span { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.card em { display: block; font-style: normal; color: var(--accent); font-weight: 600; font-size: 14px; margin-top: 10px; }

/* Avatar: a glossy Aero-style orb with an initial, placed left of the card text.
   Placeholder until there are real photos. Set --orb on a card to change its colors. */
.card:has(.avatar) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: center;
}
.card .avatar {
  grid-row: 1 / span 3;
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  font: 700 26px/1 var(--font-display);
  color: #fff;
  text-shadow: 0 1px 3px rgba(70, 30, 80, .55);
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 255, 255, .45), transparent 55%),  /* glow from below */
    var(--orb, linear-gradient(160deg, #ffd8bd, #ffc1d3 55%, #c9b1ff));
  box-shadow:
    inset 0 -6px 12px rgba(70, 20, 110, .35),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 8px 18px -6px rgba(255, 205, 225, .40);
}
/* The glossy highlight across the top half of the orb */
.card .avatar::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 5%;
  height: 46%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .06));
}
.cards .card:nth-child(even) .avatar { --orb: linear-gradient(160deg, #c3b2ff, #8fa2ff 55%, #6fc3ff); }

/* Pills: row of small glossy glass buttons */
.pills { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.pills a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.pills a:hover {
  color: var(--accent);
  background-color: var(--glass-hover);
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--accent-glow), 0 6px 18px -6px var(--accent-glow);
}

/* Brand icons: added automatically to LinkedIn / GitHub links in pills and the menu.
   Drawn with mask-image so they take the link's current color (incl. hover). */
.pills a[href*="linkedin.com"]::before,
.pills a[href*="github.com"]::before,
.nav a[href*="linkedin.com"]::before,
.nav a[href*="github.com"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.nav a[href*="linkedin.com"]::before,
.nav a[href*="github.com"]::before { width: 14px; height: 14px; }
a[href*="linkedin.com"] {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>");
}
a[href*="github.com"] {
  --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/></svg>");
}

footer {
  width: calc(100% - 2 * var(--pad));
  max-width: calc(var(--page-w) - 2 * var(--pad));
  margin: 0 auto;
  padding: 28px 0;
  color: var(--fg);  /* full-strength text: the footer sits right on the photo */
  font-size: 13px;
  border-top: 1px solid var(--line);
}
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  a.card:hover { transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  :root { --pad: 20px; }
  .sidebar { top: 10px; width: calc(100% - 20px); margin-top: 10px; padding-left: 20px; }
  .sidebar nav { left: 0; min-width: 0; }  /* popup spans the bar's width */
  main { padding-top: 56px; padding-bottom: 48px; }
  footer { padding: 24px 0; }
}