/* =============================================================================
   Bryan Lee resume

   Warm document system. The palette returns to the previous sheet-on-desk
   direction, with print spacing and contact layout rebuilt for two-page A4.
   Kami remains the structural reference: serif rhythm, proof-first sections,
   and Role / Actions / Impact project blocks.

   Static HTML, no build step, screen-first and print-clean.
   ============================================================================= */

:root {
  /* Surface */
  --canvas: #faf7f0;
  --sheet: #fffdf8;

  /* Ink */
  --ink: #1b1a17;
  --ink-2: #3f3c36;
  --muted: #5c5950;
  --faint: #736e62;

  /* Signal */
  --accent: #b0492c;
  --accent-strong: #8c3a20;
  --accent-tint: #f4e6dc;
  --accent-edge: #e8d2c3;

  /* Lines */
  --border: #e7ddcd;
  --border-soft: #efe7d8;
  --rule-dot: #ddd3c2;

  /* Type */
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia,
           "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
          "Fira Code", Consolas, "Roboto Mono", monospace;

  /* Rhythm */
  --r: 5px;
  --sheet-pad: clamp(1.6rem, 4.4vw, 4.25rem);
  --gap-section: clamp(1.9rem, 3.4vw, 2.75rem);
  --shadow: 0 1px 2px rgba(43, 26, 17, .05),
            0 12px 40px -14px rgba(43, 26, 17, .18);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.hl { color: var(--accent); font-weight: 500; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Sheet */

.sheet {
  width: min(820px, calc(100% - 2rem));
  max-width: 820px;
  margin: clamp(1.5rem, 4vw, 56px) auto;
  background: var(--sheet);
  padding: var(--sheet-pad);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(43, 26, 17, .03),
              0 8px 28px -20px rgba(43, 26, 17, .10);
  animation: rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */

.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 1.5rem 2rem;
  padding-bottom: 1.15rem;
  border-bottom: 2px solid var(--accent);
}

.identity { min-width: 0; }

.name {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.45rem, 6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}

.name .alias {
  display: inline-block;
  margin-left: .5rem;
  color: var(--muted);
  font-size: .42em;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: baseline;
}

.tagline {
  max-width: 48ch;
  margin-top: .7rem;
  color: var(--ink-2);
  font-size: 1.04rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.contact {
  min-width: 10.8rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.78;
  text-align: right;
}

.contact .role {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .82rem;
  font-variant: all-small-caps;
  letter-spacing: .08em;
}

.contact a {
  color: var(--ink-2);
  white-space: nowrap;
}

.contact a:hover { color: var(--accent); }

/* Metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.35rem 0 .2rem;
}

.metric { min-width: 0; }

.metric .val {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.metric .val .u {
  margin-left: .08em;
  font-size: .62em;
}

.metric .lbl {
  display: block;
  margin-top: .4rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
  text-wrap: pretty;
  white-space: nowrap;
}

/* Sections */

section { margin-top: var(--gap-section); }

.sec-title {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.05rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.sec-title .meta {
  margin-left: auto;
  color: var(--faint);
  font-family: var(--serif);
  font-size: .92rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.lead {
  max-width: 70ch;
  color: var(--ink-2);
  font-size: 1.01rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Experience */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-bottom: 1.45rem;
}

.tl-step { min-width: 0; }

.tl-head {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-bottom: .25rem;
}

.tl-year {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
}

.tl-name {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
}

.tl-body {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.project {
  padding: 1rem 0;
  border-top: 1px solid var(--border-soft);
}

.project:first-of-type {
  border-top: 0;
  padding-top: .15rem;
}

.proj-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  margin-bottom: .55rem;
}

.proj-name {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 600;
}

.proj-kind {
  color: var(--muted);
  font-size: 1rem;
}

.proj-role {
  margin-left: auto;
  padding: .1rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .78rem;
  font-variant: all-small-caps;
  letter-spacing: .05em;
  white-space: nowrap;
}

.rai {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .15rem .9rem;
}

.rai dt {
  padding-top: .14rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .82rem;
  font-variant: all-small-caps;
  font-weight: 600;
  letter-spacing: .06em;
}

.rai dd {
  margin: 0 0 .48rem;
  color: var(--ink-2);
  font-size: .94rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.rai dd:last-child { margin-bottom: 0; }

/* Open source */

.os-intro {
  max-width: 72ch;
  margin-bottom: 1.1rem;
  color: var(--ink-2);
  font-size: .98rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.os-intro .strong {
  color: var(--ink);
  font-weight: 600;
}

.os-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.2rem;
}

.os-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .9rem;
  padding: .7rem 0;
  border-bottom: 1px dotted var(--rule-dot);
}

.os-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .15rem;
}

.os-name {
  font-size: .98rem;
  font-weight: 600;
}

.os-desc {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.os-stat {
  flex-shrink: 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .78rem;
  white-space: nowrap;
}

.os-stat.flag {
  color: var(--accent);
  font-weight: 500;
}

.reference-note {
  margin-top: 1.1rem;
  padding: .52rem .7rem .52rem .9rem;
  border-left: 1px solid var(--accent-strong);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-tint) 42%, var(--sheet)) 0%,
    color-mix(in srgb, var(--accent-tint) 18%, var(--sheet)) 42%,
    transparent 100%);
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.48;
}

.reference-note p {
  margin: 0;
  text-wrap: pretty;
}

.reference-note a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-edge) 84%, transparent);
  text-underline-offset: 2px;
}

.reference-note .em {
  color: var(--accent-strong);
  font-weight: 600;
}

/* Judgment */

.convictions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.45rem;
}

.conv { min-width: 0; }

.conv h3 {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.25;
}

.conv h3 .ct { text-wrap: balance; }

.conv h3 .when {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
}

.conv p {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

/* Skills */

.skills {
  display: grid;
  gap: 0;
}

.skill {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  align-items: baseline;
  gap: .9rem;
  padding: .6rem 0;
  border-bottom: 1px dotted var(--rule-dot);
}

.skill:last-child { border-bottom: 0; }

.skill dt {
  color: var(--muted);
  font-family: var(--serif);
  font-size: .86rem;
  font-variant: all-small-caps;
  font-weight: 600;
  letter-spacing: .05em;
}

.skill dd {
  margin: 0;
  color: var(--ink-2);
  font-size: .92rem;
  line-height: 1.5;
}

/* Education */

.edu {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dotted var(--rule-dot);
}

.edu:last-child { border-bottom: 0; }

.edu .school {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.edu .major {
  color: var(--muted);
  font-size: .88rem;
}

/* Footer */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--gap-section);
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: .76rem;
}

/* Responsive */

@media (max-width: 720px) {
  body { font-size: 14.5px; }

  .sheet {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 1.45rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact {
    min-width: 0;
    text-align: left;
  }

  .metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
  }

  .metric .lbl { white-space: normal; }

  .sec-title {
    flex-wrap: wrap;
    gap: .35rem .65rem;
  }

  .sec-title .meta {
    margin-left: 0;
    white-space: normal;
  }

  .timeline,
  .os-grid,
  .convictions {
    grid-template-columns: 1fr;
  }

  .rai,
  .skill {
    grid-template-columns: 1fr;
    gap: .1rem;
  }

  .proj-role {
    margin-left: 0;
  }

  .rai dt { padding-top: .35rem; }
}

/* Motion preferences */

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  * { transition: none !important; }
}

/* Save-PDF affordance */

.actions {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--canvas);
  box-shadow: var(--shadow);
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-print:hover {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.btn-print:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .actions { display: none; }
}

/* Print */

@page { size: A4; margin: 12mm 14mm; }

@media print {
  :root { --sheet: #ffffff; }

  html,
  body {
    background: #ffffff;
    color: var(--ink);
    font-size: 10pt;
    line-height: 1.4;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .sheet {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }

  .head {
    grid-template-columns: minmax(0, 1fr) 42mm;
    gap: 7mm;
    padding-bottom: 7pt;
  }

  .name {
    font-size: 24pt;
    line-height: 1.02;
  }

  .name .alias {
    margin-left: 4pt;
    font-size: .38em;
  }

  .tagline {
    max-width: 58ch;
    margin-top: 4pt;
    font-size: 9.5pt;
    line-height: 1.36;
  }

  .contact {
    min-width: 0;
    align-self: start;
    font-size: 7.6pt;
    line-height: 1.5;
  }

  .contact .role {
    margin-bottom: 2pt;
    font-size: 7pt;
  }

  .metrics {
    gap: 9pt;
    margin: 6pt 0 5.5pt;
  }

  .metric .val { font-size: 11.4pt; }
  .metric .lbl { margin-top: 2pt; font-size: 6.9pt; }

  section { margin-top: 12pt; }

  .sec-title {
    margin-bottom: 5pt;
    padding-bottom: 2.5pt;
    font-size: 13.4pt;
  }

  .sec-title .meta { font-size: 8pt; }

  .lead {
    max-width: none;
    font-size: 9.2pt;
    line-height: 1.42;
  }

  .timeline {
    gap: 9pt;
    margin-bottom: 7pt;
  }

  .tl-head { margin-bottom: 1.5pt; }
  .tl-year { font-size: 6.7pt; }
  .tl-name { font-size: 8.2pt; }
  .tl-body { font-size: 7.4pt; line-height: 1.34; }

  .project { padding: 11.4pt 0; }

  .proj-head {
    margin-bottom: 3.2pt;
    gap: 2pt 5pt;
  }

  .proj-name { font-size: 9.4pt; }
  .proj-kind { font-size: 8.5pt; }
  .proj-role { padding: .8pt 4pt; font-size: 6.4pt; }

  .rai {
    grid-template-columns: 40pt 1fr;
    gap: .8pt 8pt;
  }

  .rai dt {
    padding-top: 1pt;
    font-size: 6.8pt;
  }

  .rai dd {
    margin-bottom: 4.2pt;
    font-size: 8.75pt;
    line-height: 1.42;
  }

  section[aria-labelledby="s-os"] {
    break-before: page;
    margin-top: 0;
  }

  section[aria-labelledby="s-conv"],
  section[aria-labelledby="s-skills"],
  section[aria-labelledby="s-edu"] {
    margin-top: 16pt;
  }

  .os-intro {
    max-width: none;
    margin-bottom: 7pt;
    font-size: 9pt;
    line-height: 1.42;
  }

  .os-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .os-item { padding: 5.4pt 0; }
  .os-name { font-size: 9pt; }
  .os-desc { font-size: 7.8pt; line-height: 1.36; }
  .os-stat { font-size: 7.2pt; }

  .reference-note {
    margin-top: 7pt;
    padding: 4pt 5pt 4pt 7pt;
    border-left: 1px solid var(--accent-strong);
    background: none;
    font-size: 8pt;
    line-height: 1.34;
  }

  .reference-note p {
    margin: 0;
  }

  .convictions {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .conv {
    padding: 4.6pt 0;
    border-bottom: 1px dotted var(--rule-dot);
  }

  .conv:last-child { border-bottom: 0; }

  .conv h3 {
    margin-bottom: 2pt;
    font-size: 8.9pt;
  }

  .conv h3 .when { font-size: 6.5pt; }
  .conv p { font-size: 8.05pt; line-height: 1.38; }

  .skill {
    grid-template-columns: 70pt 1fr;
    gap: 7pt;
    padding: 5.2pt 0;
  }

  .skill dt { font-size: 7pt; }
  .skill dd { font-size: 8.25pt; line-height: 1.36; }

  .edu { padding: 4pt 0; }
  .edu .school { font-size: 8.7pt; }
  .edu .major { font-size: 8pt; }

  .colophon {
    display: flex;
    margin-top: 11pt;
    padding-top: 5pt;
    font-size: 6.8pt;
  }

  .timeline,
  .tl-step,
  .proj-head,
  .rai dd,
  .os-item,
  .reference-note,
  .conv,
  .skill,
  .metric,
  .edu {
    break-inside: avoid;
  }

  .proj-head,
  .sec-title {
    break-after: avoid;
  }

  .actions { display: none; }
}