/* the zoom stage: the camera, the frame, and the pager. Loaded after the sheet styles. */
  body { background: #ffe9d6; overflow-x: hidden; }
  #grid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }
  #view { position: fixed; top: 0; bottom: 0; left: 0; right: var(--rail); z-index: 2; overflow: hidden; perspective: 2400px; pointer-events: none; }
  #tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

  .layer { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; will-change: transform; }
  .layer > .sheet { position: absolute; inset: 0; background: var(--ground); }
  .layer > .skel { z-index: 1; }
  .layer > .final { z-index: 2; }
  .layer.thumb, .layer.thumb * { pointer-events: none !important; }
  /* a travelling sheet carries only its content; the ground behind it supplies the color, so no box edge is ever visible */
  .layer.thumb .sheet { background: transparent !important; box-shadow: none !important; }
  .scan { position: absolute; left: -16px; right: -16px; height: 2px; background: #ff7a33; z-index: 4; pointer-events: none; }

  /* drawing chrome, outside the sheet edge */
  .label { position: absolute; left: 0; right: 0; top: -40px; display: flex; justify-content: space-between; font: 12px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(244,238,226,.5); }
  .label b { color: #ff7a33; font-weight: 400; margin-right: 14px; }
  .dim { position: absolute; left: 0; right: 0; bottom: -36px; height: 12px; border-left: 1px solid rgba(244,238,226,.3); border-right: 1px solid rgba(244,238,226,.3); }
  .dim::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: rgba(244,238,226,.2); }
  .dim span { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); background: var(--void); padding: 0 12px; font: 11px var(--f-mono); letter-spacing: .16em; color: rgba(244,238,226,.45); }

  /* the window into the next sheet */
  /* the chip sits under the sheet's own elements, so all that shows is a sliver; scrolling brings it forward as it grows */
  .portal { position: absolute; z-index: -1; cursor: zoom-in; pointer-events: auto; border-radius: 1px; background: #fffdf8; padding: 0; border: 0; box-sizing: border-box; }
  .zooming .portal { z-index: 50; outline: 0; }
  .zooming .portal-cap { display: none; }
  .portal-cap { opacity: 0; transition: opacity .2s; pointer-events: none; background: #17140f; color: #fff !important; padding: 4px 9px; border-radius: 999px; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 12px); white-space: nowrap; font: 9.5px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
  .portal-cap b { color: var(--ink); font-weight: 400; margin-left: 6px; }
  .portal:hover .portal-cap { opacity: 1; }
  .portal-cap b { color: #fff !important; }

  /* the unrendered sheet: its own layout, as wireframe */
  .skel { --ink: #17140f; --rule: rgba(23,20,15,.25); --hair: rgba(23,20,15,.1); background: var(--ground) !important; pointer-events: none; }
  .skel * { color: transparent !important; border-color: rgba(23,20,15,.12) !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; animation: none !important; }
  .skel :is(.cv h1,.cv p,.cv .btn,.ide-tree,.ide-left,.ide-term,.ide-status,.ide-title,.ide-act,h1,h2,h3,p,b,small,li,.mono,.btn,.claim,.lead,.vsc,.vsc-tree,.vsc-tabs,.vsc-term,.vsc-status,.ln code,.core,.node i,.pitch h3,.pitch p,.photo-layer,.app,.side,.kpi,.chip,.comp,.token,.note,.index,.phone,.big-phone,.tile,.fcard,.compose,.field,.sk,.pill,.socials2 a,.layers) { outline: 1.5px solid rgba(23,20,15,.2); outline-offset: -1px; background: rgba(23,20,15,.035) !important; border-radius: 3px; }
  .skel :is(.btn,.sheet-n,.stmt h2) { outline-color: rgba(232,85,31,.6); }
  .skel :is(img.mark,.mark.tile) { object-position: -999px; outline: 1px solid rgba(23,20,15,.2); }
  .skel :is(.portal, canvas, .portal-cap, .notes, .cursor, .sel, .fx-cursor, .fx-sel, .fx-hover, .fx-gap, svg, .graph, .cork) { display: none !important; }
  .skel :is(.note,.index) { transform: none !important; }
  .frame { position: fixed; inset: 0; z-index: 80; pointer-events: none; color: #17140f; }
  .brand { position: absolute; left: 34px; top: 22px; display: flex; gap: 12px; align-items: center; pointer-events: auto; }
  .jp { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1.5px #fff, 0 2px 8px -2px rgba(23,20,15,.35); background: #17140f; }
  .who { font: 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
  .who em { font-style: normal; color: rgba(23,20,15,.55); }
  .who em b { color: #17140f; font-weight: 600; }
  /* the pager keeps its own gutter: sheets are laid out in the space left of it, so it never sits on content */
  /* the pager keeps its own gutter: sheets are laid out in the space left of it, so it never sits on content */
  .pager { position: absolute; right: 0; top: 0; bottom: 0; width: var(--rail); display: flex; flex-direction: column; justify-content: center; pointer-events: auto; }
  .pager-wheel { position: relative; }
  .pager button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 18px 0 22px; font: 10.5px var(--f-mono); letter-spacing: .12em; color: rgba(23,20,15,.38); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s, color .2s; }
  .pager button span { font: 500 12px var(--f-sans); letter-spacing: 0; white-space: nowrap; }
  .pager button:hover, .pager button[aria-current] { color: #17140f; }
  .pager .marker { position: absolute; left: 10px; top: 0; width: 7px; height: 2px; margin-top: 13px; background: #17140f; will-change: transform; transition: opacity .3s; }
  /* hover rolls the name like an odometer wheel: rows stay in one straight column, nothing bends */
  .pager button span { position: relative; display: inline-block; overflow: hidden; height: 16px; line-height: 16px; }
  .pager button span b { display: block; font-weight: 500; transition: transform .45s cubic-bezier(.65,0,.2,1); }
  .pager button span b + b { position: absolute; left: 0; top: 100%; color: #e8551f; }
  .pager button:hover span b { transform: translateY(-100%); }
  .pager.dial button:not(:hover) { opacity: .45; }
  .pager .marker { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  /* the type: DM Serif Display for headlines, Figtree for reading, DM Sans for interface labels */
  :root { --rail: 170px; --f-display: "DM Serif Display", Georgia, serif; --f-sans: "DM Sans", system-ui, sans-serif; --f-serif: "Figtree", system-ui, sans-serif; --w-display: 400; }
  .cv h1, .stmt h2, .readme h2, .pitch h3, .main-head h3 { font-weight: var(--w-display, 700) !important; }
  .cv h1 { text-transform: none; letter-spacing: -.01em; }

/* education's paper grain carries past the sheet to the window edges, so the sheet and the ground read as one surface */
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); opacity: 0; transition: opacity .5s; }
body.on-edu::after { opacity: 1; }