/* carlbeek.com — datasheet language
   Grid unit: 1ch × 1lh. Sheet is 100ch wide, 92ch of content. Rules are box-drawing glyphs.
   Below 640px the sheet stops scaling down and reflows: frames become stacked cards with real borders. */
@font-face{font-family:"Berkeley Mono";src:local("Berkeley Mono"),local("BerkeleyMono-Regular"),url(assets/BerkeleyMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Berkeley Mono";src:local("Berkeley Mono Bold"),local("BerkeleyMono-Bold"),url(assets/BerkeleyMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{--paper:#f3f1eb;--ink:#161513;--dim:#6d6a63;--desk:#d9d6cf;--lh:1.5}
*{box-sizing:border-box}
html{font-size:min(13px,calc(100vw / 70));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:"Berkeley Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:1rem;line-height:var(--lh);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:4ch 0}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3,p,ul{margin:0;font-size:inherit;font-weight:inherit}
ul{padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}

/* sheet */
.sheet{width:112ch;min-height:145ch;padding:3ch 4ch;background:var(--paper);box-shadow:0 1px 0 rgba(0,0,0,.2),0 12px 40px rgba(0,0,0,.12);display:flex;flex-direction:column}
.sheet>footer{margin-top:auto;padding-top:3lh}

/* rules */
.rule{position:relative;overflow:hidden;height:1lh}
.rule::before{content:"────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";position:absolute;left:0;top:0;white-space:pre}
.rule.dbl::before{content:"════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"}
.rule.dots{color:var(--dim)}
.rule.dots::before{content:"········································································································································································································"}

/* frames: grid of alternating 1ch rule tracks and content tracks.
   .row wrappers are display:contents on the grid, and become real boxes on mobile. */
.frame{display:grid}
.frame .row{display:contents}
.frame i{font-style:normal}
.frame .h{position:relative;overflow:hidden;height:1lh;min-width:0}
.frame .h::before{content:"────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";position:absolute;left:0;top:0;white-space:pre}
.frame .v{position:relative;overflow:hidden}
.frame .v::before{content:"│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A";position:absolute;left:0;top:0;white-space:pre;line-height:1}
.frame .c{white-space:pre}
.frame .cell{padding:0 1ch;min-width:0;overflow-wrap:anywhere}
.frame .cell.pre{white-space:pre}
.frame .cell.right{text-align:right}
.frame.spec{grid-template-columns:1ch 34ch 1ch 34ch 1ch 32ch 1ch}
.frame.projects{grid-template-columns:1ch 4ch 1ch 40ch 1ch 15ch 1ch 14ch 1ch 25ch 1ch}

/* spec frame */
.lbl{display:block;color:var(--dim)}

/* projects frame */
.projects .no,.projects .des,.projects .cell[data-l]{padding-top:1lh}
.projects .last .cell{padding-bottom:1lh}
.projects .name{display:block}
.projects .part{display:block;color:var(--dim);margin-bottom:1lh}
.projects .des .dim{display:block}
.projects .cell.span{grid-column:span 7}
.projects .h.w{grid-column:span 7}
.projects .also .cell{padding-top:0;padding-bottom:0}
.cell[data-l]::before{display:none;content:attr(data-l) "  ";color:var(--dim)}

/* type */
.dim{color:var(--dim)}
.b{font-weight:700}
.caps{text-transform:uppercase;letter-spacing:.06em}
.pretty{text-wrap:pretty}

/* masthead */
.mast{display:flex;justify-content:space-between;align-items:baseline;gap:2ch}
.title{display:grid;grid-template-columns:14ch 1fr auto;align-items:end;gap:2ch;margin:3lh 0 2lh}
.title .id{font-size:5.4em;line-height:.9;letter-spacing:-.03em}
.title .tag{text-align:right;max-width:34ch}
.title .role{line-height:1.25}

/* sections */
.sec{margin-top:2lh}
.sec h2{font-weight:700}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 4ch}
.two h2{margin-top:2lh}
.two h2:first-child,.two>div>h2{margin-top:0}
.sec p,.sec ul{margin-top:0}
.sec p+p{margin-top:1lh}
.sec ul li{padding-left:2ch;text-indent:-2ch}
.sec ul li::before{content:"• "}

/* footer */
.steps{display:grid;grid-template-columns:repeat(12,1fr);height:1lh;border:1px solid var(--ink)}
.steps span:nth-child(1){background:#161513}.steps span:nth-child(2){background:#2b2925}.steps span:nth-child(3){background:#403d38}.steps span:nth-child(4){background:#56524c}.steps span:nth-child(5){background:#6d6a63}.steps span:nth-child(6){background:#85827b}.steps span:nth-child(7){background:#9e9b94}.steps span:nth-child(8){background:#b7b4ad}.steps span:nth-child(9){background:#cfccc5}.steps span:nth-child(10){background:#e2dfd8}.steps span:nth-child(11){background:#f3f1eb}.steps span:nth-child(12){background:#fff}

/* ── mobile: stop shrinking, reflow ─────────────────────────────────────── */
@media (max-width:640px){
  html{font-size:13px}
  body{padding:0}
  .sheet{width:100%;min-height:100vh;padding:2lh 2ch;box-shadow:none}
  .mast{flex-wrap:wrap}
  .title{grid-template-columns:1fr;gap:1lh;margin:2lh 0 2lh}
  .title .role{order:1}
  .title .id{order:0;font-size:4.2em}
  .title .tag{order:2;text-align:left;max-width:none}
  .two{grid-template-columns:1fr}
  .two>div+div{margin-top:2lh}

  /* frames become stacked boxes drawn with borders instead of glyphs */
  .frame{display:block;border:1px solid var(--ink)}
  .frame>i,.frame .row>i{display:none}
  .frame .row{display:block;border-top:1px solid var(--ink)}
  .frame .row:first-of-type{border-top:0}
  .frame .cell{padding:.5lh 1.5ch}
  .spec .cell~.cell{border-top:1px dashed var(--dim)}
  .projects .row.head{display:none}
  .projects .cell.no{display:none}
  .projects .des{padding:.5lh 1.5ch .5lh}
  .projects .part{margin-bottom:.5lh}
  .projects .cell[data-l]{padding:0 1.5ch}
  .projects .cell[data-l]::before{display:inline}
  .projects .cell[data-l]:not([data-l="REF"]) br{display:none}
  .projects .cell[data-l] .dim::before{content:" · "}
  .projects .cell[data-l="REF"]{padding-bottom:.5lh}
  .projects .cell[data-l="REF"] br+a{margin-left:5ch}
}

@media print{
  @page{size:letter;margin:.5in}
  html{font-size:10.5pt}
  body{background:#fff;padding:0;display:block}
  .sheet{width:auto;min-height:auto;padding:0;background:#fff;box-shadow:none}
  a{text-decoration:none}
  a[href^="http"]::after{content:" <" attr(href) ">";color:var(--dim)}
  .steps{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}