/* About Me page — three mobile variations on a design canvas.
   All three sit at 393px wide and reuse the design-system tokens.
   .am-* (about me) is the prefix for new classes on this page. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #efece5; font-family: var(--font-sans); color: var(--ink); }

/* ─── Standalone shell — centers the 393px phone on the page ──── */
.am-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}
.am-shell .am-phone {
  width: 100%;
  min-width: 360px;
  background: var(--paper);
  box-shadow: none;
}

/* ─── Artboard mobile frame ───────────────────────────────────── */
/* Each artboard mounts a .am-phone that fills the artboard. */
.am-phone {
  width: 100%;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  position: relative;
  font-family: var(--font-sans);
}

/* Header — same as portfolio's pk-header but scoped (no sticky inside artboard) */
.am-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; height: 64px;
}
.am-avatar { width: 40px; height: 40px; border-radius: 50%;
  background: url('../design-system/assets/avatar.jpg') center/cover, #1B1814; }
.am-menu-btn {
  width: 72px; height: 40px; border-radius: 80px;
  background: rgba(38,37,36,0.9); color: #FFF5E8;
  display: flex; align-items: center; justify-content: center;
  border: none;
}
.am-menu-btn svg { width: 18px; height: 18px; stroke: #FFF5E8; }

/* ─── Hero / intro ─────────────────────────────────────────────── */
.am-intro {
  padding: 80px 16px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.am-intro .pk-mono { color: var(--ink); }
.am-display {
  margin: 0;
  font-weight: 700;
  font-size: 56px; line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.am-display span { display: block; }
.am-lead {
  margin: 0;
  font-size: 16px; line-height: 1.6; letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* ─── Portrait ─────────────────────────────────────────────────── */
.am-portrait {
  width: 100%;
  aspect-ratio: 393/440;
  background-size: cover; background-position: center top;
  background-color: var(--cream-deep);
}
.am-portrait.tall   { aspect-ratio: 393/520; }
.am-portrait.square { aspect-ratio: 1/1; }
.am-portrait.strip  { aspect-ratio: 393/280; }

/* ─── Highlight strip (mono row, scrollable on mobile) ───────── */
.am-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: #fff;
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(27,24,20,0.06);
  border-bottom: 1px solid rgba(27,24,20,0.06);
}
.am-strip::-webkit-scrollbar { display: none; }
.am-strip > * { flex: 0 0 auto; }
.am-strip .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.am-strip .item {
  font-size: 14px; letter-spacing: 0.023em; color: var(--ink);
}

/* ─── Generic content section ─────────────────────────────────── */
.am-section {
  padding: 48px 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.am-section .pk-mono { color: var(--ink); }
.am-section h2 {
  margin: 0;
  font-size: 36px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.am-section p {
  margin: 0;
  font-size: 16px; line-height: 1.6; letter-spacing: 0.01em;
  max-width: 56ch; text-wrap: pretty;
}
.am-section p + p { margin-top: 12px; }

/* ─── Meta grid (Variation B) ─────────────────────────────────── */
.am-meta {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0 16px;
}
.am-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(27,24,20,0.10);
  gap: 16px;
}
.am-meta-row:last-child { border-bottom: none; }
.am-meta-row .lbl {
  font-size: 12px; letter-spacing: 0.033em; text-transform: uppercase;
  color: var(--ink-muted);
}
.am-meta-row .val {
  font-size: 16px; font-weight: 500; text-align: right;
}

/* ─── Now block — current role highlighted ───────────────────── */
.am-now {
  margin: 0 16px;
  padding: 24px;
  border-left: 2px solid var(--orange);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 8px;
}
.am-now .pk-mono { color: var(--orange-text); }
.am-now .role {
  font-size: 22px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25;
}
.am-now .place {
  font-size: 14px; color: var(--ink-muted); letter-spacing: 0.023em;
}

/* Variation B: Now as a dark card */
.am-now.dark {
  background: var(--ink);
  border-left: none;
  border-radius: 4px;
  color: var(--cream);
}
.am-now.dark .role { color: #fff; }
.am-now.dark .place { color: rgba(255,255,255,0.7); }

/* ─── Beyond design: icons + chips ────────────────────────────── */
.am-beyond-icons {
  display: flex; gap: 18px; align-items: center;
  padding: 8px 0;
}
.am-beyond-icons img { width: 28px; height: 28px; opacity: 0.95; }
.am-beyond-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.am-chip {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: 99px;
  background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; letter-spacing: 0.023em;
}

/* Variation C: stacked rows like the skills list */
.am-beyond-list { display: flex; flex-direction: column; gap: 0; }
.am-beyond-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
}
.am-beyond-row:first-child { border-top: 1px solid var(--ink); }
.am-beyond-row img { width: 24px; height: 24px; }
.am-beyond-row .name {
  font-size: 22px; font-weight: 400; letter-spacing: 0.01em;
}
.am-beyond-row .num {
  font-size: 12px; letter-spacing: 0.033em; color: var(--orange-text);
}

/* ─── Skills list (compact) ───────────────────────────────────── */
.am-skills { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.am-skill {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink);
}
.am-skill .name { font-size: 28px; line-height: 1.2; letter-spacing: 0.01em; }
.am-skill .num { font-size: 12px; letter-spacing: 0.033em; color: var(--orange-text); padding-top: 6px; }

/* Variation B compact skills: tertiary buttons (per design-system spec) */
.am-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.am-skill-chip {
  height: 48px; padding: 0 20px;
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  display: inline-flex; align-items: center;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 14px;
  line-height: 1.4; letter-spacing: 0.16px;
  cursor: pointer;
  transition: background 220ms var(--ease-out),
              color 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
.am-skill-chip:hover  { background: var(--cream-deep); }
.am-skill-chip:active { background: var(--gray-300); }

/* ─── Experience dark band ───────────────────────────────────── */
.am-experience {
  background: var(--ink); color: var(--cream);
  padding: 32px 16px;
  display: flex; flex-direction: column; gap: 24px;
}
.am-experience .pk-mono { color: var(--orange); }
.am-experience h2 { color: #fff; }
.am-xp-list { display: flex; flex-direction: column; gap: 16px; }
.am-xp {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--orange);
}
.am-xp-role { font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.am-xp-meta {
  display: flex; justify-content: space-between;
  font-size: 14px; color: rgba(255,255,255,0.8); letter-spacing: 0.023em;
}

/* Variation C: experience on paper, numbered, no dark band */
.am-experience.paper {
  background: transparent; color: var(--ink);
  padding: 48px 16px;
}
.am-experience.paper .pk-mono { color: var(--ink); }
.am-experience.paper h2 { color: var(--ink); }
.am-experience.paper .am-xp {
  border-bottom: 1px solid var(--ink);
}
.am-experience.paper .am-xp-role { color: var(--ink); }
.am-experience.paper .am-xp-meta { color: var(--ink-muted); }

/* ─── Manifesto + footer (reuses .pk-* from portfolio.css) ───── */

/* Variation C: massive type variant */
.am-display.huge {
  font-size: 84px; line-height: 0.92; letter-spacing: -0.04em;
}

/* Variation B specific: square portrait inset */
.am-portrait.inset {
  margin: 16px 16px 0;
  width: calc(100% - 32px);
  border-radius: 4px;
  aspect-ratio: 1/1;
}

/* Variation C — orange rule between sections */
.am-rule-orange {
  height: 1px; width: calc(100% - 32px);
  background: var(--orange);
  margin: 0 16px;
}

/* Section eyebrow with right-aligned counter */
.am-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.am-section-head .pk-mono { color: var(--ink); }
.am-section-head .counter { color: var(--ink-muted); }

/* ─── Desktop override ────────────────────────────────────────── */
@media (min-width: 900px) {
  .am-shell { padding: 0; display: block; }
  .am-shell .am-phone {
    width: 100%;
    max-width: none;
    box-shadow: none;
    --am-grid-max: 1248px;
    --am-grid-gutter: 48px;
  }
  .am-header, .am-intro, .am-section, .am-meta, .am-now, .am-beyond-list, .am-skills {
    max-width: var(--am-grid-max);
    margin: 0 auto;
    padding-left: var(--am-grid-gutter);
    padding-right: var(--am-grid-gutter);
  }
  .am-strip {
    width: 100%;
    max-width: none;
    padding-left: calc((100% - min(100%, var(--am-grid-max))) / 2 + var(--am-grid-gutter));
    padding-right: calc((100% - min(100%, var(--am-grid-max))) / 2 + var(--am-grid-gutter));
  }
  .am-experience {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 80px calc((100% - min(100%, var(--am-grid-max))) / 2 + var(--am-grid-gutter));
  }
  .am-experience.paper {
    padding: 80px calc((100% - min(100%, var(--am-grid-max))) / 2 + var(--am-grid-gutter));
  }
  .am-portrait {
    width: 100%;
    max-width: var(--am-grid-max);
    margin: 0 auto;
    border-radius: var(--r-sm);
  }
  .am-portrait.inset {
    width: calc(100% - (var(--am-grid-gutter) * 2));
    max-width: calc(var(--am-grid-max) - (var(--am-grid-gutter) * 2));
    margin: 32px auto 0;
  }
  .am-rule-orange {
    width: calc(100% - (var(--am-grid-gutter) * 2));
    max-width: calc(var(--am-grid-max) - (var(--am-grid-gutter) * 2));
    margin: 0 auto;
  }
  .am-meta { margin: 0 auto; }
  .am-now { margin: 0 auto; }
  .am-display { font-size: 96px; }
  .am-display.huge { font-size: 144px; }
  .am-section h2 { font-size: 48px; }
  .am-skill .name { font-size: 40px; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .am-intro, .am-section, .am-meta, .am-skills, .am-experience.paper {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .am-now, .am-beyond-list, .am-portrait.inset {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .am-portrait.inset, .am-rule-orange {
    width: calc(100% - 48px) !important;
  }
}

/* --- Tablet & Desktop 2-Column Grid for Intro/Portrait/Lead/Meta --- */
.am-fade-grid {
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .am-fade-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
      "intro intro intro intro intro intro intro intro intro intro intro intro"
      "text text text text text text photo photo photo photo photo photo"
      "meta meta meta meta meta meta photo photo photo photo photo photo";
    gap: 32px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .am-fade-grid > .am-intro,
  .am-fade-grid > .am-lead-section,
  .am-fade-grid > .am-meta {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
  
  .am-fade-grid .am-portrait.inset {
    grid-area: photo;
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px 0 0 0 !important;
  }
  
  .am-fade-grid .am-intro { grid-area: intro; }
  .am-fade-grid .am-lead-section { grid-area: text; padding-right: 24px !important; }
  .am-fade-grid .am-meta { grid-area: meta; padding-right: 24px !important; }
}

@media (min-width: 900px) {
  .am-fade-grid {
    padding-left: var(--am-grid-gutter);
    padding-right: var(--am-grid-gutter);
    max-width: var(--am-grid-max);
    margin: 0 auto;
    gap: 48px;
  }
}