:root{--text: #e9f3ff;--muted: #a8bfd8;--accent: #57b0ff;--accent-strong: #8fcbff;--ring: #8bc6ff36;--grid-unit: 24px;--grid-major-step: calc(var(--grid-unit) * 5);--radius: 0;--layout-columns: 56;--layout-top-pad-cells: 3;--layout-bottom-pad-cells: 4;--page-margin-left: 0px;--foreground-drift-y: 0px;--hero-start: 3;--hero-cells: 40;--intro-start: 3;--intro-span-cells: 52;--intro-main-start: 1;--intro-main-cells: 31;--intro-contact-start: 33;--intro-contact-cells: 20;--projects-start: 3;--projects-span-cells: 52;--project-left-start: 1;--project-right-start: 28;--project-card-cells: 25;--framework-start: 3;--framework-span-cells: 52;--framework-col-1-start: 1;--framework-col-2-start: 19;--framework-col-3-start: 37;--framework-card-cells: 16;--framework-head-cells: 30;--contact-label-cells: 3;--preview-height-cells: 15;--space-1: calc(var(--grid-unit) * 1);--space-2: calc(var(--grid-unit) * 2);--space-3: calc(var(--grid-unit) * 3);--space-4: calc(var(--grid-unit) * 4);--page-span: calc(var(--grid-unit) * var(--layout-columns));--hero-span: calc(var(--grid-unit) * var(--hero-cells));--intro-main-span: calc(var(--grid-unit) * var(--intro-main-cells));--intro-contact-span: calc(var(--grid-unit) * var(--intro-contact-cells));--intro-span: calc(var(--grid-unit) * var(--intro-span-cells));--projects-span: calc(var(--grid-unit) * var(--projects-span-cells));--project-card-span: calc(var(--grid-unit) * var(--project-card-cells));--framework-span: calc(var(--grid-unit) * var(--framework-span-cells));--framework-card-span: calc(var(--grid-unit) * var(--framework-card-cells));--framework-head-span: calc(var(--grid-unit) * var(--framework-head-cells));--contact-label-span: calc(var(--grid-unit) * var(--contact-label-cells));--preview-height: calc(var(--grid-unit) * var(--preview-height-cells));--page-grid-line: #8ecfff17;--page-grid-major: #8ecfff2b;--panel-grid-line: #8fcfff14;--panel-grid-major: #8fcfff1f;--page-dark: #061321;--panel-intro-top: #143452c7;--panel-intro-bottom: #112f4bcb;--panel-card-top: #123652c7;--panel-card-bottom: #102d47cb;--panel-framework-top: #12314fc7;--panel-framework-bottom: #0f2a43cb;--panel-framework-card-top: #163d61bf;--panel-framework-card-bottom: #11314dc4}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:Trebuchet MS,Segoe UI,Tahoma,sans-serif;overflow-x:hidden;background-color:var(--page-dark);background-image:linear-gradient(var(--page-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-line) 1px,transparent 1px),linear-gradient(var(--page-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-major) 1px,transparent 1px),linear-gradient(var(--page-dark),var(--page-dark));background-size:var(--grid-unit) var(--grid-unit),var(--grid-unit) var(--grid-unit),var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step),100% 100%;background-position:0 0,0 0,0 0,0 0,0 0}.intro-card,.card,.framework,.framework-card{position:relative;border:1px solid var(--ring);border-radius:var(--radius);background-size:auto,var(--grid-unit) var(--grid-unit),var(--grid-unit) var(--grid-unit),var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step);background-position:0 0,0 0,0 0,0 0,0 0;background-attachment:scroll,scroll,scroll,scroll,scroll}.page{display:grid;grid-template-columns:repeat(var(--layout-columns),var(--grid-unit));width:var(--page-span);margin:0;margin-left:var(--page-margin-left, 0px);padding-top:calc(var(--grid-unit) * var(--layout-top-pad-cells));padding-bottom:calc(var(--grid-unit) * var(--layout-bottom-pad-cells));row-gap:var(--space-1);transform:translate3d(0,var(--foreground-drift-y),0);will-change:transform}.hero{grid-column:var(--hero-start) / span var(--hero-cells)}.intro-grid{display:grid;grid-column:var(--intro-start) / span var(--intro-span-cells);grid-template-columns:repeat(var(--intro-span-cells),var(--grid-unit));align-items:start;column-gap:0;row-gap:var(--space-1)}.intro-grid>.intro-card:not(.contact-card){grid-column:var(--intro-main-start) / span var(--intro-main-cells)}.intro-grid>.contact-card{grid-column:var(--intro-contact-start) / span var(--intro-contact-cells)}.grid{display:grid;grid-column:var(--projects-start) / span var(--projects-span-cells);grid-template-columns:repeat(var(--projects-span-cells),var(--grid-unit));column-gap:0;margin-top:var(--space-2);row-gap:var(--space-2)}.grid>.card:nth-child(odd){grid-column:var(--project-left-start) / span var(--project-card-cells)}.grid>.card:nth-child(2n){grid-column:var(--project-right-start) / span var(--project-card-cells)}.framework{grid-column:var(--framework-start) / span var(--framework-span-cells);margin-top:var(--space-2);padding:calc(var(--space-1) - 1px);box-shadow:0 22px 30px -27px #000000f2}.framework-grid{display:grid;grid-template-columns:repeat(var(--framework-inner-span-cells),var(--grid-unit));column-gap:0;row-gap:var(--space-1);margin-top:var(--space-1)}.framework-grid>.framework-card:nth-child(3n+1){grid-column:var(--framework-col-1-start) / span var(--framework-card-cells)}.framework-grid>.framework-card:nth-child(3n+2){grid-column:var(--framework-col-2-start) / span var(--framework-card-cells)}.framework-grid>.framework-card:nth-child(3n){grid-column:var(--framework-col-3-start) / span var(--framework-card-cells)}h1{margin:0 0 var(--space-1);font-size:clamp(3rem,2.1rem + 3.2vw,5rem);line-height:1.05;letter-spacing:.01em}h2{margin:0 0 var(--space-1);font-size:1.14rem}.eyebrow{margin:0;color:#9cd2ff;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-weight:700}.subhead{margin:0;color:var(--muted);font-size:1.12rem}.url{margin:0 0 var(--space-1);color:var(--muted);font-size:.92rem}.intro-card{padding:var(--space-1);box-shadow:0 18px 30px -24px #000000d9;background-image:linear-gradient(180deg,var(--panel-intro-top),var(--panel-intro-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.intro-card h2{margin:0 0 var(--space-1);font-size:1.15rem}.intro-card p{margin:0;color:#e0efff;font-size:1.04rem;line-height:1.45}.intro-card p+p{margin-top:var(--space-1)}.intro-line{color:var(--accent-strong);font-weight:700}.contact-list{margin:0;padding:0;list-style:none}.contact-list li{display:grid;grid-template-columns:var(--contact-label-span) 1fr;gap:var(--space-1);align-items:baseline;padding:0}.contact-list li+li{margin-top:var(--space-1)}.contact-list span{color:#9fbbd8;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}.contact-list a{color:#e6f2ff;font-size:1.03rem;text-decoration:none}.contact-list a:hover{color:#9ed1ff}.card{background-image:linear-gradient(175deg,var(--panel-card-top),var(--panel-card-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px);box-shadow:0 22px 32px -26px #000000db;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease}.card:hover{box-shadow:0 24px 36px -22px #000}.preview-link{display:block;block-size:var(--preview-height);border-bottom:1px solid var(--ring)}.preview{width:100%;height:100%;object-fit:cover;display:block}.card-body{padding:var(--space-1)}.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-1)}.type-pill{display:inline-block;margin:0;padding:calc(var(--grid-unit) / 4) calc(var(--grid-unit) / 2);border-radius:999px;border:1px solid #8fcbff40;background:#8fcbff24;color:#9fd2ff;font-size:.78rem;font-weight:700}.type-pill.soft{background:#8fcbff14;color:#c8e6ff}.meta-links{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:var(--space-1) 0}.action{display:inline-block;text-decoration:none;font-weight:700;color:var(--accent)}.secondary{color:#bde2ff}.action:hover{color:var(--accent-strong)}.detail,.detail.open{padding-top:var(--space-1);opacity:1;max-height:none;overflow:visible}.detail h3{margin:var(--space-1) 0;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:#c7e4ff}.detail p{margin:0;color:#e3f0ff;font-size:1.03rem;line-height:1.45}.detail ul{margin:0;padding-left:var(--space-1);color:#e3f0ff;font-size:1.01rem;line-height:1.4}.detail li+li{margin-top:var(--space-1)}.framework{background-image:linear-gradient(155deg,var(--panel-framework-top),var(--panel-framework-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.framework-head{max-width:var(--framework-head-span)}.framework-head h2{margin:0 0 var(--space-1);font-size:1.45rem}.framework-head p{margin:0;color:var(--muted);font-size:1.02rem}.framework-card{padding:var(--space-1);background-image:linear-gradient(170deg,var(--panel-framework-card-top),var(--panel-framework-card-bottom)),linear-gradient(var(--panel-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-line) 1px,transparent 1px),linear-gradient(var(--panel-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--panel-grid-major) 1px,transparent 1px)}.framework-card h3{margin:0 0 var(--space-1);font-size:1.08rem;color:#deefff}.framework-card ul{margin:0;padding-left:var(--space-1);color:#e2f0ff;font-size:1.02rem;line-height:1.35}.framework-card li+li{margin-top:var(--space-1)}.reveal{opacity:1}[data-bp=tablet] .grid>.card,[data-bp=small-tablet] .grid>.card{grid-column:1 / span var(--project-card-cells)}[data-bp=tablet] .framework-grid>.framework-card:nth-child(odd),[data-bp=small-tablet] .framework-grid>.framework-card:nth-child(odd){grid-column:var(--framework-col-1-start) / span var(--framework-card-cells)}[data-bp=tablet] .framework-grid>.framework-card:nth-child(2n),[data-bp=small-tablet] .framework-grid>.framework-card:nth-child(2n){grid-column:var(--framework-col-2-start) / span var(--framework-card-cells)}[data-bp=mobile] .grid>.card{grid-column:1 / span var(--project-card-cells)}[data-bp=mobile] .framework-grid>.framework-card{grid-column:1 / span var(--framework-card-cells)}@media (max-width: 768px){.detail p,.detail ul,.framework-card ul{font-size:.96rem}}.page:after{content:"GRID UNIT : 24PX  ·  SCALE : 1 : 1  ·  DataFright Portfolio";grid-column:1 / -1;display:block;text-align:right;font-size:.6rem;font-family:Courier New,Courier,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.25;padding-top:var(--space-1)}