/* jackceriello.com: same type and colors as Jack Hub, laid out like drawing sheets. */
:root{
  --paper:#EEF1F6;--sheet:#FFFFFF;--ink:#131927;--ink-2:#465068;--ink-3:#7D879B;--rule:#DADFE8;
  --accent:#2747C8;--grid:rgba(39,71,200,.07);--fill:#FFF1B8;
  --c-blue:#2F62D9;--c-teal:#0B8794;--c-violet:#7B4FD6;--c-orange:#DD6418;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1118;--sheet:#141A25;--ink:#E5E9F1;--ink-2:#A3ACBF;--ink-3:#6B7588;--rule:#253044;
    --accent:#8EA6FF;--grid:rgba(142,166,255,.06);--fill:#4A3F12;
    --c-blue:#6F9BFF;--c-teal:#3CC3CE;--c-violet:#AE8DFF;--c-orange:#F48C4A;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;max-width:1200px;margin-inline:auto;padding:28px 20px 40px;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;display:grid;gap:44px}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
mark.fill{background:var(--fill);color:inherit;padding:0 3px;border-radius:3px;outline:1px dashed color-mix(in srgb,var(--ink) 35%,transparent)}

.sheet{position:relative;background:var(--sheet);border:1px solid var(--rule);border-radius:10px}

/* Hero: drawing sheet with a title block */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:40px 36px 34px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:16px 16px;background-position:-1px -1px}
.kicker{margin:0 0 10px;font-family:var(--font-data);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
h1{margin:0;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:clamp(44px,8vw,84px);line-height:.92;letter-spacing:-.025em}
.lede{margin:18px 0 0;max-width:56ch;font-size:18px;color:var(--ink-2)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--sheet);border:1px solid var(--rule);border-radius:8px}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{color:var(--sheet);background:var(--ink);border-color:var(--ink)}
.titleblock{align-self:end;border:1.5px solid var(--ink);border-radius:2px;font-family:var(--font-data);font-size:12px;background:var(--sheet)}
.titleblock dl{margin:0;display:grid}
.titleblock div{display:grid;grid-template-columns:92px 1fr;border-top:1px solid var(--ink)}
.titleblock div:first-child{border-top:0}
.titleblock dt{padding:6px 8px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;border-right:1px solid var(--ink)}
.titleblock dd{margin:0;padding:6px 8px;color:var(--ink);font-weight:500}

/* Sections */
.section-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
h2{margin:0;font-family:var(--font-display);font-stretch:115%;font-weight:760;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.rule{flex:1;height:1px;background:var(--rule)}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.project{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.photo{display:grid;place-items:center;aspect-ratio:16/9;padding:16px;text-align:center;font-size:14px;color:var(--ink-3);background:var(--paper);border-bottom:1px solid var(--rule)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo:has(img){padding:0}
.body{padding:18px 20px 20px;display:grid;align-content:start;gap:8px}
.tag{margin:0;font-family:var(--font-data);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
h3{margin:0;font-family:var(--font-display);font-stretch:112%;font-weight:740;font-size:21px;line-height:1.2}
.body p{margin:0;color:var(--ink-2)}
.specs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.specs li{padding:3px 9px;font-family:var(--font-data);font-size:12px;color:var(--ink-2);border:1px solid var(--rule);border-radius:999px}
.project:nth-child(4n+1) .tag{color:var(--c-teal)}
.project:nth-child(4n+2) .tag{color:var(--c-blue)}
.project:nth-child(4n+3) .tag{color:var(--c-violet)}
.project:nth-child(4n+4) .tag{color:var(--c-orange)}
.about{padding:22px 24px;display:grid;gap:10px}
.about p{margin:0;max-width:70ch;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--font-data);font-size:13px;color:var(--ink-3)}

@media (max-width:760px){
  body{padding:16px 16px 32px;gap:32px}
  .hero{grid-template-columns:minmax(0,1fr);padding:28px 20px 22px}
  .titleblock{align-self:start}
  .projects{grid-template-columns:minmax(0,1fr)}
}

/* Experience and project cards without photos; dates and bullet points */
.project.wide{grid-column:1/-1}
.when{margin:-2px 0 2px;font-family:var(--font-data);font-size:12.5px;color:var(--ink-3)}
.points{margin:2px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--ink-2)}
.points li::marker{color:var(--ink-3)}
.skills{margin:0;display:grid;gap:10px}
.skills div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding-top:10px;border-top:1px solid var(--rule)}
.skills div:first-child{border-top:0;padding-top:0}
.skills dt{font-family:var(--font-data);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.skills dd{margin:0;color:var(--ink-2)}
@media (max-width:760px){.skills div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* One-day builds (three across) and section intros */
.intro{margin:-4px 0 16px;color:var(--ink-2)}
.projects.small{grid-template-columns:repeat(3,minmax(0,1fr))}
.projects.small .photo{aspect-ratio:4/3}
@media (max-width:900px){.projects.small{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.projects.small{grid-template-columns:minmax(0,1fr)}}
main{display:grid;gap:44px}
@media (max-width:760px){main{gap:32px}}

/* Card front: one-line summary, key points, skill tags; the rest opens under "More details" */
.body .sum{color:var(--ink);font-size:16.5px;line-height:1.45}
.keys{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.keys li{position:relative;padding-left:18px;color:var(--ink);font-size:15px;line-height:1.4}
.keys li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.project:nth-child(4n+1) .keys li::before{background:var(--c-teal)}
.project:nth-child(4n+2) .keys li::before{background:var(--c-blue)}
.project:nth-child(4n+3) .keys li::before{background:var(--c-violet)}
.project:nth-child(4n+4) .keys li::before{background:var(--c-orange)}
.more{margin-top:6px;border-top:1px solid var(--rule)}
.more summary{display:flex;align-items:center;gap:8px;padding:10px 0 0;cursor:pointer;list-style:none;font-family:var(--font-data);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:16px;line-height:1}
.more[open] summary::after{content:"−"}
.more[open] summary{padding-bottom:8px}
.more .points{font-size:15px;line-height:1.55}
.projects{align-items:start}

/* Screenshot galleries (software cards) and the build video */
.photo video{display:block;width:100%;height:100%;object-fit:cover}
.photo:has(video){padding:0;overflow:hidden;border-radius:10px 10px 0 0}
.shots{margin:0;padding:12px 12px 0;display:grid;gap:8px}
.shot-main{display:block;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--paper)}
.shot-main img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.shot-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.shot-thumbs:has(button:only-child){display:none}
.shot-thumbs button{display:grid;gap:3px;padding:0;font:inherit;text-align:left;color:var(--ink-3);background:none;border:0;cursor:pointer}
.shot-thumbs img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border:1px solid var(--rule);border-radius:4px;opacity:.65;transition:opacity .15s}
.shot-thumbs span{font-family:var(--font-data);font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-thumbs button:hover img{opacity:1}
.shot-thumbs button[aria-pressed="true"] img{opacity:1;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.shot-thumbs button[aria-pressed="true"] span{color:var(--ink)}
.shots figcaption{font-family:var(--font-data);font-size:11px;color:var(--ink-3)}

/* Motion (skipped for reduced motion; nothing is hidden without JS) */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes row{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes grid-in{from{background-size:4px 4px;opacity:.4}to{background-size:16px 16px;opacity:1}}
.js:not(.still) .hero{animation:grid-in .9s cubic-bezier(.2,.7,.2,1) both}
.js:not(.still) .hero-main>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.js:not(.still) .hero-main>:nth-child(2){animation-delay:.08s}
.js:not(.still) .hero-main>:nth-child(3){animation-delay:.16s}
.js:not(.still) .hero-main>:nth-child(4){animation-delay:.24s}
.js:not(.still) .titleblock div{animation:row .45s ease-out both}
.js:not(.still) .titleblock div:nth-child(1){animation-delay:.35s}
.js:not(.still) .titleblock div:nth-child(2){animation-delay:.42s}
.js:not(.still) .titleblock div:nth-child(3){animation-delay:.49s}
.js:not(.still) .titleblock div:nth-child(4){animation-delay:.56s}
.js:not(.still) .titleblock div:nth-child(5){animation-delay:.63s}
.js:not(.still) main .sheet,.js:not(.still) .intro{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms),border-color .2s,box-shadow .2s}
.js:not(.still) main .sheet.in,.js:not(.still) .intro.in{opacity:1;transform:none}
.js:not(.still) .section-head .rule{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s}
.js:not(.still) .section-head.in .rule{transform:none}
@media (hover:hover){main .project:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));box-shadow:0 6px 24px -14px var(--accent)}}

/* CAD crosshair on the hero */
.hero{overflow:hidden}
.xhair{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.hero:hover .xhair{opacity:1}
.xh-h,.xh-v{position:absolute;background:var(--accent);opacity:.35}
.xh-h{left:0;right:0;height:1px;top:var(--y,-10px)}
.xh-v{top:0;bottom:0;width:1px;left:var(--x,-10px)}
.xh-read{position:absolute;left:calc(var(--x,0px) + 8px);top:calc(var(--y,0px) + 6px);font-family:var(--font-data);font-size:10.5px;letter-spacing:.06em;color:var(--accent);white-space:pre}
.hero>:not(.xhair){position:relative}
@media (hover:none){.xhair{display:none}}

/* Title block rows stay on one line when the hero is side by side */
@media (min-width:761px){.titleblock dd{white-space:nowrap}}

/* Wide cards with a gallery: pictures left, text right */
.shot-thumbs{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.project.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.project.split .shots{padding:16px 0 16px 16px}
.shots.photos .shot-main img{aspect-ratio:4/3;object-position:center}
.shots.photos .shot-thumbs img{object-position:center}
@media (max-width:760px){.project.split{grid-template-columns:minmax(0,1fr)}.project.split .shots{padding:12px 12px 0}}

/* LinkedIn posts: a row you can swipe or scroll sideways */
.posts{display:grid;grid-auto-flow:column;grid-auto-columns:min(400px,86vw);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;scrollbar-width:thin}
.post{scroll-snap-align:start;overflow:hidden;background:#fff}
.post iframe{display:block;width:100%;height:var(--h,628px);border:0}

/* Keep wide rows (like the LinkedIn strip) from stretching the page */
body,main{grid-template-columns:minmax(0,1fr)}

/* Jump links land with the section title a little below the top of the screen */
section[id]{scroll-margin-top:28px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.js:not(.still) .titleblock div:nth-child(6){animation-delay:.70s}
.js:not(.still) .titleblock div:nth-child(7){animation-delay:.77s}