:root {
  --paper:#f2f5f8; --ink:#17232f; --muted:#526170; --line:#d7e0e8; --accent:#205dc5;
  --glass:rgba(255,255,255,.72); --glass-edge:rgba(255,255,255,.92);
  --shadow:0 12px 40px -24px rgba(28,51,75,.24),inset 0 1px 0 rgba(255,255,255,.95);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --header-height:64px; --header-top:16px; --header-bottom:calc(var(--header-top) + var(--header-height)); --project-offset:96px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-bottom) + 24px); background:var(--paper); }
body { position:relative; isolation:isolate; margin:0; color:var(--ink); font:400 var(--text-base)/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
body:before { content:''; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 10% 4%,#d9e7f5a6,transparent 48%),radial-gradient(ellipse at 94% 48%,#dce5f7a6,transparent 48%),linear-gradient(125deg,#f5f7f9,#edf2f7 60%,#f7f8fa); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; cursor:pointer; border:0; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:#d5e2fb; }
h1,h2,h3,p,figure { margin-top:0; }
h1,h2,h3 { line-height:1.2; font-weight:700; }
h1 { font-size:clamp(3rem,5.6vw,4.75rem); letter-spacing:-.055em; line-height:1.05; margin-bottom:24px; font-weight:650; }
h2 { font-size:2.125rem; letter-spacing:-.035em; margin-bottom:0; font-weight:650; }
h3 { font-size:1.625rem; letter-spacing:-.025em; }
.wrap { max-width:1240px; width:calc(100% - 96px); margin-inline:auto; }
.mono { font:500 var(--text-xs)/1.5 var(--mono); letter-spacing:.04em; }
.eyebrow { font:600 var(--text-xs)/1.5 var(--sans); letter-spacing:.095em; }
.eyebrow { color:var(--muted); margin:0; }
.skip { position:fixed; top:-100px; left:20px; z-index:60; background:var(--ink); color:white; padding:12px; }
.skip:focus { top:12px; }

/* One persistent navigation layer, with a project index inside the work section. */
.site-header { position:sticky; top:var(--header-top); z-index:30; height:var(--header-height); width:calc(100% - 48px); max-width:1288px; margin:16px auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 12px 8px 14px; border:1px solid var(--glass-edge); border-radius:24px; background:rgba(250,252,255,.78); box-shadow:0 8px 32px -16px #21364b35,inset 0 1px 0 white; -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); }
.wordmark { display:flex; align-items:center; gap:12px; font-size:var(--text-sm); font-weight:650; white-space:nowrap; }
.monogram { width:38px; height:38px; display:grid; place-items:center; border:1px solid #ffffff50; border-radius:13px; background:linear-gradient(145deg,#33495d,#172838); box-shadow:0 3px 8px #21364b20,inset 0 1px 0 #ffffff40; color:white; font-size:var(--text-sm); letter-spacing:-.025em; }
.site-header nav { display:flex; align-items:center; gap:4px; font-size:var(--text-sm); }
.site-header nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border:1px solid transparent; border-radius:16px; white-space:nowrap; transition:background .18s,box-shadow .18s; }
.site-header nav a:hover { background:#ffffff80; }
.site-header nav a[aria-current=location] { border-color:#ffffffd9; background:#ffffffb8; box-shadow:0 3px 10px #29486610; color:var(--accent); }
a:hover,.text-link:hover { color:var(--accent); }
.project-jumps { position:sticky; top:calc(var(--header-bottom) + 10px); z-index:20; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:0 0 24px; padding:8px; border:1px solid var(--glass-edge); border-radius:22px; background:#f5f8fbd9; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); }
.project-jumps a { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 12px; border:1px solid transparent; border-radius:15px; background:transparent; font-size:var(--text-sm); font-weight:600; transition:background .18s,box-shadow .18s; }
.project-jumps a>span:not(.project-brand) { white-space:nowrap; }
.project-jumps img { width:24px; height:24px; border-radius:6px; flex:none; }
.project-jumps a:hover,.project-jumps a[aria-current=location] { background:#ffffffe6; border-color:white; box-shadow:0 3px 12px #29486612; color:#204b85; }

/* Shared content rhythm and type hierarchy. */
.hero { padding:88px 0 76px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:center; gap:72px; }
.hero-copy>.eyebrow { color:var(--accent); margin-bottom:20px; }
.hero-role { max-width:42ch; font-size:1.375rem; line-height:1.45; margin-bottom:18px; letter-spacing:-.02em; font-weight:500; text-wrap:balance; }
.hero-intro { max-width:58ch; font-size:var(--text-lg); color:var(--muted); margin-bottom:28px; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:12px 20px; min-height:48px; border:1px solid var(--ink); border-radius:16px; font-size:var(--text-sm); font-weight:600; transition:background .18s,box-shadow .18s; }
.dark { background:linear-gradient(145deg,#31485b,#1b2b3a); color:white; box-shadow:0 5px 16px -7px #162c4a70,inset 0 1px 0 #ffffff30; }
.dark:hover { background:var(--accent); border-color:var(--accent); color:white; }
.text-link { display:inline-flex; align-items:center; gap:18px; padding:8px 0; min-height:44px; background:transparent; border-bottom:1px solid #8d9baa70; font-size:var(--text-sm); font-weight:600; }
.hero-profile { position:relative; padding:28px; border:1px solid var(--glass-edge); border-radius:28px; background:linear-gradient(135deg,#ffffffc9,#ffffff69); box-shadow:0 18px 56px -28px #2d51714a,inset 0 1px 0 white; }
.hero-profile:before { content:''; display:block; width:32px; height:4px; border-radius:4px; margin-bottom:24px; background:#8ca9c9; box-shadow:0 1px 0 white; }
.hero-profile>div { margin-bottom:24px; }
.hero-profile>div:last-child { margin-bottom:0; }
.hero-profile .eyebrow { display:block; margin-bottom:8px; }
.hero-profile strong { font-size:var(--text-base); font-weight:600; line-height:1.5; }
.hero-profile p { color:var(--muted); font-size:var(--text-sm); margin:6px 0 0; }
.hero-profile .profile-tools { color:var(--ink); }
.profile-links a,.socials a { display:inline-flex; align-items:center; min-height:44px; }
.profile-links { display:flex; gap:24px; font-size:var(--text-sm); border-top:1px solid #d3dfe87a; padding-top:12px; }
.section-pad { padding-block:64px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:32px; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading>p { color:var(--muted); font-size:var(--text-sm); line-height:1.6; margin-bottom:0; }
.work-section { border-top:1px solid #ffffffa6; background:#ffffff29; }
.project { display:grid; grid-template-columns:320px minmax(0,1fr); align-items:start; gap:36px; margin:0 0 24px; padding:28px; border:1px solid var(--glass-edge); border-radius:28px; background:var(--glass); box-shadow:var(--shadow); scroll-margin-top:var(--project-offset); }
.project-info { min-width:0; }
.project-index { display:flex; gap:10px; font:500 var(--text-xs)/1.5 var(--mono); color:var(--muted); margin-bottom:24px; }
.project-index>span:first-child { color:var(--accent); }
.project-app-title { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.project-app-title>img { width:52px; height:52px; flex:none; border-radius:12px; }
.project-info .project-app-title h3 { font-size:1.625rem; margin:0 0 6px; }
.project-app-title p { color:var(--muted); font-size:var(--text-sm); line-height:1.5; margin:0; }
.project-info>p { font-size:var(--text-base); color:#3e4d5e; line-height:1.7; margin-bottom:24px; max-width:60ch; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.tags span { font:500 var(--text-xs)/1.4 var(--sans); padding:6px 10px; border:1px solid #dce4ecb3; border-radius:8px; background:#edf2f780; color:#445267; }
.project-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:24px; }
.subtle-link,.private-note { color:var(--muted); font-size:var(--text-sm); }
.store-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.store-link { display:flex; align-items:center; gap:10px; flex:1; min-width:150px; max-width:190px; min-height:58px; padding:10px 12px; border:1px solid var(--ink); border-radius:14px; background:var(--ink); color:white; }
.store-link:hover { color:white; background:var(--accent); border-color:var(--accent); }
.store-link small { display:block; color:#d9e0e9; font-size:var(--text-xs); line-height:1.4; }
.store-link strong { display:block; font-size:var(--text-base); line-height:1.4; font-weight:600; white-space:nowrap; }
.store-link>span:last-child { margin-left:auto; font-size:var(--text-sm); }
.store-symbol { font:700 22px/1 Arial,sans-serif; }
.play-symbol { font-size:28px; }

/* Screenshots retain their complete aspect ratios. Captions remain readable. */
.project-gallery { min-width:0; overflow:hidden; border:1px solid #dbe4ed; border-radius:20px; background:linear-gradient(145deg,#f7f9fc,#ebf0f6); box-shadow:0 5px 18px -12px #253b5140,inset 0 1px 0 white; }
.gallery-bar { display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid #dce4ed; color:var(--muted); font:600 .6875rem/1.5 var(--sans); letter-spacing:.065em; }
.screenshot-button { position:relative; display:block; width:100%; overflow:hidden; padding:0; border:1px solid #cbd4df; border-radius:10px; background:#162028; cursor:zoom-in; }
.screenshot-button img { display:block; width:100%; transition:filter .2s; }
.screenshot-button:hover img { filter:brightness(.94); }
.expand-mark { position:absolute; right:8px; bottom:8px; width:30px; height:30px; display:grid; place-items:center; background:#142130ce; color:white; border:1px solid #ffffff60; border-radius:9px; font-size:16px; }
.gallery-mobile .app-screens { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:14px; padding:20px 16px 16px; background:linear-gradient(145deg,#e9eff6,#f2f5f9); }
.app-screens figure { min-width:0; margin:0; }
.gallery-mobile .screenshot-button { max-width:224px; margin-inline:auto; border-radius:10px; background:#0e1116; }
.gallery-mobile .screenshot-button img { height:auto; aspect-ratio:1320/2868; object-fit:contain; background:#0e1116; }
.gallery-mobile .app-screens figcaption { color:#445267; font-size:var(--text-xs); line-height:1.5; text-align:center; padding-top:10px; }
.desktop-stage { padding:14px 14px 0; background:transparent; }
.gallery-main-image img { height:auto; aspect-ratio:16/10; object-fit:contain; object-position:center; }
.gallery-current { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px 0; font-size:var(--text-sm); }
.gallery-current strong { font-weight:600; }
.gallery-current>span { flex:none; font:400 var(--text-xs)/1.5 var(--mono); color:var(--muted); }
.gallery-thumbs { display:flex; gap:9px; overflow-x:auto; padding:12px 16px 16px; scrollbar-width:thin; }
.gallery-thumb { flex:none; width:calc(20% - 8px); min-width:108px; padding:5px; overflow:hidden; border:1px solid #d2dce7; border-radius:10px; background:#ffffffb3; text-align:left; }
.gallery-thumb[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.gallery-thumb:hover { border-color:#7189a7; }
.gallery-thumb img { width:100%; height:54px; display:block; border-radius:5px; object-fit:cover; object-position:top; }
.gallery-thumb>span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:7px 3px 2px; font-size:var(--text-xs); color:#445267; }
.project-gallery .gallery-note { margin:0; padding:12px 16px; border-top:1px solid var(--line); font-size:var(--text-xs); line-height:1.6; color:var(--muted); }
.gallery-privacy-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#547761; margin-right:7px; vertical-align:1px; }

/* Every role stays open by default; summaries and body copy share a readable scale. */
.experience-list { display:grid; gap:16px; }
.experience-list details { border:1px solid var(--glass-edge); border-radius:24px; background:var(--glass); box-shadow:var(--shadow); }
.exp-heading { display:flex; flex-direction:column; gap:6px; min-width:0; }
.exp-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; }
.experience-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 32px; border-radius:24px; cursor:pointer; }
.experience-list summary::-webkit-details-marker { display:none; }
.exp-company { font-size:1.25rem; font-weight:650; line-height:1.45; letter-spacing:-.025em; }
.experience-list summary:hover .exp-company { color:var(--accent); }
.current-label { display:inline-block; font:600 .625rem/1.5 var(--sans); letter-spacing:.05em; color:#23599d; border:1px solid #ffffffc9; border-radius:6px; background:#e5eefbcc; padding:4px 7px; margin-left:10px; vertical-align:middle; }
.exp-role { font-size:var(--text-base); line-height:1.5; color:var(--muted); }
.exp-date { text-align:left; font-size:var(--text-xs); line-height:1.5; color:var(--muted); white-space:nowrap; }
.exp-toggle { flex:none; display:grid; place-items:center; width:36px; height:36px; border:1px solid #ffffffcc; border-radius:50%; background:#eef3f880; font-size:24px; text-align:center; color:var(--muted); }
.experience-list details[open] .exp-toggle { font-size:0; }
.experience-list details[open] .exp-toggle:after { content:'−'; font-size:24px; }
.exp-content { max-width:94ch; padding:0 32px 32px; color:#3e4d5e; font-size:var(--text-base); line-height:1.75; }
.exp-content p { margin-bottom:20px; }
.exp-content p:last-child { margin-bottom:0; }
.exp-content ul { margin:0; padding-left:22px; }
.exp-content li { padding-bottom:14px; padding-left:3px; }
.exp-content li::marker { color:#8399b0; font-size:.8em; }
.exp-content strong { color:#283e52; font-weight:650; }
.exp-content li:last-child { padding-bottom:0; }

.about-section { border-block:1px solid #ffffffa6; background:#ffffff38; }
.about-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; }
.about-grid h2 { margin:12px 0 24px; }
.about-copy { max-width:60ch; font-size:var(--text-base); line-height:1.7; color:#3e4d5e; }
.education { margin-top:28px; padding-top:24px; border-top:1px solid #cbd4df; }
.education h3 { font-size:var(--text-lg); letter-spacing:-.015em; margin:12px 0 8px; }
.education p { font-size:var(--text-base); color:var(--muted); margin-bottom:8px; }
.education .mono { color:var(--muted); }
.toolkit>.eyebrow { margin-bottom:20px; }
.toolkit>div { position:relative; border:1px solid var(--glass-edge); border-radius:20px; padding:22px 22px 22px 54px; margin-bottom:12px; background:#ffffff94; box-shadow:var(--shadow); }
.toolkit-num { position:absolute; top:26px; left:20px; font:500 var(--text-xs)/1.5 var(--mono); color:#7088a0; }
.toolkit h3 { font-size:var(--text-lg); letter-spacing:-.015em; margin-bottom:10px; }
.toolkit p { font-size:var(--text-base); color:#3e4d5e; line-height:1.65; margin-bottom:0; }
.contact-section { margin-block:32px; padding:36px; border:1px solid var(--glass-edge); border-radius:28px; background:linear-gradient(135deg,#ffffffc9,#ffffff70); box-shadow:var(--shadow); }
.contact-top { margin-bottom:12px; }
.contact-section h2 { font-size:2rem; }
.contact-bottom { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-top:24px; }
.contact-email { font-size:var(--text-lg); font-weight:500; overflow-wrap:anywhere; }
.contact-email span { margin-left:16px; }
.socials { display:flex; flex-wrap:wrap; gap:24px; font-size:var(--text-sm); }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:0 0 28px; color:var(--muted); font-size:var(--text-xs); }
.site-footer a { color:#40516a; }

/* Readable dialogs with full-sized controls on small screens. */
dialog { width:calc(100% - 40px); max-width:760px; max-height:90dvh; padding:28px 32px; border:1px solid var(--glass-edge); border-radius:28px; background:#f7f9fcf5; color:var(--ink); box-shadow:0 32px 100px #0a203d50,inset 0 1px 0 white; overscroll-behavior:contain; }
dialog::backdrop { background:#172c4659; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.dialog-top button { min-width:44px; min-height:44px; border-radius:50%; background:#e8eef5; font-size:22px; }
.case-kicker { font:500 var(--text-xs)/1.6 var(--mono); color:var(--accent); margin-bottom:12px; }
#case-title { font-size:2rem; margin-bottom:24px; }
#case-content h3 { font-size:var(--text-lg); letter-spacing:-.015em; margin:28px 0 12px; }
#case-content p,#case-content li { font-size:var(--text-base); line-height:1.7; color:#3e4d5e; }
#case-content ul { padding-left:22px; }
#case-content li { margin-bottom:8px; }
#case-content .button { margin-top:16px; }
body.dialog-open { overflow:hidden; }
#image-dialog { width:calc(100% - 32px); max-width:1350px; max-height:94dvh; padding:0; border-color:#435164; background:#17202a; color:#f4f7fb; overflow:hidden; }
#image-dialog[open] { display:flex; flex-direction:column; }
.image-dialog-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 16px; border-bottom:1px solid #354255; background:#111b26; }
.image-dialog-toolbar>div:first-child { min-width:0; }
.image-dialog-toolbar h2 { font-size:var(--text-base); font-weight:600; letter-spacing:0; line-height:1.5; margin:0; }
#image-position { display:block; font-size:var(--text-xs); line-height:1.5; color:#b5c1d0; margin-top:4px; }
.image-dialog-actions { display:flex; align-items:center; gap:8px; flex:none; }
.image-dialog-actions button { min-width:44px; height:44px; line-height:1; padding:8px 12px; border:1px solid #617187; border-radius:12px; background:#ffffff0a; color:#e9eff8; font-size:18px; }
.image-dialog-actions #toggle-image-size { font-size:var(--text-sm); white-space:nowrap; }
.image-dialog-actions #close-image { font-size:22px; border-color:transparent; }
.image-scroll { min-height:0; flex:1 1 auto; overflow:auto; overscroll-behavior:contain; padding:16px; background:#0c131b; }
#full-image { display:block; max-width:100%; height:auto; margin:auto; }
#full-image.natural-size { max-width:none; width:auto; height:auto; }
#image-caption { flex:none; margin:0; padding:12px 16px; border-top:1px solid #354255; color:#bac6d5; font-size:var(--text-sm); line-height:1.6; }

/* Application marks share SVG assets with the local apps; text marks keep their own typography. */
.project-brand { --mark-size:52px; display:inline-flex; position:relative; align-items:center; justify-content:center; flex:none; width:var(--mark-size); height:var(--mark-size); font-size:var(--mark-size); line-height:1; border-radius:calc(var(--mark-size)*.28); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.mark-finance { background:#27424b; color:#cdf76a; font-weight:750; }
.mark-finance .mark-letter { font-size:.724em; letter-spacing:-.1em; padding-right:.1em; }
.mark-daft { background:#e9efdf; color:#20332e; font-weight:750; }
.mark-daft .mark-letter { font-size:.778em; letter-spacing:-.027em; }
img.project-brand { display:block; object-fit:contain; }
.project-jumps .project-brand { --mark-size:24px; }

@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  .hero-grid { grid-template-columns:minmax(0,1fr) 260px; gap:40px; }
  .project { grid-template-columns:285px minmax(0,1fr); gap:28px; }
  .hero-profile { padding:24px; }
  .store-link { flex:none; min-width:152px; }
  .about-grid { gap:48px; }
}
@media(max-width:900px) {
  .contact-bottom { flex-direction:column; align-items:flex-start; gap:20px; }
}
@media(max-width:780px) {
  :root { --header-height:60px; --header-top:10px; --project-offset:84px; }
  .wrap { width:calc(100% - 40px); }
  .site-header { width:calc(100% - 24px); margin-top:10px; padding:6px 8px; border-radius:22px; gap:10px; }
  .wordmark>span:last-child { display:none; }
  .site-header nav { gap:2px; font-size:var(--text-sm); }
  .site-header nav a { padding-inline:12px; border-radius:15px; }
  .hero { padding-block:56px 44px; }
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  h1 { font-size:3rem; }
  .hero-role { font-size:1.25rem; }
  .hero-profile { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px; }
  .hero-profile:before { grid-column:1/-1; margin-bottom:0; }
  .hero-profile>div { margin:0; }
  .hero-profile .profile-links { grid-column:1/-1; }
  .section-pad { padding-block:48px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:16px; margin-bottom:24px; }
  .project { grid-template-columns:1fr; gap:24px; padding:24px; border-radius:24px; }
  .project-index { margin-bottom:20px; }
  .project-jumps { gap:6px; padding:7px; margin-bottom:20px; }
  .project-jumps a { font-size:var(--text-xs); gap:8px; padding:10px 8px; }
  .project-info>p { max-width:65ch; }
  .store-links { margin-top:24px; }
  .store-link { flex:none; min-width:155px; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .about-copy { max-width:none; }
  .experience-list summary { padding:24px; }
  .exp-content { padding:0 24px 28px; }
  .site-footer>span:nth-child(2) { display:none; }
  .image-dialog-toolbar { flex-wrap:wrap; gap:12px; }
  .image-dialog-toolbar>div:first-child { flex:1 0 100%; }
  .image-dialog-actions { width:100%; }
  .image-dialog-actions #close-image { margin-left:auto; }
}
@media(max-width:480px) {
  :root { --project-offset:84px; }
  h1 { font-size:2.625rem; }
  h2,.contact-section h2,#case-title { font-size:1.75rem; }
  .site-header nav { gap:0; font-size:var(--text-xs); }
  .site-header nav a { padding-inline:9px; }
  .monogram { width:34px; height:34px; border-radius:12px; }
  .hero-role { font-size:var(--text-lg); }
  .hero-intro { font-size:var(--text-base); }
  .hero-profile { grid-template-columns:1fr; }
  .hero-profile .profile-links { grid-column:auto; }

  .project-jumps img { width:22px; height:22px; }
  .project-jumps .project-brand { --mark-size:22px; }
  .project-info .project-app-title h3 { font-size:1.5rem; }
  .project { padding:20px 16px 16px; }
  .project-app-title { gap:12px; }
  .project-app-title p { font-size:var(--text-sm); }
  .project-actions { gap:16px; }
  .gallery-mobile .app-screens { gap:8px; padding:14px 10px; }
  .gallery-mobile .screenshot-button { border-radius:6px; }
  .expand-mark { width:26px; height:26px; right:4px; bottom:4px; }
  .gallery-bar { padding:12px; gap:12px; font-size:.625rem; }
  .desktop-stage { padding:10px 10px 0; }
  .gallery-current { padding:12px 12px 0; }
  .gallery-thumbs { padding:12px; }
  .project-gallery .gallery-note { padding:12px; }
  .current-label { margin-left:6px; }
  .experience-list summary { padding:22px 20px; gap:12px; }
  .exp-content { padding:0 20px 24px; }
  .exp-company { font-size:var(--text-lg); }
  .contact-section { padding:24px; }
  .socials { gap:20px; }
  .contact-email { font-size:var(--text-base); }
  dialog { padding:20px; width:calc(100% - 24px); }
  #image-dialog { width:calc(100% - 20px); }
  .image-scroll { padding:10px; }
}
@media(max-width:350px) {
  .nav-label-extra { display:none; }
  .site-header { padding-inline:7px; gap:6px; }
  .site-header nav a { padding-inline:6px; }
  .project-jumps a { font-size:.6875rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { transition:none !important; animation:none !important; }
}
@media(prefers-reduced-transparency:reduce) {
  .site-header,.project-jumps,dialog { -webkit-backdrop-filter:none; backdrop-filter:none; background:#f7f9fc; }
  dialog::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; background:#172c46b3; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header,.project-jumps { background:#f5f8fc; }
}

/* Additional projects retain the marks used inside their applications. */
.additional-projects { padding:32px 0 16px; border-top:1px solid var(--line); }
.additional-projects h3 { font-size:1.5rem; margin-bottom:12px; }
.additional-projects>p { color:var(--muted); max-width:70ch; margin-bottom:24px; }
.build-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.build-card { border:1px solid var(--glass-edge); border-radius:22px; padding:24px; background:var(--glass); box-shadow:var(--shadow); }
.build-card .eyebrow { margin-bottom:12px; }
.build-card h4 { font-size:var(--text-lg); line-height:1.4; margin:0 0 12px; }
.build-card p:not(.eyebrow) { color:#3e4d5e; margin-bottom:16px; }
.build-card .text-link { padding-bottom:4px; }
.build-card .tags { margin-bottom:0; }
.gallery-single .gallery-current { padding-bottom:14px; }
.gallery-single .gallery-main-image img { aspect-ratio:auto; }
.image-dialog-actions button:disabled { opacity:.35; cursor:default; }
@media(max-width:1100px) {
  .project-jumps { display:flex; overflow-x:auto; scrollbar-width:thin; }
  .project-jumps a { flex:none; min-width:140px; }
}
@media(max-width:780px) {
  .project-jumps a { font-size:var(--text-sm); padding:10px 12px; }
  .build-grid { grid-template-columns:1fr; }
  .build-card { padding:20px; }
}
@media(max-width:480px) {
  .exp-meta { flex-direction:column; gap:3px; }
  .project-jumps a { min-width:130px; }
}

@media print {
  body { background:white; }
  body:before { display:none; }
  .site-header,.hero-actions,.hero-profile,.project-gallery,.project-actions,.project-jumps,.store-links,.contact-section,.site-footer,dialog,#image-dialog[open] { display:none; }
  .wrap { width:100%; max-width:none; }
  .hero { padding:20px 0; }
  .hero-grid,.project,.about-grid { display:block; }
  .section-pad { padding-block:24px; }
  h1 { font-size:36pt; }
  h2 { font-size:24pt; }
  .project,.experience-list details { break-inside:avoid; border:0; box-shadow:none; background:white; padding:0; }
  .experience-list summary { padding-inline:0; }
  .exp-content { padding-left:0; }
  .toolkit>div { box-shadow:none; border-color:var(--line); }
  .experience-list details:not([open]) .exp-content { display:block; }
  .about-section,.work-section { background:white; }
  .section-heading>p { display:none; }
}