/* Alec Dipasquale — portfolio. "Paper" palette: warm off-white, ink text, burnt-orange accent. */
:root{
  --bg:#F3EFE6; --bg-2:#EAE4D7; --card:#FFFDF8; --ink:#1A1A1A; --muted:#5E594F; --line:#DDD4C4;
  --accent:#D9481E; --accent-ink:#B23A15; --accent-soft:rgba(217,72,30,.10);
  --radius:14px; --shadow:0 10px 30px rgba(40,30,10,.08);
  --maxw:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 'Public Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
img,video{max-width:100%; display:block}
a{color:var(--accent-ink)}
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:20px; padding-right:20px}
.skip{position:absolute; left:-9999px} .skip:focus{left:12px; top:12px; background:var(--card); padding:8px 12px; z-index:100}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:'Archivo',sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
.nav{display:flex; gap:6px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:.93rem; padding:8px 14px; border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); background:var(--accent-soft)}
.nav a.cta{color:#fff; background:var(--accent)}
.nav a.cta:hover{filter:brightness(1.08); color:#fff}
.menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 11px; font:600 .9rem 'Archivo',sans-serif; cursor:pointer}
@media (max-width:720px){
  .menu-btn{display:block}
  .nav{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 20px 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
}

/* ---------- buttons, tags ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font:600 .95rem 'Archivo',sans-serif; text-decoration:none; padding:11px 18px; border-radius:10px; border:1.5px solid var(--accent); color:var(--accent-ink)}
.btn.primary{background:var(--accent); color:#fff}
.btn:hover{filter:brightness(1.1)}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font:500 .75rem 'IBM Plex Mono',monospace; color:var(--accent-ink); background:var(--accent-soft); padding:3px 9px; border-radius:999px}
.eyebrow{font:600 .74rem 'Public Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 12px}
.muted{color:var(--muted)}

/* ---------- home hero ---------- */
.hero{padding:72px 0 56px}
.hero .grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.4rem,5.6vw,4rem); letter-spacing:-.03em}
.hero h1 .hl{color:var(--accent-ink)}
.hero .lede{font-size:1.12rem; color:var(--muted); max-width:560px; margin:20px 0 28px}
.hero-media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#000; aspect-ratio:16/9}
.hero-media video{width:100%; height:100%; object-fit:cover}
.stats{display:flex; flex-wrap:wrap; gap:28px; margin-top:32px}
.stat b{display:block; font:700 1.6rem 'Archivo',sans-serif; color:var(--ink)}
.stat span{font-size:.85rem; color:var(--muted)}
@media (max-width:900px){ .hero .grid{grid-template-columns:1fr} .hero{padding:44px 0 32px} }

/* ---------- sections ---------- */
section{padding:56px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}

/* ---------- work cards ---------- */
.work-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.work-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s, border-color .25s, box-shadow .25s}
.work-card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow)}
.work-card .thumb{aspect-ratio:16/10; background:#0A0F0E; overflow:hidden; position:relative}
.work-card .thumb img,.work-card .thumb video{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.work-card:hover .thumb img{transform:scale(1.04)}
.work-card .thumb.top img{object-position:top}
.work-card .thumb .badge{position:absolute; left:14px; top:14px; font:600 .72rem 'Public Sans',sans-serif; letter-spacing:.06em; text-transform:uppercase; background:rgba(0,0,0,.65); color:#fff; padding:5px 10px; border-radius:999px; backdrop-filter:blur(6px)}
.work-card .body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1}
.work-card h3{font-size:1.3rem}
.work-card p{color:var(--muted); margin:0; font-size:.96rem}
.work-card .more{margin-top:auto; padding-top:6px; font-weight:600; color:var(--accent-ink); font-size:.92rem}
.work-card.feature{grid-column:1/-1; flex-direction:row}
.work-card.feature .thumb{flex:1.35; aspect-ratio:auto; min-height:320px}
.work-card.feature .body{flex:1; padding:32px; justify-content:center}
.work-card.feature h3{font-size:1.7rem}
@media (max-width:820px){ .work-grid{grid-template-columns:1fr} .work-card.feature{flex-direction:column} .work-card.feature .thumb{min-height:0; aspect-ratio:16/10} .work-card.feature .body{padding:22px} }

/* diagram thumbnails (no media) */
.thumb.diagram-thumb{display:grid; place-items:center; background:radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%), var(--bg-2)}
.flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; padding:20px}
.flow span{font:600 .8rem 'IBM Plex Mono',monospace; background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:8px; color:var(--ink)}
.flow span.hot{border-color:var(--accent); color:var(--accent-ink)}
.flow i{color:var(--accent); font-style:normal}

.mini-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.mini{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.mini h4{font-size:1.1rem; margin-bottom:4px}
.mini .when{font-size:.84rem; color:var(--muted); margin-bottom:10px}
.mini p{font-size:.94rem; color:var(--muted)}

/* ---------- project page ---------- */
.proj-hero{padding:56px 0 24px}
.back{display:inline-block; color:var(--muted); text-decoration:none; font-size:.9rem; margin-bottom:22px}
.back:hover{color:var(--ink)}
.proj-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em}
.proj-hero .lede{font-size:1.15rem; color:var(--muted); max-width:760px; margin:16px 0 24px}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:28px 0 0}
.facts div{background:var(--card); padding:14px 18px}
.facts dt{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.facts dd{margin:4px 0 0; font-weight:600}
.banner{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#000; margin:32px 0 0}
.banner img,.banner video{width:100%}

.prose{max-width:760px}
.prose h2{font-size:1.6rem; margin:0 0 14px}
.prose h3{font-size:1.15rem; margin:26px 0 8px}
.prose ul{padding-left:20px; margin:0 0 1em} .prose li{margin-bottom:8px}
.prose p,.prose li{color:color-mix(in srgb, var(--ink) 86%, var(--muted))}
.two-col{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:start}
.aside-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:84px}
.aside-card h4{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-family:'Public Sans',sans-serif}
.aside-card .tags{margin-bottom:18px}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} .aside-card{position:static} }

/* galleries */
.gallery{display:grid; gap:14px}
.gallery.phones{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
@media (max-width:820px){ .gallery.phones{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gallery.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gallery.wide a{aspect-ratio:4/3; background:var(--bg-2)}
.gallery.wide img{object-fit:contain}
.gallery a{display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000; cursor:zoom-in; transition:transform .25s, border-color .25s}
.gallery a:hover{transform:translateY(-3px); border-color:var(--accent)}
.gallery img{width:100%; height:100%; object-fit:cover}
.gallery figure{margin:0}
figcaption{font-size:.85rem; color:var(--muted); margin-top:8px}
.strip{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px}
.strip > *{flex:0 0 min(240px,62vw); scroll-snap-align:start}

.videos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.videos figure{margin:0}
.videos video{width:100%; border-radius:12px; border:1px solid var(--line); background:#000; aspect-ratio:9/16; object-fit:cover}

.demo{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); box-shadow:var(--shadow)}
.demo-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--muted); flex-wrap:wrap}
.demo iframe{display:block; width:100%; height:min(1060px,92vh); border:0; background:#fff}
@media (max-width:720px){ .demo iframe{height:620px} }

/* diagrams */
.diagram{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; overflow-x:auto}
.diagram svg{display:block; width:100%; min-width:680px; height:auto}
.diagram .box{fill:var(--bg-2); stroke:var(--line); stroke-width:1.5}
.diagram .box.hot{fill:var(--accent-soft); stroke:var(--accent)}
.diagram text{font-family:'Public Sans',sans-serif; fill:var(--ink)}
.diagram .t1{font-size:15px; font-weight:600}
.diagram .t2{font-size:12px; fill:var(--muted)}
.diagram .arrow{stroke:var(--accent); stroke-width:2; fill:none}
.diagram .ah{fill:var(--accent)}

.callout{border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 10px 10px 0; padding:14px 18px; margin:24px 0; font-size:.95rem}

.next-proj{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:28px; margin-top:24px; flex-wrap:wrap}
.next-proj a{text-decoration:none; color:var(--ink); font-family:'Archivo',sans-serif; font-weight:600; font-size:1.1rem}
.next-proj small{display:block; font:600 .74rem 'Public Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.next-proj a:hover{color:var(--accent-ink)}

/* about */
.timeline{border-left:2px solid var(--line); margin-left:6px; padding-left:26px; display:grid; gap:28px}
.timeline .item{position:relative}
.timeline .item::before{content:""; position:absolute; left:-33px; top:7px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--accent)}
.timeline h4{font-size:1.1rem}
.timeline .when{font-size:.86rem; color:var(--muted); margin:2px 0 8px}
.timeline p{color:var(--muted); margin:0}
.skills{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px}

/* contact / footer */
.contact-band{background:linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:48px; text-align:center}
.contact-band h2{font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:12px}
.contact-band p{color:var(--muted); max-width:560px; margin:0 auto 24px}
.contact-band .btns{justify-content:center}
@media (max-width:600px){ .contact-band{padding:32px 20px} }
.site-footer{border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:.88rem; margin-top:40px}
.site-footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.site-footer a{color:var(--muted); text-decoration:none; margin-left:16px} .site-footer a:first-child{margin-left:0}
.site-footer a:hover{color:var(--ink)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:100; background:rgba(5,8,8,.92); display:none; align-items:center; justify-content:center; padding:56px 64px}
.lb.open{display:flex}
.lb img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb button{position:absolute; background:rgba(255,255,255,.1); color:#fff; border:0; border-radius:999px; width:46px; height:46px; font-size:1.3rem; cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb .close{top:14px; right:16px} .lb .prev{left:12px; top:50%; transform:translateY(-50%)} .lb .next{right:12px; top:50%; transform:translateY(-50%)}
.lb .cap{position:absolute; bottom:16px; left:0; right:0; text-align:center; color:#cfd8d6; font-size:.9rem; padding:0 60px}
@media (max-width:600px){ .lb{padding:56px 10px} .lb .prev,.lb .next{top:auto; bottom:12px; transform:none} }

/* reveal on scroll */
/* only hide when the script is running (html.js), so content never stays invisible */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.in{opacity:1; transform:none}
@media print{ .js .reveal{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }
.gallery.wide.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ .gallery.wide.two{grid-template-columns:1fr} }
/* profile photo */
.avatar{border-radius:50%; object-fit:cover; border:2px solid var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.hero-id{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.hero-id .eyebrow{margin:0}
.about-id{display:flex; align-items:center; gap:24px; flex-wrap:wrap}

/* platform diagrams + panoramic page */
.diagram .h{font:700 17px 'Archivo',sans-serif; fill:var(--ink)}
.diagram .sub{font-size:12.5px; fill:var(--muted)}
.diagram .t{font-size:13px}
.diagram .num{font:500 12px 'IBM Plex Mono',monospace; fill:var(--accent-ink)}
.diagram .link{stroke:var(--line); stroke-width:1.5; fill:none}
.diagram + .diagram{margin-top:18px}
.stats-band{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:28px}
.stats-band div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.stats-band b{display:block; font:700 1.8rem 'Archivo',sans-serif; color:var(--accent-ink); line-height:1.1}
.stats-band span{font-size:.88rem; color:var(--muted)}
.band-note{font-size:.9rem; color:var(--muted); margin:12px 0 0; max-width:760px}
.gallery.three{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start}
.gallery.three a,.gallery.shots a,.gallery.light a{background:#fff}
.gallery.three img,.gallery.light img{object-fit:contain}
.split{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:820px){ .gallery.three{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr} }
.gallery.light img,.gallery.three img{height:auto; display:block}

/* reachmobi page */
.app-head{display:flex; align-items:center; gap:16px; margin-bottom:6px}
.app-head img{width:64px; height:64px; border-radius:16px; border:1px solid var(--line)}
.app-head h2{font-size:1.6rem; margin:0}
.app-head > div{min-width:0}
.app-head .pkg{overflow-wrap:anywhere; font:500 .8rem 'IBM Plex Mono',monospace; color:var(--muted)}
.app-stats{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
.app-stats span{font-size:.86rem; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.app-stats b{color:var(--accent-ink)}
.gallery.store{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.gallery.store.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:820px){ .gallery.store,.gallery.store.five{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- fluid layout: grows with the window ---------- */
html{font-size:clamp(15px, .55rem + .45vw, 19px)}
body{font-size:1rem}
.wrap{max-width:1720px; padding-left:clamp(20px,4vw,72px); padding-right:clamp(20px,4vw,72px)}
.site-header .wrap{height:clamp(60px,4.2vw,78px)}
section{padding:clamp(40px,5vw,96px) 0}
.hero{padding:clamp(44px,6vw,120px) 0 clamp(32px,4vw,72px)}
.hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px,4vw,88px)}
.hero h1{font-size:clamp(2.4rem,4.4vw,6rem)}
.hero .lede{font-size:clamp(1.05rem,.9rem + .4vw,1.4rem); max-width:46ch}
.proj-hero{padding-top:clamp(40px,5vw,96px)}
.proj-hero h1{font-size:clamp(2.2rem,4vw,4.8rem)}
.proj-hero .lede{font-size:clamp(1.05rem,.9rem + .35vw,1.35rem); max-width:72ch}
.prose,.band-note{max-width:76ch}
.two-col{gap:clamp(32px,4vw,88px)}
.work-grid{gap:clamp(18px,1.6vw,32px)}
@media (min-width:1500px){
  .work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .work-card.feature .thumb{min-height:clamp(320px,24vw,460px)}
  .gallery.phones,.gallery.store{grid-template-columns:repeat(8,minmax(0,1fr))}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){ .hero .grid{grid-template-columns:1fr} }

/* hero blocks share the page gutters */
.wrap.hero,.wrap.proj-hero{padding-left:clamp(20px,4vw,72px); padding-right:clamp(20px,4vw,72px)}

/* extras: resume link, video phones, principles */
.nav a.resume{border:1.5px solid var(--accent); color:var(--accent-ink)}
.gallery.clips{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.gallery.clips video{width:100%; border-radius:12px; border:1px solid var(--line); background:#0A0F0E; aspect-ratio:620/1234; object-fit:cover}
.gallery.clips figure{margin:0}
.principles{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.principles div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.principles h4{font-size:1.05rem; margin-bottom:6px}
.principles p{margin:0; color:var(--muted); font-size:.95rem}
@media (max-width:820px){ .gallery.clips{grid-template-columns:1fr 1fr} }
@media (min-width:1500px){ .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- bigger, more obvious clickables ---------- */
.site-header .wrap{height:clamp(68px,5vw,88px)}
.brand{font-size:clamp(1.1rem,.9rem + .4vw,1.35rem)}
.nav{gap:clamp(6px,.6vw,12px)}
.nav a{font-size:clamp(.98rem,.85rem + .3vw,1.12rem); padding:10px 18px; border-radius:10px; color:var(--ink)}
.nav a:hover{background:var(--accent-soft); color:var(--accent-ink)}
.nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 -2px 0 var(--accent)}
.nav a.resume{border-width:2px}
.nav a.cta{padding:10px 22px; box-shadow:0 4px 14px rgba(217,72,30,.28)}
.btn{font-size:clamp(1rem,.9rem + .3vw,1.15rem); padding:clamp(13px,1vw,17px) clamp(22px,1.8vw,32px); border-radius:12px; border-width:2px; transition:transform .15s, box-shadow .15s, filter .15s}
.btn.primary{box-shadow:0 6px 18px rgba(217,72,30,.30)}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(217,72,30,.25)}
.btns{gap:14px}
/* work cards: make the whole card read as a button */
.work-card .more{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin-top:auto; padding:10px 18px; border-radius:10px; background:var(--accent); color:#fff; font:600 .98rem 'Archivo',sans-serif; transition:gap .2s}
.work-card:hover .more{gap:14px}
.work-card:hover{box-shadow:0 14px 36px rgba(40,30,10,.14)}
.back{font-size:1rem; font-weight:600; color:var(--accent-ink); padding:8px 0}
.next-proj a{font-size:1.25rem}
.gallery a:hover{box-shadow:0 10px 26px rgba(40,30,10,.18)}
@media (max-width:720px){ .nav a{padding:14px 16px; font-size:1.05rem} }

/* hero: headline sized to stay 3-4 lines; tighter vertical rhythm */
.hero .grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center}
.hero h1{font-size:clamp(2.4rem,3.6vw,4.6rem); letter-spacing:-.025em}
.hero .lede{max-width:52ch}
section{padding:clamp(32px,3.6vw,72px) 0}
.contact-band{margin-top:clamp(8px,1.5vw,24px)}

/* phones/tablets: hero stacks (must come after the desktop hero rules above) */
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr; gap:28px}
  .hero h1{font-size:clamp(2.3rem,9vw,3.4rem)}
  .hero .lede{max-width:none}
  .stats{gap:18px 28px}
}
@media (max-width:420px){
  .hero-id .eyebrow{letter-spacing:.08em}
  .btns .btn{flex:1 1 auto; justify-content:center}
}

/* work section: built / history toggle */
#work .section-head{align-items:center}
.tabbar{display:inline-flex; gap:4px; padding:5px; background:var(--card); border:1.5px solid var(--line); border-radius:999px; box-shadow:var(--shadow)}
.tabbar button{border:0; background:transparent; color:var(--ink); font:600 clamp(.95rem,.85rem + .25vw,1.08rem) 'Archivo',sans-serif; padding:11px 22px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s}
.tabbar button:hover{background:var(--accent-soft); color:var(--accent-ink)}
.tabbar button[aria-selected="true"]{background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(217,72,30,.28)}
.tabpanel[hidden]{display:none!important}
.history{display:grid; gap:16px; max-width:1100px}
.job{display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2vw,30px)}
.job-when{font:600 .95rem 'IBM Plex Mono',monospace; color:var(--accent-ink); padding-top:6px}
.job h3{font-size:clamp(1.25rem,1rem + .6vw,1.6rem)}
.job-role{color:var(--muted); font-weight:600; margin:4px 0 10px}
.job ul{margin:0; padding-left:20px} .job li{margin-bottom:6px}
.job-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.job-links a{font-weight:600; text-decoration:none; color:var(--accent-ink); background:var(--accent-soft); padding:8px 14px; border-radius:10px}
.job-links a:hover{background:var(--accent); color:#fff}
@media (max-width:720px){ .job{grid-template-columns:1fr; gap:6px} .job-when{padding-top:0} .tabbar{width:100%} .tabbar button{flex:1; padding:11px 10px} }
#work{scroll-margin-top:clamp(76px,5.5vw,100px)}
/* education card: one row per degree, graduation year on the right */
.job.edu .degree{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--line)}
.job.edu .degree:first-child{padding-top:0}
.job.edu .degree:last-child{border-bottom:0; padding-bottom:0}
.job.edu .degree .job-role{margin:2px 0 0}
.job.edu .year{font:600 .95rem 'IBM Plex Mono',monospace; color:var(--accent-ink); white-space:nowrap}