/* A4 print portfolio — layout B (text left / images right) + numbered band accent */
@page { size: A4; margin: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #004f90;
  --rule: #d2d2d7;
  --bg-block: #f5f5f7;
}

body {
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  font-size: 10.5pt;
  line-height: 1.45;
}

.page {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  padding: 16mm 16mm 14mm;
  display: flex;
  flex-direction: column;
  border-bottom: 0.5px solid var(--rule);
}
.page:last-child { border-bottom: none; }

/* ---------- page header (numbered band accent) ---------- */
.head { border-bottom: 2px solid var(--ink); padding-bottom: 5mm; margin-bottom: 7mm; }
.head .num { font-size: 9pt; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); }
.head h1 { font-size: 22pt; font-weight: 800; letter-spacing: -0.01em; margin: 1mm 0; }
.head .type { font-size: 8pt; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.head .type strong { color: var(--accent); }

/* ---------- two-column project body ---------- */
.cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8mm; flex: 1; min-height: 0; }
.col-text { display: flex; flex-direction: column; gap: 5mm; }
.col-images { display: flex; flex-direction: column; gap: 5mm; align-items: center; justify-content: flex-start; }
.col-images img { max-width: 100%; max-height: 108mm; object-fit: contain; border-radius: 2mm; border: 0.4pt solid var(--rule); }
.col-images .caption { font-size: 8pt; color: var(--muted); text-align: center; }

.summary { font-size: 12pt; line-height: 1.5; }

.block { background: var(--bg-block); border-radius: 2mm; padding: 4mm 5mm; }
.block h2 { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 2mm; }
.block ul { list-style: none; }
.block li { padding-left: 4mm; position: relative; margin-bottom: 1.5mm; }
.block li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 9.5pt; }

.links { margin-top: auto; padding-top: 4mm; border-top: 0.4pt solid var(--rule); font-size: 9pt; }
.links a { color: var(--accent); text-decoration: none; margin-right: 6mm; }

/* ---------- intro & closing pages ---------- */
.cover { justify-content: center; }
.cover .kicker { font-size: 10pt; font-weight: 700; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; margin-bottom: 6mm; }
.cover h1 { font-size: 34pt; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8mm; }
.cover .lede { font-size: 13pt; line-height: 1.65; max-width: 150mm; margin-bottom: 10mm; }
.cover .meta { font-size: 10pt; color: var(--muted); }
.cover .lede a,
.cover .meta a { color: var(--accent); text-decoration: none; }
.cover .lede a { text-decoration: underline; text-underline-offset: 2px; }

.toc { margin-top: 12mm; border-top: 2px solid var(--ink); padding-top: 6mm; }
.toc .row { display: flex; align-items: baseline; gap: 4mm; padding: 2.2mm 0; border-bottom: 0.4pt solid var(--rule); font-size: 10.5pt; }
.toc .n { font-weight: 700; color: var(--accent); width: 8mm; }
.toc .t { font-weight: 600; }
.toc .d { color: var(--muted); margin-left: auto; text-align: right; }

/* ---------- app cards (page 04) ---------- */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin: 6mm 0 5mm; }
.app-card { display: grid; grid-template-columns: 14mm 1fr; column-gap: 4mm; align-items: start; }
.app-card img { width: 14mm; height: 14mm; border-radius: 3.2mm; border: 0.4pt solid var(--rule); }
.app-card h2 { font-size: 11pt; font-weight: 700; letter-spacing: 0; color: var(--ink); text-transform: none; margin-bottom: 0.5mm; }
.app-card h3 { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; margin-bottom: 1.5mm; }
.app-card li { font-size: 9.5pt; line-height: 1.4; }

/* ---------- voice AI inline diagram ---------- */
.diagram { width: 100%; border: 0.4pt solid var(--rule); border-radius: 2mm; background: #fff; }

/* ---------- print: restore fixed A4 pagination ---------- */
@media print {
  .page {
    width: 210mm;
    height: 296.9mm; /* guard against sub-pixel rounding at the page boundary */
    max-width: none;
    margin: 0;
    overflow: hidden;
    page-break-after: always;
    border-bottom: none;
  }
  .page:last-child { page-break-after: auto; }
}

/* ---------- screen: narrow viewports ---------- */
@media screen and (max-width: 700px) {
  body { font-size: 12px; }
  .page { padding: 24px 20px; }
  .cols { grid-template-columns: 1fr; gap: 24px; }
  .apps-grid { grid-template-columns: 1fr; }
  .col-images img { max-height: none; }
  .cover h1 { font-size: 32px; }
  .cover .lede { font-size: 16px; }
  .head h1 { font-size: 24px; }
  .toc .row { flex-wrap: wrap; }
  .toc .d { margin-left: 0; width: 100%; text-align: left; }
}

@media screen {
  .links a, .cover .meta a { display: inline-block; padding: 2mm 0; }
}