/* look 1, Airmail: lavender-grey paper, coral ink, crisp sans display, mono metadata.
   Loaded on top of style.css via ?look=1. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #E3E1EA;
  --surface: #EDECF2;
  --fg: #1B1A26;
  --fg-secondary: #4D4B5E;
  --fg-tertiary: #7A778C;
  --accent: #D2502C;
  --blue: #2E3D96;
  --live: #2F9A5C;
  --border: #CAC7D6;
  --row-hover: #F2F1F6;
  --featured-bg: var(--surface);
  --stamp-paper: #F5F3EF;
  --uw-logo-bg: transparent;
  --pixel-border: rgba(27, 26, 38, 0.08);
  --modal-shadow: rgba(27, 26, 38, 0.2);
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

::selection { background: var(--accent); color: #fff; }

body { border-top: 0; font-size: 14.5px; }
/* airmail edge */
body::before {
  content: '';
  height: 5px;
  flex: none;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, transparent 10px 15px, var(--blue) 15px 25px, transparent 25px 30px);
}

/* ---------- header ---------- */
.identity-bar { padding: 16px 28px; background: transparent; }
.identity-left { gap: 16px; }
.identity-photo { width: 64px; height: 64px; border-radius: 14px; border: 0; box-shadow: 0 0 0 1px var(--border); }
.identity-name { font: 700 30px/1 var(--display); letter-spacing: -0.025em; text-transform: none; }
.identity-meta { gap: 8px; }
.data-label { font-size: 10.5px; color: var(--fg-tertiary); letter-spacing: 0.1em; }
.data-value { font-size: 13px; margin-right: 14px; }
.identity-links { gap: 18px; }
.identity-links a { font-size: 11.5px; letter-spacing: 0.08em; color: var(--fg-secondary); }
.identity-links .resume-link { background: var(--fg); color: var(--bg); border: 0; border-radius: 7px; padding: 7px 12px; }
.identity-links .resume-link:hover { background: var(--accent); color: #fff; }
.identity-links .resume-link::after { display: none; }

/* ---------- grid ---------- */
.content-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); padding: 0 28px; }
.content-left { padding: 18px 28px 20px 0; gap: 16px; justify-content: flex-start; }
.content-right { padding: 18px 0 20px 28px; }

/* ---------- section labels: coral number, hairline ---------- */
.section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; color: var(--fg-secondary);
  border: 0; padding: 0; margin-bottom: 10px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.section-label[data-num]::before { content: attr(data-num); color: var(--accent); font-weight: 700; }

.intro-body { font-size: 15.5px; line-height: 1.55; }

/* ---------- now playing: one compact strip ---------- */
.now-playing { flex-direction: row; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.now-playing .section-label { position: static; background: none; padding: 0; margin: 0; font-size: 10.5px; letter-spacing: 0.12em; flex: none; }
.now-playing .section-label::after { display: none; }
.track-info { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
.track-info a { font: 600 14px/1.3 var(--sans); }
#lastfm-artist-name { font-size: 12px; color: var(--fg-tertiary); }

/* live dots */
.np-status, .live-readout::before {
  width: 7px; height: 7px; background: var(--live); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(47, 154, 92, 0.5);
  animation: live-ring 2s ease-out infinite;
  margin-right: 6px;
}
@keyframes live-ring { 0% { box-shadow: 0 0 0 0 rgba(47, 154, 92, 0.45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(47, 154, 92, 0); } }

/* ---------- education + tools ---------- */
.edu-logo-wrap { width: 44px; }
.edu-logo { max-height: 48px; }
.edu-row .data-value { font: 600 15px/1.3 var(--display); letter-spacing: -0.005em; }
.edu-row .data-secondary { font-size: 12.5px; }
.edu-row .edu-date { font-family: var(--mono); font-size: 11.5px; }

.tool-row { padding: 6px 0; border-bottom-color: var(--border); }
.tool-label { font-size: 10.5px; color: var(--fg-tertiary); flex-basis: 64px; }
.tool-value { font-size: 14px; }
.tool-item { border-bottom: 0; }

/* ---------- experience ---------- */
.exp-entry { padding: 10px 0; }
.exp-badge { gap: 12px; margin-bottom: 4px; }
.exp-logo { width: 30px; height: 30px; border-radius: 7px; }
.exp-role { font: 600 15px/1.3 var(--display); letter-spacing: -0.005em; }
.exp-date { font-size: 11.5px; color: var(--fg-tertiary); }
.exp-org { font-size: 12.5px; margin-bottom: 0; }
.exp-org a { color: var(--fg-secondary); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.exp-org a:hover { color: var(--accent); }
.exp-desc { font-size: 14px; line-height: 1.5; }
.data-chips { margin-top: 7px; }
.data-chip { font-size: 10.5px; border: 0; background: rgba(27, 26, 38, 0.06); border-radius: 5px; padding: 2px 7px; color: var(--fg-secondary); }

/* ---------- projects: paper cards ---------- */
.project-list { gap: 10px; }
.project-entry, .project-entry.alt, .project-entry.featured {
  margin: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.project-entry:first-child { padding-top: 14px; }
.project-entry:last-child { border-bottom: 1px solid var(--border); }
.project-entry.featured { box-shadow: inset 3px 0 0 var(--accent); padding-left: 18px; }
.project-entry:hover, .project-entry.alt:hover, .project-entry.featured:hover { background: var(--row-hover); border-color: #B9B5C9; transform: translateY(-1px); }
.project-head { align-items: center; margin-bottom: 5px; }
.project-name { font: 700 19px/1.2 var(--display); letter-spacing: -0.02em; text-transform: none; }
.tag { font-size: 10.5px; border: 0; background: var(--bg); border-radius: 5px; padding: 2px 7px; color: var(--fg-secondary); }
.project-ext { font-size: 11px; letter-spacing: 0.06em; border-radius: 7px; padding: 4px 9px; border-color: var(--border); background: var(--bg); }
.project-ext:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.project-desc { font-size: 14px; line-height: 1.5; }
.project-stats { gap: 16px; margin-top: 8px; }
.stat { font-size: 11.5px; color: var(--fg-tertiary); }
.stat-val { font: 700 15px/1 var(--display); color: var(--fg); letter-spacing: -0.01em; margin-right: 2px; }
.live-readout { color: var(--live); font-size: 11.5px; }

/* dev.sanyamgarg.com teaser */
.dev-teaser {
  margin-top: 0; padding: 12px 16px; border: 0; border-radius: 12px;
  background: var(--fg); color: var(--bg); font-size: 11.5px; letter-spacing: 0.08em;
}
.dev-teaser:hover { color: #fff; background: #26253A; }
.dev-icons img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 2px var(--fg); margin-right: 6px; }
.dev-text { margin-left: 10px; }
.dev-arrow { color: var(--accent); }

/* ---------- guestbook ---------- */
.guestbook-section { margin-top: 18px; }
.gb-gallery { gap: 8px; }
.gb-stamp-grid { border-radius: 5px; overflow: hidden; border-color: var(--border); }
.gb-stamp-name { font-size: 9px; font-weight: 500; color: var(--fg-secondary); }
.gb-grid { border-radius: 8px; overflow: hidden; border-color: var(--border); }
.gb-swatch { border-radius: 5px; }
.gb-editor { gap: 16px; }
.gb-editor-label { font-size: 10.5px; color: var(--fg-tertiary); }
.gb-input { border-radius: 7px; background: var(--surface); padding: 7px 9px; width: 150px; }
.gb-input::placeholder { color: var(--fg-tertiary); }
.gb-btn-clear { border-radius: 7px; }
.gb-submit { border-radius: 7px; background: var(--fg) !important; color: var(--bg) !important; border-color: var(--fg) !important; }
.gb-submit:hover { background: var(--accent) !important; border-color: var(--accent) !important; }

/* ---------- status bar ---------- */
.status-bar { background: transparent; padding: 9px 28px; font-size: 11px; }
.status-bar span { opacity: 0.8; }
.status-shortcuts kbd { border-radius: 4px; border-bottom-width: 2px; background: var(--surface); padding: 0 5px; }

@media (max-width: 900px) {
  .identity-bar, .status-bar { padding-left: 18px; padding-right: 18px; }
  .identity-bar { gap: 14px; }
  .content-grid { grid-template-columns: minmax(0, 1fr); padding: 0 18px; }
  .content-left { padding: 16px 0; gap: 14px; }
  .content-right { padding: 16px 0; }
  .identity-name { font-size: 26px; }
  .identity-links { gap: 6px 16px; }
  .identity-links a { padding: 3px 0; }
  .identity-links .resume-link { padding: 5px 10px; }
  .link-sep { display: none; }
  .exp-logo { width: 26px; height: 26px; }
  .project-head .project-ext:first-of-type { margin-left: 0; }
  .gb-editor { flex-direction: row; }
  .gb-grid { width: 110px; height: 110px; }
  .gb-editor-right { flex: 1; }
  .gb-gallery { max-height: 128px; }
  .dev-teaser { padding: 11px 12px; font-size: 10px; letter-spacing: 0.04em; }
  .dev-icons img { width: 26px; height: 26px; border-radius: 7px; }
  .dev-text { margin-left: 8px; }
}
@media (max-width: 480px) {
  .identity-photo { width: 56px; height: 56px; }
  .identity-name { font-size: 24px; }
  .identity-data { flex-direction: row; gap: 2px 5px; }
  .data-label { font-size: 9.5px; letter-spacing: 0.04em; }
  .data-value { font-size: 11.5px; margin-right: 5px; }
  .gb-input { width: 100%; }
}