/* ============================================
   Career Portfolio — Paged A4 Document
   Screen and PDF share the same layout (WYSIWYG).
   Each .sheet is one A4 page (794 × 1123 px = 210 × 297 mm @ 96 DPI).
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* --- Light theme (matches PDF) --- */
:root {
  --color-primary: #142848;
  --color-primary-soft: #1f3a64;
  --color-accent: #0ea5e9;
  --color-accent-dark: #0369a1;
  --color-accent-soft: rgba(14, 165, 233, 0.10);
  --color-accent-light: rgba(14, 165, 233, 0.16);

  --color-page-bg: #e8edf4;        /* grey workspace bg around sheets */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-bg-soft: #f1f5f9;
  --color-bg-nav: rgba(255, 255, 255, 0.92);
  --color-bg-code: #f1f5f9;
  --color-bg-hero: linear-gradient(135deg, #142848 0%, #1f3a64 100%);

  --color-text-primary: #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary: #6b7280;
  --color-text-inverse: #ffffff;

  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;

  --color-tag-bg: #f1f5f9;
  --color-tag-text: #142848;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;

  --shadow-sheet: 0 4px 16px rgba(20, 40, 72, 0.10), 0 1px 4px rgba(20, 40, 72, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 40, 72, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 40, 72, 0.10);

  --font-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --nav-height: 56px;
  /* Sheet dimensions in px (96 DPI = 1in) for pixel-perfect screen/print parity.
     794×1123 px = 210×297 mm A4 at 96 DPI. */
  --sheet-w: 794px;
  --sheet-h: 1123px;
  --sheet-pad-x: 68px;   /* 18mm */
  --sheet-pad-y: 60px;   /* 16mm */
  --sheet-gap: 24px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --transition-base: 250ms ease;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 13.3px;
  line-height: 1.55;
  transition: background-color var(--transition-base);
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--color-accent); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }

::selection { background: var(--color-accent-light); color: var(--color-accent-dark); }

/* ============================================================
   NAVIGATION (screen only)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--color-bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: background-color var(--transition-base);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.nav__logo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav__logo:hover { color: var(--color-accent-dark); }
.nav__logo span { color: var(--color-accent); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 150ms ease;
}
.nav__link:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.nav__link--active {
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
}
.nav__link--active:hover { color: var(--color-accent); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 150ms ease;
}
.pdf-btn:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.pdf-btn i { color: #dc2626; font-size: 1rem; }

.nav__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  gap: 5px;
}
.nav__menu-toggle:hover { background: var(--color-bg-tertiary); }
.nav__menu-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: transform 250ms ease, opacity 250ms ease;
}
.nav__menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__menu-toggle.active span:nth-child(2) { opacity: 0; }
.nav__menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .pdf-btn__label { display: none; }
  .pdf-btn { padding: 0 10px; }
}

/* ============================================================
   DOCUMENT — workspace that holds A4 sheets
   ============================================================ */
main, .main-content { flex: 1; }

.document {
  padding: calc(var(--nav-height) + var(--sheet-gap)) var(--sheet-gap) var(--sheet-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sheet-gap);
}

/* ============================================================
   SHEET — single A4 page
   ============================================================ */
.sheet {
  width: var(--sheet-w);
  min-height: var(--sheet-h);
  height: var(--sheet-h);
  background: #ffffff;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sheet);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 13.3px;
}

.sheet__body {
  padding: var(--sheet-pad-y) var(--sheet-pad-x);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sheet--with-hero .sheet__body { padding: 38px var(--sheet-pad-x) var(--sheet-pad-y); }

/* ============================================================
   COVER (cover sheet for portfolio/career/cover-letter)
   ============================================================ */
.sheet--cover {
  background: var(--color-bg-hero);
  color: #ffffff;
  padding: 0;
}
.sheet--cover .cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 83px;
  position: relative;
  width: 100%;
  height: 100%;
}
.cover__eyebrow {
  font-size: 18.7px;
  font-weight: 700;
  letter-spacing: 0.36em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 18.7px;
}
.cover__title {
  font-size: 85.3px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
}
.cover__rule {
  display: block;
  width: 227px;
  height: 4px;
  background: var(--color-accent);
  margin: 68px 0 30px;
}
.cover__byline {
  font-size: 14.7px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.06em;
  margin: 0;
}

/* ============================================================
   PORTFOLIO SUMMARY (first page index of all projects)
   ============================================================ */
.sheet--summary {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.summary__header {
  background: var(--color-bg-hero);
  color: #ffffff;
  padding: 60px 68px 40px;
  border-bottom: 4px solid var(--color-accent);
  flex-shrink: 0;
}
.summary__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.36em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.summary__title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 6px;
}
.summary__byline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.06em;
  margin: 0;
}
.summary__list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 24px 60px 30px;
  display: flex;
  flex-direction: column;
}
.summary__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.summary__item:last-child { border-bottom: none; }
.summary__num {
  font-size: 26px;
  font-weight: 900;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  align-self: center;
  text-align: right;
  font-feature-settings: 'tnum';
}
.summary__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.summary__name {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.summary__period {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-accent-dark);
  white-space: nowrap;
  flex-shrink: 0;
  font-feature-settings: 'tnum';
}
.summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 9.5px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.summary__company {
  color: var(--color-accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
}
.summary__type::before,
.summary__role::before {
  content: '· ';
  color: var(--color-text-tertiary);
}
.summary__desc {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 2px 0 0;
}

/* Inline summary list (used inside sheet__body, e.g. cover-letter index) */
.summary__list--inline { padding: 0; flex: none; }
.summary__list--inline .summary__item { padding: 9px 0; }

/* Career summary narrative (career index) */
.career-summary {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.career-summary p { margin: 0 0 8px; }
.career-summary p:last-child { margin-bottom: 0; }

/* ============================================================
   HERO (resume page header banner inside first sheet)
   ============================================================ */
.hero {
  background: var(--color-bg-hero);
  color: #ffffff;
  padding: 53px 68px 45px;
  position: relative;
  flex-shrink: 0;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--color-accent);
}
.hero__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 45px;
}
.hero__content { flex: 1; min-width: 0; }
.hero__image-wrapper { flex-shrink: 0; }
.hero__image {
  width: 121px;
  height: 121px;
  border-radius: 50%;
  object-fit: cover;
  border: 3.3px solid var(--color-accent);
  background: #ffffff;
}
.hero__greeting {
  font-size: 13.3px;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 5.3px;
}
.hero__name {
  font-size: 34.7px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 5.3px;
}
.hero__title {
  font-size: 14.7px;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10.7px;
}
.hero__title::before {
  content: '';
  width: 21.3px; height: 2px;
  background: var(--color-accent);
}
.hero__description {
  font-size: 13.3px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  margin: 0;
  max-width: 100%;
}
/* ============================================================
   RESUME PROFILE SUMMARY
   ============================================================ */
.sheet--profile {
  background: #ffffff;
}
.profile-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  padding: 50px var(--sheet-pad-x) 42px;
  background: var(--color-bg-hero);
  color: #ffffff;
  border-bottom: 4px solid var(--color-accent);
}
.profile-header__identity {
  min-width: 0;
  align-self: center;
}
.profile-header__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.profile-header__name {
  font-size: 38px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
}
.profile-header__name span {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 8px;
}
.profile-header__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent);
  margin: 7px 0 12px;
}
.profile-header__tagline {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 520px;
  margin: 0;
}
.profile-header__side {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}
.profile-header__contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.profile-contact {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 10.8px;
  line-height: 1.35;
}
.profile-contact span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.profile-contact a,
.profile-contact strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}
.profile-contact a:hover { color: #ffffff; }
.sheet__body--profile {
  padding-top: 30px;
  gap: 24px;
}
.about-section__content {
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 28px;
  align-items: start;
  font-size: 12.6px;
  line-height: 1.65;
  color: var(--color-text-primary);
}
.about-section__image-wrap {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.about-section__image {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}
.about-section__text p {
  margin: 0 0 8px;
}
.about-section__text p:last-child { margin-bottom: 0; }
.experience-entry {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 28px;
  align-items: start;
}
.experience-entry__meta h3 {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0 0 4px;
}
.experience-entry__meta p {
  font-size: 11px;
  font-style: italic;
  color: var(--color-text-tertiary);
  margin: 0 0 6px;
}
.experience-entry__link {
  display: block;
  font-size: 10.8px;
  line-height: 1.35;
  font-style: italic;
  color: var(--color-text-secondary);
  text-decoration: none;
  word-break: break-all;
  margin: 0 0 5px;
}
.experience-entry__link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.experience-entry__meta strong {
  display: block;
  font-size: 12px;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.experience-entry__meta span {
  display: block;
  font-size: 11.2px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.experience-entry__summary {
  font-size: 12.3px;
  font-style: italic;
  text-align: center;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.experience-entry .styled-list {
  margin: 0;
}
.experience-entry .styled-list li {
  font-size: 11.7px;
  line-height: 1.43;
  margin-bottom: 2px;
}

/* ============================================================
   SECTION TITLE — bar + uppercase + underline
   ============================================================ */
.resume-section { display: flex; flex-direction: column; }
.resume-section + .resume-section { margin-top: 15px; }
.sheet__body--profile .resume-section--profile-training { margin-top: 4px; }

.resume-section__title,
.about-section__title,
.experience-section__title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  padding: 0 0 5.3px 16px;
  margin: 0 0 8px;
  border-bottom: 1.6px solid var(--color-primary);
}
.resume-section__title::before,
.about-section__title::before,
.experience-section__title::before {
  content: '';
  position: absolute;
  left: 0; top: 1.3px;
  width: 5.3px; height: 17.3px;
  background: var(--color-accent);
  border-radius: 1.3px;
}

/* ============================================================
   INFO GRID
   ============================================================ */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 21.3px;
  row-gap: 0;
}
.info-item {
  display: flex;
  align-items: baseline;
  gap: 10.7px;
  padding: 5.3px 0;
  border-bottom: 0.7px dotted var(--color-border);
}
.info-item__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 74.7px;
  flex-shrink: 0;
}
.info-item__value {
  font-size: 12.7px;
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-all;
  text-decoration: none;
}
a.info-item__value { color: var(--color-text-primary); }
a.info-item__value:hover { color: var(--color-accent-dark); }

/* ============================================================
   CARDS — soft bg + cyan left border
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10.7px;
}
.card-grid--quad { grid-template-columns: 1fr 1fr; }
.card-grid--robots { grid-template-columns: 1fr 1fr; gap: 10.7px; }

.card {
  background: var(--color-bg-soft);
  border: none;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10.7px 14.7px;
}
.card__icon {
  display: inline-block;
  font-size: 14.7px;
  color: var(--color-accent);
  margin-bottom: 2.7px;
  background: none;
}
.card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 2.7px;
}
.card__description {
  font-size: 11.3px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Robot cards (in resume equipment sheet) */
.card--robot { padding: 10.7px; }
.card--robot__image {
  background: #ffffff;
  border: 0.7px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card--robot__image img {
  max-height: 120px;
  width: 100%;
  object-fit: contain;
}
.card--robot__manufacturer {
  font-size: 10.7px;
  color: var(--color-accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 2.7px 0 5.3px;
}
.card--robot__usage {
  font-size: 11.3px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}
.card--robot__usage strong { color: var(--color-primary); font-weight: 700; }

/* ============================================================
   STYLED LIST
   ============================================================ */
.styled-list {
  display: flex;
  flex-direction: column;
  gap: 2.7px;
  list-style: none;
}
.styled-list li {
  position: relative;
  padding-left: 14.7px;
  font-size: 12.7px;
  color: var(--color-text-primary);
  line-height: 1.5;
}
.styled-list li::before {
  content: '';
  position: absolute;
  left: 2.7px; top: 6.7px;
  width: 4px; height: 4px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

.muted { font-size: 12px; color: var(--color-text-tertiary); }

/* ============================================================
   CAREER COMPANY — compact (resume) and full (career page)
   ============================================================ */
.career-company--compact {
  background: transparent;
  padding: 5.3px 0;
  border-bottom: 0.7px solid var(--color-border);
}
.career-company--compact:last-of-type { border-bottom: none; }
.career-company--compact .career-company__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0;
  background: transparent;
  cursor: default;
  gap: 13.3px;
}
.career-company--compact .career-company__name {
  font-size: 14.7px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.career-company--compact .career-company__meta {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.career-company--compact .career-company__header .tag {
  font-size: 10.7px;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-soft);
  border: 0.7px solid rgba(14, 165, 233, 0.3);
  padding: 2.7px 10.7px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.career-company--compact .career-company__body { padding: 5.3px 0 0; }

/* Career page (full detail in dedicated sheet) */
.sheet--career { padding: 0; }
.sheet--career > .career-company {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.sheet--career .career-company__header {
  background: var(--color-bg-hero);
  color: #ffffff;
  padding: 44px 68px 30px;
  border-bottom: 4px solid var(--color-accent);
  flex-shrink: 0;
}
.career-company__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sheet--career .career-company__name {
  color: #ffffff;
  font-size: 29.3px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 5.3px;
  letter-spacing: -0.01em;
}
.sheet--career .career-company__meta {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.3px;
  line-height: 1.5;
}
.sheet--career .career-company__body {
  padding: 30px 68px 53px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 23px;
  overflow: hidden;
}
.sheet--career .career-company__section { margin: 0; }
.sheet--career .career-company__section-title {
  font-size: 14.7px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 0 0 13.3px;
  margin: 0 0 6.7px;
  border-left: 4.7px solid var(--color-accent);
  line-height: 1.2;
}
.sheet--career .career-company__section-title i {
  color: var(--color-accent);
  margin-right: 5.3px;
  font-size: 13.3px;
}
.achievement {
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-bottom: 4px;
  border-left: 2.7px solid var(--color-accent);
}
.achievement:last-child { margin-bottom: 0; }
.achievement__title {
  font-size: 12.7px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 3px;
}
.achievement .styled-list li {
  font-size: 11.5px;
  line-height: 1.5;
}

/* 2-column variant for compact bullet lists (e.g. duties / tech contributions) */
.styled-list--cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 2px;
}
.career-company__toggle { display: none; }

/* ============================================================
   TECH STACK
   ============================================================ */
.tech-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 22px;
}
.tech-stack__category {
  padding: 3px 0 5px;
}
.tech-stack__category::before { display: none; }
.tech-stack__category > h3 {
  font-size: 12.1px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin: 0 0 5px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--color-border);
}
.tech-stack__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
}
.tech-stack__list li {
  position: relative;
  padding-left: 11px;
  font-size: 10.8px;
  line-height: 1.38;
  color: var(--color-text-secondary);
}
.tech-stack__list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  width: 3.3px;
  height: 3.3px;
  background: var(--color-accent);
}
.tech-stack__list strong {
  display: block;
  color: var(--color-primary);
  font-weight: 800;
  margin-bottom: 1px;
}
.tech-stack__list strong::after {
  content: '';
}
.tech-stack__list span {
  color: var(--color-text-secondary);
}
.tech-stack__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tech-stack__sublist li {
  position: relative;
  padding-left: 9px;
  font-size: 10.4px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.tech-stack__sublist li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--color-text-tertiary);
}
.tech-stack__category:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.tech-stack__category:last-child:nth-child(odd) .tech-stack__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 5px;
}

/* ============================================================
   TAGS
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 10.7px;
  font-weight: 500;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border-radius: var(--radius-full);
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrapper { overflow: visible; border: none; border-radius: 0; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
thead tr { border-bottom: 1.6px solid var(--color-primary); }
th {
  background: transparent;
  color: var(--color-primary);
  font-size: 10.7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5.3px 10.7px;
  border: none;
  text-align: left;
}
tbody tr { border-bottom: 0.7px solid var(--color-border); }
tbody tr:last-child { border-bottom: none; }
td {
  background: transparent;
  color: var(--color-text-primary);
  font-size: 12.7px;
  padding: 5.3px 10.7px;
  border: none;
}
td:first-child {
  font-weight: 700;
  color: var(--color-accent-dark);
  white-space: nowrap;
  width: 80px;
}
.table-link {
  color: var(--color-text-primary);
  text-decoration: none;
}
.table-link:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.table-url {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 10.5px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  word-break: break-all;
}
.table-url:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}
.table-url--inline {
  display: inline;
  margin: 0 0 0 6px;
  vertical-align: baseline;
}
.career-history-table th:nth-child(1) { width: 30%; }
.career-history-table th:nth-child(2) { width: 34%; }
.career-history-table th:nth-child(3) { width: 14%; }
.career-history-table th:nth-child(4) { width: 22%; }
.career-history-table th:nth-child(3),
.career-history-table td:nth-child(3) {
  padding-right: 18px;
}

/* ============================================================
   PROJECT CARDS — full A4 magazine layout
   ============================================================ */
.sheet--project { padding: 0; }
.project-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}
.project-card__image {
  width: 100%;
  height: 491px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-bottom: 5.3px solid var(--color-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-card__image--placeholder {
  background: var(--color-primary);
  color: #ffffff;
  flex-direction: column;
  gap: 10.7px;
}
.project-card__image--placeholder i {
  font-size: 48px;
  color: var(--color-accent);
  opacity: 0.85;
}
.project-card__image--placeholder span {
  font-size: 14.7px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}
.project-card__body {
  flex: 1;
  padding: 38px 68px 45px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}
.project-card__meta {
  display: flex;
  align-items: center;
  gap: 10.7px;
  margin: 0;
}
.project-card__company {
  font-size: 11.3px;
  font-weight: 800;
  color: #ffffff;
  background: var(--color-primary);
  padding: 4px 14.7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.project-card__type {
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.project-card__type::before { content: '·'; margin-right: 8px; color: var(--color-text-tertiary); }
.project-card__period {
  font-size: 12px;
  color: var(--color-accent-dark);
  font-weight: 700;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.project-card__period::before { content: '·'; margin-right: 8px; color: var(--color-text-tertiary); }
.project-card__title {
  font-size: 29.3px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 6.7px;
}
.project-card__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 42.7px; height: 3.3px;
  background: var(--color-accent);
}
.project-card__description {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}
.project-card__block { margin: 0; }
.project-card__heading {
  font-size: 11.3px;
  font-weight: 800;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 5.3px;
  padding-left: 12px;
  position: relative;
}
.project-card__heading::before {
  content: '';
  position: absolute;
  left: 0; top: 2.7px;
  width: 4px; height: 12px;
  background: var(--color-accent);
}
.project-card__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.7px;
}
.project-card__list li {
  position: relative;
  padding-left: 14.7px;
  font-size: 12.7px;
  color: var(--color-text-primary);
  line-height: 1.5;
}
.project-card__list li::before {
  content: '';
  position: absolute;
  left: 2.7px; top: 6.7px;
  width: 4px; height: 4px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.project-card__outcome {
  background: linear-gradient(90deg, var(--color-accent-soft) 0%, transparent 100%);
  border-left: 4px solid var(--color-accent);
  padding: 9.3px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
}
.project-card__outcome strong {
  display: block;
  font-size: 10.7px;
  font-weight: 800;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.project-card__list--outcome {
  gap: 2px;
}
.project-card__list--outcome li {
  font-size: 12.3px;
  line-height: 1.45;
}
.project-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6.7px;
  padding-top: 9.3px;
  border-top: 0.7px solid var(--color-border);
}
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.project-card__tags .tag {
  font-size: 10.7px;
  padding: 2.7px 12px;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: var(--radius-full);
}
.project-card__link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6.7px 18.7px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
}
.project-card__link i { color: #ffffff; font-size: 12px; }
.project-card__link--disabled,
.project-card__link--disabled:hover {
  background: var(--color-text-tertiary);
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.6;
  cursor: not-allowed;
}


/* ============================================================
   PORTFOLIO DECK — landscape presentation slides
   ============================================================ */
:root {
  --deck-w: 1120px;
  --deck-h: 630px;
}

.deck {
  padding: calc(var(--nav-height) + var(--sheet-gap)) var(--sheet-gap) var(--sheet-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sheet-gap);
  overflow-x: auto;
}

.slide {
  width: var(--deck-w);
  height: var(--deck-h);
  background: #ffffff;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.slide.visible { opacity: 1; transform: translateY(0); }

.slide__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.slide__subtitle {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

.slide__topline,
.slide__number {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  font-feature-settings: 'tnum';
}

.slide--intro {
  display: grid;
  grid-template-columns: 405px 1fr;
}

.slide-intro__panel {
  background: var(--color-primary);
  color: #ffffff;
  padding: 58px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 8px solid var(--color-accent);
}

.slide-intro__title {
  margin: 16px 0 14px;
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: 0;
  color: #ffffff;
  font-weight: 900;
}

.slide-intro__lead {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.slide-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.slide-intro__stats div {
  border-top: 2px solid rgba(255, 255, 255, 0.24);
  padding-top: 12px;
}

.slide-intro__stats strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  font-weight: 900;
}

.slide-intro__stats span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slide-intro__body {
  padding: 42px 50px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.slide__topline {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.deck-index {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deck-index__item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.deck-index__num {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: #16a34a;
  font-feature-settings: 'tnum';
}

.deck-index__content { min-width: 0; }

.deck-index__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.deck-index__line h2 {
  margin: 0;
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.deck-index__line span {
  flex-shrink: 0;
  color: var(--color-accent-dark);
  font-size: 11px;
  font-weight: 800;
  font-feature-settings: 'tnum';
}

.deck-index__content p {
  margin: 8px 0 9px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.deck-index__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deck-index__meta span {
  padding: 4px 9px;
  background: var(--color-bg-tertiary);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
}

.slide--project {
  display: flex;
  flex-direction: column;
}

.slide__header {
  height: 100px;
  padding: 28px 42px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.slide__title {
  margin: 6px 0 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-primary);
  font-weight: 900;
}

.slide-project {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 52% 48%;
}

.slide-project__media {
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #eef3f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
}

.slide-project__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide-project__media--placeholder {
  background: var(--color-primary);
  color: #ffffff;
  flex-direction: column;
  gap: 12px;
}

.slide-project__media--placeholder i {
  color: var(--color-accent);
  font-size: 42px;
}

.slide-project__content {
  min-width: 0;
  padding: 28px 34px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slide-project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.slide-project__meta span {
  padding: 5px 10px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.slide-project__meta span:nth-child(2) {
  background: #16a34a;
}

.slide-project__meta span:nth-child(3) {
  background: #b45309;
}

.slide-project__description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
}

.slide-project__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.slide-project__block {
  min-width: 0;
  padding: 14px 16px;
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-accent);
}

.slide-project__block--accent {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

.slide-project__block h3 {
  margin: 0 0 10px;
  color: var(--color-primary);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.slide-project__block ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.slide-project__block li {
  position: relative;
  padding-left: 12px;
  color: var(--color-text-primary);
  font-size: 11.5px;
  line-height: 1.45;
}

.slide-project__block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  background: currentColor;
}

.slide-project__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.slide-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.slide-project__tags span {
  padding: 4px 8px;
  background: var(--color-bg-tertiary);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
}

.slide-project__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 13px;
  background: #dc2626;
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.slide-project__link:hover { color: #ffffff; background: #b91c1c; }
.slide-project__link i { color: #ffffff; }

.slide-project__link--disabled,
.slide-project__link--disabled:hover {
  background: var(--color-text-tertiary);
  color: rgba(255, 255, 255, 0.86);
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .deck { align-items: flex-start; }
  .slide { margin-left: 0; margin-right: 0; }
}

@media print {
  @page deck { size: 297mm 167.06mm; margin: 0; }

  .page-portfolio .deck {
    padding: 0 !important;
    gap: 0 !important;
    background: #ffffff !important;
    display: block !important;
    overflow: visible !important;
  }

  .page-portfolio .slide {
    page: deck;
    width: 297mm !important;
    height: 167.06mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    break-after: page !important;
    page-break-after: always !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .page-portfolio .slide:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}


/* MOCA OpenArm portfolio slides */
.moca-deck .slide {
  font-size: 13px;
}

.moca-slide {
  background: #ffffff;
}

.moca-slide__header {
  height: 92px;
  padding: 24px 38px 18px;
}

.moca-slide__header .slide__title {
  font-size: 28px;
}

.moca-slide__count {
  position: absolute;
  right: 30px;
  bottom: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 900;
  font-feature-settings: 'tnum';
}

.moca-cover {
  display: grid;
  grid-template-columns: 42% 58%;
  background: var(--color-primary);
  color: #ffffff;
}

.moca-cover__copy {
  padding: 56px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.moca-cover__copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 900;
}

.moca-cover__copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.65;
}

.moca-cover__subtitle {
  margin: -8px 0 0 !important;
  color: var(--color-accent) !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 900;
}

.moca-cover__media {
  position: relative;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #111827;
}

.moca-cover__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 40, 72, 0.74), rgba(20, 40, 72, 0.06) 38%, rgba(0, 0, 0, 0.12));
}

.moca-cover__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moca-badges,
.moca-stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.moca-badges span,
.moca-stack-list span {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.moca-badges span {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.moca-cover__repo {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
}

.moca-cover__repo i {
  color: var(--color-accent);
  font-size: 15px;
}


.moca-content {
  height: calc(100% - 92px);
  padding: 26px 38px 30px;
  display: grid;
  gap: 18px;
  min-height: 0;
}

.moca-lead {
  padding: 18px 20px;
  background: linear-gradient(90deg, var(--color-accent-soft), #f0fdf4);
  border-left: 5px solid var(--color-accent);
}

.moca-lead h3,
.moca-note-list h3,
.moca-impl-card h3,
.moca-result h3,
.moca-links h3 {
  margin: 0 0 8px;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.moca-lead p,
.moca-note-list li,
.moca-impl-card p,
.moca-result li,
.moca-links p,
.moca-links span {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.moca-lead p,
.moca-impl-card p,
.moca-links p,
.moca-links span {
  margin: 0;
}

.moca-flow,
.moca-arch-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.moca-flow div,
.moca-arch-flow div,
.moca-team-grid div,
.moca-links section,
.moca-result-grid section {
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.moca-flow div {
  padding: 16px;
}

.moca-flow strong {
  display: block;
  color: #16a34a;
  font-size: 23px;
  line-height: 1;
  font-weight: 900;
  font-feature-settings: 'tnum';
}

.moca-flow span {
  display: block;
  margin-top: 8px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
}

.moca-two-col,
.moca-media-pair,
.moca-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 0;
}

.moca-media,
.moca-profile,
.moca-impl-card figure,
.moca-result__media {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #eef3f8;
}

.moca-media img,
.moca-profile img,
.moca-impl-card img,
.moca-result__media img,
.moca-troubleshooting img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moca-media--contain img,
.moca-media-pair .moca-media img {
  object-fit: contain;
}

.moca-media figcaption {
  padding: 8px 10px;
  background: #ffffff;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.moca-note-list {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #ffffff;
}

.moca-note-list ul,
.moca-result ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.moca-note-list li,
.moca-result li {
  position: relative;
  padding-left: 14px;
}

.moca-note-list li::before,
.moca-result li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
}

.moca-role-layout {
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
}

.moca-profile {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: 1fr auto;
}

.moca-profile img {
  min-height: 0;
  object-position: center bottom;
}

.moca-profile figcaption {
  padding: 14px 16px;
  background: var(--color-primary);
  color: #ffffff;
}

.moca-profile strong,
.moca-profile span {
  display: block;
}

.moca-profile strong {
  font-size: 18px;
  font-weight: 900;
}

.moca-profile span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.moca-role-focus {
  background: #f0f9ff;
  border-left: 5px solid var(--color-accent);
}

.moca-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.moca-team-grid div {
  padding: 13px 14px;
}

.moca-team-grid strong,
.moca-team-grid span {
  display: block;
}

.moca-team-grid strong {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 900;
}

.moca-team-grid span {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.moca-architecture {
  grid-template-rows: auto auto 1fr;
}

.moca-arch-flow div {
  padding: 14px;
  border-top: 4px solid var(--color-accent);
}

.moca-arch-flow strong,
.moca-arch-flow span {
  display: block;
}

.moca-arch-flow strong {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 900;
}

.moca-arch-flow span {
  margin-top: 7px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
}

.moca-stack-list span {
  color: var(--color-primary);
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.moca-implementation {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.moca-impl-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 210px auto 1fr;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.moca-impl-card figure {
  height: 210px;
}

.moca-impl-card h3 {
  font-size: 15px;
  margin: 0;
}

.moca-impl-card p {
  font-size: 11.5px;
}

.moca-troubleshooting {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.moca-troubleshooting article {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  min-width: 0;
}

.moca-troubleshooting img {
  height: 132px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #eef3f8;
}

.moca-troubleshooting strong,
.moca-troubleshooting span {
  display: block;
}

.moca-troubleshooting strong {
  color: var(--color-primary);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
}

.moca-troubleshooting span {
  margin-top: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.moca-result__media {
  min-height: 0;
}

.moca-result__body {
  min-width: 0;
  display: flex;
}

.moca-result-grid {
  display: grid;
  gap: 14px;
}

.moca-result-grid section {
  padding: 18px 20px;
}

.moca-result-grid section:first-child {
  border-left: 5px solid #16a34a;
}

.moca-result-grid section:last-child {
  border-left: 5px solid #b45309;
}

.moca-links {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.moca-links section {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.moca-links i {
  color: var(--color-accent);
  font-size: 36px;
}

.moca-links h3 {
  margin: 0;
  font-size: 22px;
}

.moca-links p {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 900;
}

.moca-links span {
  color: var(--color-text-tertiary);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .moca-deck .slide {
    width: var(--deck-w);
  }
}


/* Expanded MOCA portfolio layouts */

.moca-scope-summary {
  grid-row: 1 / span 2;
  display: grid;
  gap: 12px;
  align-content: stretch;
}
.moca-scope-summary h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 900;
}
.moca-scope-summary div {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  border-left: 5px solid var(--color-accent);
}
.moca-scope-summary strong,
.moca-scope-summary span {
  display: block;
}
.moca-scope-summary strong {
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 900;
}
.moca-scope-summary span {
  margin-top: 7px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.moca-context-layout { grid-template-rows: auto 1fr auto; }
.moca-lead--large h3 { font-size: 24px; }
.moca-lead--large p { font-size: 15px; }
.moca-context-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.moca-context-cards article { padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #ffffff; border-top: 5px solid var(--color-accent); }
.moca-context-cards strong, .moca-context-cards span { display: block; }
.moca-context-cards strong { color: var(--color-primary); font-size: 18px; font-weight: 900; }
.moca-context-cards span { margin-top: 8px; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }

.moca-scope-layout { grid-template-columns: 0.9fr 1.1fr; grid-template-rows: 1fr auto; }
.moca-scope-layout > .moca-media { grid-row: 1 / span 2; }
.moca-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.moca-process--wide { grid-column: 2; }
.moca-process div { padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #f8fafc; }
.moca-process b, .moca-process span { display: block; }
.moca-process b { color: var(--color-primary); font-size: 16px; font-weight: 900; }
.moca-process span { margin-top: 7px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.4; }

.moca-feature-split { grid-template-columns: 0.42fr 0.58fr; }
.moca-media--large img { object-fit: contain; }
.moca-world-layout, .moca-beverage-layout { grid-template-columns: 0.8fr 1fr 1fr; }
.moca-world-layout .moca-media img, .moca-beverage-layout .moca-media img { object-fit: contain; }

.moca-validation-grid { gap: 14px; }
.moca-validation-grid--four { grid-template-columns: repeat(4, 1fr); }
.moca-validation-grid--three { grid-template-columns: repeat(3, 1fr); }
.moca-validation-grid figure, .moca-ts-pair section, .moca-gripper-flow figure, .moca-wire-images figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #ffffff; display: grid; grid-template-rows: 1fr auto; }
.moca-validation-grid img, .moca-ts-pair img, .moca-gripper-flow img, .moca-wire-images img { width: 100%; height: 100%; object-fit: cover; background: #eef3f8; }
.moca-validation-grid figcaption, .moca-gripper-flow figcaption { padding: 10px 12px; color: var(--color-primary); font-size: 13px; font-weight: 900; text-align: center; }

.moca-ts-pair { grid-template-columns: 1fr 1fr; gap: 18px; }
.moca-ts-pair section { padding: 14px; grid-template-rows: auto 1fr auto; gap: 12px; }
.moca-ts-pair h3 { margin: 0; color: var(--color-primary); font-size: 22px; font-weight: 900; }
.moca-ts-pair figure { height: 330px; }
.moca-ts-pair p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }

.moca-gripper-flow { grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; gap: 10px; }
.moca-gripper-flow figure { height: 100%; }
.moca-arrow { display: grid; place-items: center; color: var(--color-accent-dark); font-size: 34px; font-weight: 900; }

.moca-wire-layout { grid-template-columns: 1.15fr 0.85fr; }
.moca-wire-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }

.moca-result-expanded { grid-template-columns: 1fr 1fr 1fr; }
.moca-result-expanded > section { padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #ffffff; }
.moca-result-expanded h3 { margin: 0 0 14px; color: var(--color-primary); font-size: 20px; font-weight: 900; }
.moca-result-expanded ul { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.moca-result-expanded li { position: relative; padding-left: 14px; color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
.moca-result-expanded li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--color-accent); }
.moca-improvement { display: grid; grid-template-rows: auto repeat(3, 1fr); gap: 10px; }
.moca-improvement div { padding: 14px; border-radius: var(--radius-sm); background: #ecfdf5; }
.moca-improvement b, .moca-improvement span { display: block; }
.moca-improvement b { color: #15803d; font-size: 13px; font-weight: 900; }
.moca-improvement span { margin-top: 5px; color: var(--color-primary); font-size: 14px; font-weight: 800; }


/* Additional visual rows for MOCA portfolio */
.moca-overview-media-row,
.moca-scope-image-strip,
.moca-arch-media-row {
  display: grid;
  gap: 12px;
  min-height: 0;
}
.moca-overview-media-row,
.moca-arch-media-row {
  grid-template-columns: repeat(3, 1fr);
}
.moca-scope-image-strip {
  grid-column: 2;
  grid-template-columns: repeat(4, 1fr);
}
.moca-overview-media-row figure,
.moca-scope-image-strip figure,
.moca-arch-media-row figure,
.moca-result-proof {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: grid;
  grid-template-rows: 1fr auto;
}
.moca-overview-media-row img,
.moca-scope-image-strip img,
.moca-arch-media-row img,
.moca-result-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eef3f8;
}
.moca-overview-media-row figure:nth-child(2) img,
.moca-arch-media-row figure:nth-child(2) img {
  object-fit: contain;
}
.moca-overview-media-row figcaption,
.moca-scope-image-strip figcaption,
.moca-arch-media-row figcaption,
.moca-result-proof figcaption {
  padding: 8px 10px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.moca-architecture {
  grid-template-rows: auto auto 1fr;
}
.moca-result-expanded {
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
}
.moca-result-proof {
  min-height: 0;
}


/* Scope slide visual redesign */
.moca-scope-layout--visual {
  grid-template-columns: 330px 1fr;
  grid-template-rows: 1fr;
  gap: 22px;
}
.moca-scope-layout--visual .moca-scope-summary {
  grid-row: auto;
  align-content: start;
  padding-right: 2px;
}
.moca-scope-layout--visual .moca-scope-summary div {
  padding: 15px 16px;
}
.moca-scope-layout--visual .moca-scope-summary p {
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: #f0f9ff;
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid #bae6fd;
}
.moca-scope-storyboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  min-height: 0;
}
.moca-scope-storyboard figure {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: grid;
  grid-template-rows: 1fr 42px;
  box-shadow: var(--shadow-sm);
}
.moca-scope-storyboard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eef3f8;
}
.moca-scope-storyboard figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--color-primary);
}
.moca-scope-storyboard figcaption b {
  color: var(--color-accent-dark);
  font-size: 12px;
  font-weight: 900;
  font-feature-settings: 'tnum';
}
.moca-scope-storyboard figcaption span {
  font-size: 13px;
  font-weight: 900;
}


/* Technical core slide */
.moca-core-layout {
  grid-template-rows: 1fr auto;
}
.moca-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}
.moca-core-grid article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: grid;
  grid-template-rows: 190px auto 1fr auto;
  gap: 12px;
  padding: 12px;
  border-top: 5px solid var(--color-accent);
}
.moca-core-grid figure {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #eef3f8;
}
.moca-core-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.moca-core-grid article:nth-child(2) img {
  object-fit: contain;
}
.moca-core-grid h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}
.moca-core-grid p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.52;
}
.moca-core-grid div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.moca-core-grid div span {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: var(--color-primary);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}


/* MOCA table of contents */
.moca-toc {
  grid-template-columns: 1fr 310px;
  gap: 22px;
}
.moca-toc ol {
  margin: 0;
  display: grid;
  gap: 10px;
  counter-reset: none;
}
.moca-toc li {
  display: grid;
  grid-template-columns: 52px 210px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
}
.moca-toc li span {
  color: var(--color-accent-dark);
  font-size: 20px;
  font-weight: 900;
  font-feature-settings: 'tnum';
}
.moca-toc li strong {
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
}
.moca-toc li em {
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.35;
  font-style: normal;
}
.moca-toc aside {
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.moca-toc aside h3 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
}
.moca-toc aside div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.moca-toc aside span {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 900;
}

/* ============================================================
   COVER LETTER — giant numbered titles
   ============================================================ */
.cover-letter__content {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}
.cover-letter__content h3 {
  font-size: 26.7px;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 10.7px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 18.7px;
  border: none;
}
.cover-letter__content h3 .cl-num {
  font-size: 74.7px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.04em;
  flex-shrink: 0;
  align-self: center;
}
.cover-letter__intro h3 .cl-num { color: var(--color-accent-dark); }
.cover-letter__content h3 .cl-title {
  flex: 1;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5.3px;
}
.cover-letter__content blockquote {
  background: transparent;
  border-left: 4px solid var(--color-accent);
  padding: 6.7px 0 6.7px 18.7px;
  margin: 0 0 18.7px;
  font-size: 16px;
  color: var(--color-accent-dark);
  font-weight: 600;
  font-style: normal;
  border-radius: 0;
}
.cover-letter__content blockquote p {
  font-size: 16px;
  color: var(--color-accent-dark);
  font-weight: 600;
  margin: 0;
}
.cover-letter__content p {
  font-size: 14.7px;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin: 0 0 13.3px;
  text-align: justify;
}
.cover-letter__content > *:last-child { margin-bottom: 0; }

/* ============================================================
   FOOTER (screen only)
   ============================================================ */
.footer {
  display: none;
}

/* Mobile / overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 250ms ease;
}
.nav-overlay.active { display: block; opacity: 1; }

/* ============================================================
   RESPONSIVE — viewport scaling for narrow screens
   The sheet stays at A4 dimensions but is scaled down to fit
   the viewport, preserving WYSIWYG.
   ============================================================ */
@media (max-width: 880px) {
  .nav__menu-toggle { display: flex; }
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    right: -100%;
    width: 280px;
    height: calc(100vh - var(--nav-height));
    flex-direction: column;
    background: var(--color-bg-primary);
    padding: 1rem;
    gap: 4px;
    transition: right 250ms ease;
    border-left: 1px solid var(--color-border);
    z-index: 999;
    overflow-y: auto;
  }
  .nav__links.active { right: 0; }
  .nav__link { width: 100%; padding: 0.75rem 1rem; font-size: 0.95rem; }
}

/* ============================================================
   PRINT — direct mapping: each .sheet becomes one A4 page.
   Body grey workspace removed; sheets print at 1:1.
   ============================================================ */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  @page { size: A4; margin: 0; }

  html, body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav,
  .nav-overlay,
  .footer,
  .pdf-btn,
  .nav__menu-toggle,
  [data-no-print],
  script,
  noscript {
    display: none !important;
  }

  main, .main-content { padding: 0 !important; }

  .document {
    padding: 0 !important;
    gap: 0 !important;
    background: #ffffff !important;
    display: block !important;
  }

  /* Use exact A4 mm so the sheet fits one page without sub-pixel overflow
     (px rounding pushes 1123 px past A4's 1122.52 px and creates blank pages). */
  .sheet {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
  }

  .sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* Disable scroll-triggered animations */
  [data-animate] { opacity: 1 !important; transform: none !important; animation: none !important; }

  a[href]::after { content: none !important; }
  a { color: inherit !important; text-decoration: none !important; }

  .project-card__link,
  .project-card__link:visited {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  .project-card__link i {
    color: #ffffff !important;
  }

  .project-card__link--disabled,
  .project-card__link--disabled:hover {
    background: var(--color-text-tertiary) !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
}


/* Tech stack and architecture slide */
.moca-tech-architecture-layout {
  grid-template-columns: 1.08fr 0.92fr;
  gap: 18px;
  align-items: stretch;
}

.moca-system-architecture {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: grid;
  grid-template-rows: 1fr 34px;
}

.moca-system-architecture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  background: #f8fafc;
}

.moca-system-architecture figcaption {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
  border-top: 1px solid var(--color-border);
}

.moca-tech-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}

.moca-tech-panel h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}

.moca-tech-groups {
  display: grid;
  gap: 10px;
}

.moca-tech-groups article {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.moca-tech-groups strong {
  display: block;
  margin-bottom: 9px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 900;
}

.moca-tech-groups article > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.moca-tech-groups img {
  width: 100%;
  height: 38px;
  object-fit: contain;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.moca-tech-groups img.wide {
  padding: 7px;
}

.moca-architecture-notes {
  display: grid;
  gap: 9px;
  min-height: 0;
}

.moca-architecture-notes div {
  padding: 12px 13px;
  border-radius: var(--radius-md);
  background: #f0f9ff;
  border-left: 4px solid var(--color-accent);
}

.moca-architecture-notes b,
.moca-architecture-notes span {
  display: block;
}

.moca-architecture-notes b {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
}

.moca-architecture-notes span {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
}


/* Project overview diagram */
.moca-overview-system {
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  display: grid;
  grid-template-rows: 1fr 32px;
}

.moca-overview-system img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  background: #f8fafc;
}

.moca-overview-system figcaption {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 900;
  border-top: 1px solid var(--color-border);
}


/* Portfolio structure refinements */
.moca-context-layout {
  grid-template-columns: 350px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
}

.moca-context-layout .moca-lead {
  grid-column: 1;
  grid-row: 1;
  padding: 14px 16px;
}

.moca-context-layout .moca-lead h3 {
  font-size: 20px;
}

.moca-context-layout .moca-lead p {
  font-size: 12.5px;
  line-height: 1.5;
}

.moca-context-layout .moca-context-cards {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  min-height: 0;
}

.moca-context-layout .moca-context-cards article {
  padding: 12px 13px;
  border-top-width: 4px;
}

.moca-context-layout .moca-context-cards strong {
  font-size: 14px;
}

.moca-context-layout .moca-context-cards span {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.38;
}

.moca-context-layout .moca-overview-system {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 0;
}

.moca-tech-architecture-layout {
  padding: 20px 32px 24px !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
  gap: 14px !important;
}

.moca-tech-architecture-layout .moca-system-architecture img {
  padding: 8px;
}

.moca-tech-architecture-layout .moca-tech-panel {
  gap: 9px;
}

.moca-tech-architecture-layout .moca-tech-panel h3 {
  font-size: 17px;
}

.moca-tech-architecture-layout .moca-tech-groups {
  gap: 8px;
}

.moca-tech-architecture-layout .moca-tech-groups article {
  padding: 9px 10px;
}

.moca-tech-architecture-layout .moca-tech-groups strong {
  margin-bottom: 6px;
  font-size: 11.5px;
}

.moca-tech-architecture-layout .moca-tech-groups img {
  height: 32px;
  padding: 5px;
}

.moca-tech-architecture-layout .moca-architecture-notes {
  gap: 7px;
}

.moca-tech-architecture-layout .moca-architecture-notes div {
  padding: 9px 10px;
}

.moca-tech-architecture-layout .moca-architecture-notes b {
  font-size: 11px;
}

.moca-tech-architecture-layout .moca-architecture-notes span {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.35;
}

.moca-media--labeled {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.moca-media--labeled figcaption {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  text-align: left;
}

.moca-media--labeled figcaption b,
.moca-media--labeled figcaption span {
  display: block;
}

.moca-media--labeled figcaption b {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 900;
}

.moca-media--labeled figcaption span {
  color: var(--color-text-secondary);
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 700;
}


/* Sim-to-real implementation slide */
.moca-world-layout {
  grid-template-columns: 0.72fr repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.moca-world-layout .moca-note-list {
  padding: 16px;
}

.moca-world-layout .moca-note-list h3 {
  font-size: 17px;
}

.moca-world-layout .moca-note-list li {
  font-size: 11.5px;
  line-height: 1.45;
}

.moca-world-step {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0;
}

.moca-world-step img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 10px;
  background: #eef3f8;
}

.moca-world-step figcaption {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  min-height: 58px;
  border-top: 1px solid var(--color-border);
  background: #ffffff;
  text-align: left;
}

.moca-world-step figcaption b,
.moca-world-step figcaption span {
  display: block;
}

.moca-world-step figcaption b {
  color: var(--color-primary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.moca-world-step figcaption span {
  color: var(--color-text-secondary);
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 700;
}


/* Troubleshooting section opener */
.moca-ts-intro .moca-slide__header {
  height: 108px;
  padding-top: 18px;
  padding-bottom: 14px;
}

.moca-ts-intro .moca-slide__header .slide__title {
  font-size: 30px;
  line-height: 1.05;
}

.moca-ts-intro .slide__subtitle {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.2;
}

.moca-ts-intro .moca-content {
  height: calc(100% - 108px);
  padding-top: 18px;
  padding-bottom: 24px;
}

.moca-ts-intro .moca-ts-pair figure {
  height: 305px;
}


/* Sim-to-real section slides */
.moca-sim2real-slide .moca-slide__header {
  height: 108px;
  padding-top: 18px;
  padding-bottom: 14px;
}

.moca-sim2real-slide .moca-slide__header .slide__title {
  font-size: 27px;
  line-height: 1.08;
}

.moca-sim2real-slide .slide__subtitle {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.2;
}

.moca-sim2real-slide .moca-content {
  height: calc(100% - 108px);
  padding-top: 18px;
  padding-bottom: 24px;
}


.moca-source-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: var(--color-primary);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
}

.moca-source-link::before {
  content: '#';
  color: var(--color-accent);
  font-weight: 900;
}


/* Dual-arm coordination slide */
.moca-beverage-layout {
  grid-template-columns: 0.78fr 1.22fr !important;
  gap: 16px !important;
}

.moca-beverage-layout .moca-note-list {
  padding: 18px;
}

.moca-beverage-layout .moca-note-list h3 {
  font-size: 17px;
}

.moca-beverage-layout .moca-note-list li {
  font-size: 11.8px;
  line-height: 1.45;
}

.moca-coordination-visuals {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.moca-coordination-visuals .moca-media {
  min-height: 0;
}

.moca-coordination-visuals .moca-media img {
  object-fit: cover !important;
}

.moca-coordination-visuals .moca-media--labeled figcaption {
  min-height: 72px;
  padding: 8px 9px;
}

.moca-coordination-visuals .moca-media--labeled figcaption b {
  font-size: 11.5px;
}

.moca-coordination-visuals .moca-media--labeled figcaption span {
  font-size: 10px;
  line-height: 1.32;
}


/* Gripper troubleshooting detail */
.moca-gripper-flow--detailed figure {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 9px;
  padding: 12px;
}

.moca-gripper-flow--detailed h3 {
  margin: 0;
  color: var(--color-primary);
  font-size: 15px;
  line-height: 1.22;
  font-weight: 900;
}

.moca-gripper-flow--detailed img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.moca-gripper-flow--detailed figcaption {
  min-height: 64px;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 700;
  text-align: left;
}


/* Sim-to-real world export flow */
.moca-world-layout {
  grid-template-columns: 0.68fr 1.72fr !important;
  gap: 16px !important;
}

.moca-world-flow {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 42px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 10px;
  align-items: stretch;
}

.moca-world-step--source {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.moca-world-step--target:nth-of-type(2) {
  grid-column: 3;
  grid-row: 1;
}

.moca-world-step--target:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}

.moca-world-arrow {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--color-accent-dark);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.moca-world-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--color-accent);
  transform: translateY(-50%);
  z-index: 0;
}

.moca-world-arrow {
  z-index: 1;
  text-shadow: 0 0 0 #ffffff, 0 0 8px #ffffff;
}

.moca-world-arrow--top {
  grid-column: 2;
  grid-row: 1;
}

.moca-world-arrow--bottom {
  grid-column: 2;
  grid-row: 2;
}

.moca-world-flow .moca-world-step figcaption {
  min-height: 52px;
  padding: 8px 10px;
}

.moca-world-flow .moca-world-step--target figcaption span {
  font-size: 10px;
}


/* Keep world export arrows as clean symbols only. */
.moca-world-arrow::before {
  display: none !important;
}

.moca-world-arrow {
  text-shadow: none !important;
}


/* Real robot transfer notice */
.moca-real-transfer-layout {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px !important;
}

.moca-real-transfer-layout .moca-validation-grid {
  min-height: 0;
  display: grid;
}

.moca-caution-note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #f8d78b;
  border-left: 5px solid #f59e0b;
  border-radius: var(--radius-md);
  background: #fffbeb;
  color: #713f12;
}

.moca-caution-note strong {
  color: #92400e;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}

.moca-caution-note span {
  color: #713f12;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}


/* Actuator wire troubleshooting detail */
.moca-wire-note {
  padding: 18px;
}

.moca-wire-note h3 {
  font-size: 19px;
  line-height: 1.2;
}

.moca-wire-note ul {
  gap: 9px;
}

.moca-wire-note li {
  color: var(--color-text-secondary);
  font-size: 12.4px;
  line-height: 1.5;
}


/* Actuator wire troubleshooting image timeline */
.moca-wire-images--timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
}

.moca-wire-images--timeline .moca-wire-before {
  grid-column: 1 / -1;
}

.moca-wire-images--timeline figure {
  grid-template-rows: minmax(0, 1fr) auto;
}

.moca-wire-images--timeline img {
  object-fit: cover;
}

.moca-wire-images--timeline .moca-wire-before img {
  object-position: center 58%;
}

.moca-wire-images--timeline figcaption {
  padding: 7px 9px;
  color: var(--color-primary);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
}


/* Linked video overlays for portfolio media */
.moca-video-link {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #eef3f8;
}

.moca-video-link img {
  display: block;
  width: 100%;
  height: 100%;
}

.moca-video-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(20, 40, 72, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

.moca-video-link:hover .moca-video-badge {
  background: var(--color-accent-dark);
}


/* Make linked video affordance harder to miss. */
.moca-video-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.00) 42%, rgba(15, 23, 42, 0.34) 100%);
  pointer-events: none;
}

.moca-video-badge {
  right: 14px !important;
  bottom: 14px !important;
  min-height: 34px !important;
  padding: 9px 14px !important;
  border-radius: 6px !important;
  background: rgba(14, 165, 233, 0.96) !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.34) !important;
}

.moca-video-link:hover .moca-video-badge {
  background: #0284c7 !important;
}


/* GitHub issue media link variant */
.moca-video-badge--issue {
  background: rgba(30, 41, 59, 0.94) !important;
}

.moca-video-link--issue:hover .moca-video-badge--issue {
  background: #0f172a !important;
}