/* Farhan Ali - customised HTML5 UP Editorial. Theme and portfolio layers. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1220;
  --sidebar: #0e1827;
  --sidebar-alt: #142132;
  --panel: #131e2e;
  --panel-hover: #18273a;
  --text: #b7c4d3;
  --heading: #edf4fb;
  --muted: #8999ac;
  --line: #283749;
  --accent: #62d4c1;
  --accent-dark: #0b181d;
  --glow: rgba(98, 212, 193, .13);
  --button: #172d37;
}
html[data-theme="light"] {
  color-scheme: light;
  --page: #fafbfc;
  --sidebar: #f1f4f7;
  --sidebar-alt: #e7edf2;
  --panel: #f3f7fa;
  --panel-hover: #eaf1f5;
  --text: #425366;
  --heading: #172738;
  --muted: #66788a;
  --line: #d7e1e7;
  --accent: #087969;
  --accent-dark: #ffffff;
  --glow: rgba(7, 125, 109, .075);
  --button: #e0f0ee;
}
html { scroll-behavior: smooth; }
html, body { background: var(--page); }
body, input, select, textarea { color: var(--text); background-color: var(--page); font-family: "Segoe UI", Inter, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, strong, b { color: var(--heading); font-family: "Segoe UI", Inter, Arial, sans-serif; }
h1,h2,h3,h4 { letter-spacing: -0.025em; }
a { color: var(--accent); border-bottom-color: transparent; }
a:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }
hr, blockquote { border-color: var(--line); }
body { line-height: 1.67; }
::selection { background: var(--accent); color: var(--accent-dark); }
*:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 4px; }
#main { background: var(--page); min-width: 0; }
#main > .inner { max-width: 1580px; }
#main > .inner > section { border-bottom: 1px solid var(--line); }
#main > .inner > section:last-child { border-bottom: 0; }
#header { border-bottom: 1px solid var(--line); padding: 2.1em 0 1.45em; align-items: center; }
#header .logo { font-family: inherit; font-size: 1.06em; font-weight: 450; letter-spacing: -.025em; color: var(--heading); }
#header .logo strong { color: var(--accent); }
.top-links { list-style: none; display: flex; justify-content: flex-end; gap: 1.3em; flex-wrap: wrap; padding: 0; margin: 0; }
.top-links li { padding: 0; }
.top-links a { border: 0; color: var(--muted); font-size: .80em; font-weight: 700; }
.top-links a:hover { color: var(--accent) !important; }
#sidebar { background: var(--sidebar); }
#sidebar > .inner > * { border-color: var(--line); margin-bottom: 2em; padding-bottom: 2em; }
#sidebar .sidebar-brand { border: 0; margin: 0 0 2.1em; padding-bottom: 0; }
.sidebar-name { display: inline-block; color: var(--heading); font-size: 1.22em; font-weight: 800; border: 0; letter-spacing: -.03em; }
.sidebar-suffix { font-size: .63em; color: var(--accent); letter-spacing: .10em; }
.sidebar-sub { margin-top: .45em; color: var(--muted); font-size: .84em; }
#sidebar #menu { border: 0; }
#menu .major h2 { color: var(--muted); text-transform: uppercase; font: 700 .81em "Segoe UI", Arial, sans-serif; letter-spacing: .2em; }
#menu .major h2:after { background: var(--accent); }
#menu ul { color: var(--text); }
#menu > ul > li { border-color: var(--line); }
#menu > ul > li > a, #menu > ul > li > span { color: var(--heading); font-weight: 650; font-family: "Segoe UI", Arial, sans-serif; font-size: .86em; letter-spacing: .015em; }
#menu > ul > li > a:hover, #menu > ul > li > span:hover { color: var(--accent) !important; }
#menu ul ul a { color: var(--muted); text-transform: none; font-weight: 450; font-size: .89em; letter-spacing: 0; padding: .55em 0; }
#menu ul ul a:hover { color: var(--accent) !important; }
/* Replace original icon-font plus glyphs with a system-font character. */
#menu ul a.opener:before,#menu ul span.opener:before { content: "+"; font: 400 1.3rem/1 "Segoe UI", sans-serif; color: var(--muted); transform: none; }
#menu ul a.opener.active:before,#menu ul span.opener.active:before { content: "−"; transform: none; }
#sidebar .toggle:before { content: "☰"; font-family: "Segoe UI Symbol", Arial, sans-serif; font-weight: 450; color: var(--accent); }
#sidebar .toggle:after { background: var(--sidebar-alt); }
#sidebar #footer { border-top: 1px solid var(--line); padding-top: 1.3em; margin-top: 1em; }
#footer .copyright { color: var(--muted); font-size: .76em; }
.theme-panel { border-top: 1px solid var(--line); border-bottom: 0 !important; padding: 1.5em 0 0 !important; }
.theme-meta { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: .9em; }
.theme-meta span { color: var(--muted); font-size: .72em; font-weight: 700; letter-spacing: .17em; }
.theme-meta small { color: var(--muted); font-size: .70em; }
#theme-toggle { width: 100%; padding: .85em 1em; height: auto; line-height: normal; display: flex; align-items: center; gap: .75em; text-transform: none; letter-spacing: 0; font-size: .92em; font-weight: 600; text-align: left; border: 1px solid var(--line); background: var(--sidebar-alt); color: var(--heading); box-shadow: none; border-radius: .55em; cursor: pointer; }
#theme-toggle:hover { background: var(--panel-hover); color: var(--heading) !important; }
#theme-toggle .theme-symbol { width: 1.15em; height: 1.15em; line-height: 1.15em; font-size: 1.25em; color: var(--accent); }
#theme-toggle-label { flex: 1; }
.theme-switch { display: inline-flex; width: 2.55em; height: 1.42em; padding: .18em; border-radius: 1em; background: var(--line); align-items: center; }
.theme-switch span { width: 1.06em; height: 1.06em; border-radius: 50%; background: var(--heading); transition: transform .2s ease; }
html[data-theme="dark"] .theme-switch span { transform: translateX(1.12em); background: var(--accent); }
#banner.portfolio-banner { min-height: 580px; display: flex; align-items: center; gap: 3.7em; padding-top: 5em; padding-bottom: 4.5em; }
.portfolio-banner .content { width: 57%; }
.portfolio-banner .content h1 { color: var(--heading); font-size: clamp(2.6rem, 4.6vw, 4.45rem); letter-spacing: -.055em; line-height: 1.13; margin: .5em 0 .44em; }
.headline-accent { color: var(--accent); }
.eyebrow, .overline { text-transform: uppercase; font-weight: 750; letter-spacing: .15em; font-size: .70em; color: var(--accent); margin-bottom: .75em; }
.status-dot { display: inline-block; background: var(--accent); height: .62em; width: .62em; border-radius: 50%; margin-right: .7em; box-shadow: 0 0 0 .3em var(--glow); }
.portfolio-banner .hero-description { font-size: 1.14em; line-height: 1.7; max-width: 38em; color: var(--text); }
.hero-actions { display: flex; gap: .85em; flex-wrap: wrap; margin: 2.1em 0; }
.hero-actions .button { margin: 0; }
.button, button { border-radius: .4em; font-family: inherit; }
.button.primary,button.primary { background: var(--accent); box-shadow: none; color: var(--accent-dark) !important; }
.button.primary:hover { background: var(--accent); opacity: .91; }
.button.outline { color: var(--heading) !important; border: 1px solid var(--line); box-shadow: none; }
.button.outline:hover { border-color: var(--accent); color: var(--accent) !important; }
.hero-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1em; padding-top: 1.9em; margin-top: 2.1em; border-top: 1px solid var(--line); }
.hero-facts > div { display: flex; flex-direction: column; }
.hero-facts b { font-size: 2em; font-weight: 800; line-height: 1.25; }
.hero-facts span { font-size: .79em; color: var(--muted); }
.hero-graphic { background: radial-gradient(circle at 50% 42%, var(--glow), transparent 68%),linear-gradient(145deg,var(--sidebar-alt),var(--panel)); border: 1px solid var(--line); padding: 1.4em; border-radius: 1.1em; color: var(--accent); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; width: 43%; align-self: stretch; min-height: 370px; }
.hero-graphic > svg { display: block; width: 100%; max-height: 420px; flex: 1; }
.hero-graphic-top,.hero-graphic-bottom { font: 600 .63em/1.5 Consolas,monospace; letter-spacing: .1em; color: var(--muted); }
.hero-graphic-bottom { display: flex; justify-content: space-between; gap: .8em; }
.section-tight { padding-top: 4.0em !important; padding-bottom: 4.2em !important; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 2em; margin-bottom: 2em; }
.section-header h2 { margin: 0; font-size: clamp(1.8em,3.1vw,2.6em); letter-spacing: -.05em; }
.section-header > p { max-width: 26em; font-size: .94em; margin: 0; color: var(--muted); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4em; }
.project-card { border-radius: .75em; border: 1px solid var(--line); overflow: hidden; background: var(--panel); transition: transform .2s ease, border-color .2s ease; }
.project-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.project-cover, .case-art { position: relative; display: block; background: linear-gradient(145deg, var(--cover-1),var(--cover-2)); color: var(--cover-stroke); overflow: hidden; border-bottom: 1px solid var(--line); }
.project-cover { aspect-ratio: 600 / 335; }
.accent-mint { --cover-1:#143f3a; --cover-2:#0b2b31; --cover-stroke:#84f2d8; }
.accent-sky { --cover-1:#193651; --cover-2:#102a46; --cover-stroke:#8acaf7; }
.accent-amber { --cover-1:#4b3422; --cover-2:#292822; --cover-stroke:#f6cb8d; }
.accent-violet { --cover-1:#312c4f; --cover-2:#1b263e; --cover-stroke:#bbb3ff; }
.art-svg { display: block; width: 100%; height: 100%; }
.project-cover-tag { position: absolute; bottom: 1.1em; left: 1.3em; font: 700 .69em Consolas,monospace; letter-spacing: .1em; color: var(--cover-stroke); opacity: .88; }
.project-card-body { padding: 1.5em 1.55em 1.45em; }
.project-card-body .overline { color: var(--muted); margin: 0 0 .6em; }
.project-card-body h3 { font-size: 1.38em; line-height: 1.34; margin: 0 0 .6em; }
.project-card-body h3 a { color: var(--heading); border: 0; }
.project-card-body > p { margin: 0 0 1.5em; min-height: 4.7em; }
.card-foot { border-top: 1px solid var(--line); padding-top: 1em; display: flex; justify-content: space-between; gap: .8em; align-items: end; }
.card-foot span { color: var(--muted); font-size: .76em; max-width: 57%; line-height: 1.5; }
.small-arrow { font-size: .82em; white-space: nowrap; font-weight: 700; border: 0; }
.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5em; }
.capability-grid > div { border-top: 2px solid var(--accent); padding: 1.8em 0 0; }
.capability-num { font: 600 .8em Consolas,monospace; color: var(--accent); letter-spacing: .1em; }
.capability-grid h3 { margin: .85em 0 .7em; }
.capability-grid p { margin: 0; }
.archive-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.3em; }
.archive-block { background: var(--panel); border: 1px solid var(--line); padding: 1.6em 1.8em; border-radius: .55em; }
.archive-index { color: var(--accent); font: 700 .8em Consolas,monospace; letter-spacing: .06em; }
.archive-block h3 { margin: .75em 0 .5em; }
.archive-block ul { margin: 0; padding-left: 1.3em; }
.archive-block li { padding: .3em 0; color: var(--text); }
.skill-lines > p { border-bottom: 1px solid var(--line); padding: 1.15em 0; margin: 0; display: grid; grid-template-columns: minmax(190px, .45fr) 1fr; gap: 1em; }
.skill-lines b { font-size: 1em; }
.skill-lines span { color: var(--text); }
.writing-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2.5em; align-items: center; }
.writing-section h2 { font-size: clamp(1.8em,3.2vw,2.7em); line-height: 1.2; }
.writing-section p { max-width: 39em; }
.writing-graphic { background: var(--panel); padding: 1.7em; border: 1px solid var(--line); border-radius: .65em; }
.writing-graphic > span { color: var(--accent); font: 700 .82em Consolas,monospace; letter-spacing: .06em; }
.writing-graphic div { border-bottom: 1px solid var(--line); font: 700 1.6em Consolas,monospace; padding: .55em 0; color: var(--accent); display: flex; align-items: center; gap: .9em; }
.writing-graphic div:last-child { border: 0; }
.writing-graphic div span { font: 650 .55em "Segoe UI",Arial,sans-serif; color: var(--heading); }
.contact-section h2 { font-size: 2.1em; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1em; }
.contact-links a { padding: .9em 1.2em; background: var(--panel); border: 1px solid var(--line); border-radius: .4em; color: var(--heading); font-weight: 600; }
.contact-links a:hover { border-color: var(--accent); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 1em; padding: 2.5em 0 0; font-size: .81em; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.case-hero { padding-top: 3.2em !important; }
.case-hero h1 { font-size: clamp(2.4em,4.3vw,4em); letter-spacing: -.05em; line-height: 1.18; margin: 0 0 .55em; max-width: 17em; }
.case-lede { font-size: 1.2em; max-width: 48em; margin-bottom: 2.1em; }
.case-art { border: 1px solid var(--line); border-radius: .75em; height: auto; aspect-ratio: 600 / 285; max-height: 420px; }
.case-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4em; margin-top: 1.65em; }
.case-meta > div { border-top: 1px solid var(--line); padding-top: 1em; }
.case-meta span { display: block; font: 700 .74em Consolas,monospace; color: var(--muted); letter-spacing: .05em; margin-bottom: .5em; }
.case-meta b { display: block; color: var(--heading); font-size: .93em; line-height: 1.5; }
.case-section { padding: 3.1em 0 3.4em !important; }
.case-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5em 2.2em; }
.case-points article { display: flex; gap: 1.1em; border-top: 1px solid var(--line); padding-top: 1.5em; }
.case-num { color: var(--accent); font: 700 .9em Consolas,monospace; }
.case-points article h3 { margin: 0 0 .55em; }
.case-points article p { margin: 0; }
.evidence-panel { padding: 1.75em 2em; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: .2em .55em .55em .2em; }
.evidence-panel p:last-child { margin: 0; }
.evidence-next strong { color: var(--accent); }
/* Responsive adjustments */
@media screen and (max-width: 1280px) {
  #banner.portfolio-banner { min-height: 0; gap: 2.2em; }
  .portfolio-banner .content h1 { font-size: clamp(2.8rem,4.5vw,4rem); }
}
@media screen and (max-width: 980px) {
  #banner.portfolio-banner { flex-direction: column; align-items: stretch; }
  .portfolio-banner .content, .portfolio-banner .hero-graphic { width: 100%; }
  .portfolio-banner .hero-graphic { height: 320px; min-height: 0; }
  .portfolio-banner .hero-graphic > svg { max-height: 250px; }
  .section-header { align-items: start; }
}
@media screen and (max-width: 736px) {
  #header { padding-top: 6.2em; display: block; }
  #header .logo { display: block; }
  .top-links { justify-content: start; gap: 1em; margin-top: 1em; }
  #banner.portfolio-banner { padding-top: 2.4em; padding-bottom: 3em; }
  .portfolio-banner .content h1 { font-size: clamp(2.3rem,8.1vw,3.2rem); }
  .portfolio-banner .hero-description { font-size: 1.04em; }
  .portfolio-banner .hero-graphic { height: 260px; }
  .hero-facts { grid-template-columns: repeat(3,1fr); }
  .hero-facts b { font-size: 1.55em; }
  .section-header { flex-direction: column; gap: .75em; }
  .section-tight { padding-top: 3em !important; padding-bottom: 3em !important; }
  .portfolio-grid, .archive-grid, .writing-section, .case-points, .case-meta { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid > div { padding-top: 1.3em; }
  .project-card-body > p { min-height: auto; }
  .skill-lines > p { display: block; }
  .skill-lines b { display: block; margin-bottom: .3em; }
  .case-hero h1 { font-size: 2.55em; }
  .case-meta { gap: 1em; }
  .breadcrumbs { padding-top: 1.5em; }
  #sidebar .toggle:before { color: var(--accent); }
}
@media screen and (max-width: 480px) {
  .hero-facts { gap: .4em; }
  .hero-facts span { font-size: .7em; }
  .hero-actions { display: grid; }
  .hero-actions .button { text-align: center; }
  .contact-links { flex-direction: column; }
  .contact-links a { display: block; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *,*:before,*:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Original Editorial button palette should not recolour the theme control. */
#theme-toggle { color: var(--heading) !important; }

/* Central project catalogue: optional links, archive and shared detail pages. */
.project-extra-links { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:1rem; }
.project-extra-links .button { font-size:.65rem; line-height:2.2rem; height:2.3rem; padding:0 .8rem; }
.portfolio-muted-nav { display:block; padding:.5em 0; opacity:.63; font-size:.88em; }
.portfolio-placeholder { min-height:200px; display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:2rem; background:var(--portfolio-panel,#172633); color:inherit; }
.portfolio-placeholder span { text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; opacity:.7; }
.portfolio-placeholder strong { font-size:1.3rem; line-height:1.4; }
.portfolio-detail-photo { display:block; width:100%; max-height:520px; object-fit:contain; margin:2rem 0; border-radius:.6rem; }

/* Surgical instrument carrier case study */
.robot-hero-photo { margin:1.6rem 0 0; display:flex; flex-direction:column; align-items:center; gap:.6rem; max-width:760px; }
.robot-hero-photo img { display:block; width:auto; max-width:100%; height:auto; max-height:420px; object-fit:contain; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.robot-hero-photo figcaption, .robot-gallery figcaption { font-size:.83rem; color:var(--muted); text-align:center; line-height:1.5; }
.robot-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.6rem 0 2rem; }
.robot-metrics>div { border:1px solid var(--line); border-radius:9px; padding:1.3rem 1rem; background:var(--panel); }
.robot-metrics strong {display:block; font-size:1.18rem; color:var(--heading); line-height:1.4}
.robot-metrics span {display:block; margin-top:.35rem; font-size:.77rem; line-height:1.5; color:var(--muted)}
.robot-flow {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; margin:1.5rem 0 2rem}
.robot-flow>div {border:1px solid var(--line); padding:1.2rem 1rem; border-radius:8px; background:var(--panel)}
.robot-flow span {display:block; color:var(--accent); font:700 .75rem Consolas,monospace; margin-bottom:.6rem}
.robot-flow strong {display:block; font-size:.95rem; color:var(--heading); margin-bottom:.6rem}
.robot-flow p {font-size:.81rem; line-height:1.6; margin:0}
.robot-gallery {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0}
.robot-gallery figure {margin:0; min-width:0; background:var(--panel); border:1px solid var(--line); padding:.8rem; border-radius:10px}
.robot-gallery img {display:block; width:100%; height:330px; object-fit:contain; border-radius:6px}
.robot-gallery figcaption {padding:.8rem .3rem .25rem}
.robot-table-wrap {width:100%; overflow-x:auto; margin:1.5rem 0}
.robot-component-table {width:100%; min-width:640px; border-collapse:collapse}
.robot-component-table th,.robot-component-table td {padding:.75rem .8rem; text-align:left; vertical-align:top}
.robot-component-table th {color:var(--heading); white-space:nowrap}
.robot-code {white-space:pre; overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:1.3rem; font-size:.85rem; line-height:1.6}
.robot-code code {color:var(--heading)}
@media(max-width:1050px) {.robot-metrics,.robot-flow {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:630px) {.robot-metrics,.robot-flow,.robot-gallery {grid-template-columns:1fr}.robot-gallery img {height:260px}.robot-hero-photo img {max-height:320px}}

/* Keep validation evidence separate from the two-row results grid. */
#main .case-section .case-points:has(+ .evidence-panel) {
  padding-bottom: 2rem;
}
#main .case-section .case-points + .evidence-panel {
  margin-top: 0;
}


/* Radar scanner case study - bounded image gallery and responsive technical panels */
.radar-visual-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:stretch; gap:1.1rem; margin:1.5rem 0 .5rem; max-width:1060px; }
.radar-visual,.radar-photo-grid figure { margin:0; min-width:0; border:1px solid var(--line); background:var(--panel); border-radius:10px; padding:.85rem; display:flex; flex-direction:column; justify-content:space-between; }
.radar-visual img { display:block; width:100%; height:330px; object-fit:contain; border-radius:6px; }
.radar-visual figcaption,.radar-photo-grid figcaption { color:var(--muted); font-size:.81rem; line-height:1.5; padding:.75rem .15rem .1rem; text-align:center; }
.radar-visual figcaption strong { color:var(--heading); }
.radar-metrics,.radar-system-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.95rem; margin:1.6rem 0 2rem; }
.radar-metrics>div,.radar-system-flow>div { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:1.3rem 1rem; min-width:0; }
.radar-metrics strong { color:var(--heading); font-size:1.14rem; display:block; line-height:1.4; }
.radar-metrics span { display:block; color:var(--muted); font-size:.77rem; line-height:1.55; margin-top:.4rem; }
.radar-system-flow span { display:block; color:var(--accent); font:700 .78rem Consolas,monospace; margin-bottom:.7rem; }
.radar-system-flow strong { display:block; color:var(--heading); font-size:.95rem; margin-bottom:.55rem; }
.radar-system-flow p { margin:0; font-size:.82rem; line-height:1.55; }
.radar-equation,.radar-power { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:.3rem .6rem .6rem .3rem; padding:1.5rem 1.7rem; margin:1.7rem 0; }
.radar-equation strong,.radar-power strong { color:var(--heading); display:block; margin-bottom:.6rem; }
.radar-equation p { font-family:Consolas,monospace; font-size:.98rem; color:var(--heading); margin:.5rem 0; }
.radar-equation small { color:var(--muted); }
.radar-power p { margin:.35rem 0; }
.radar-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:2rem 0; }
.radar-photo-grid img { width:100%; height:265px; object-fit:contain; border-radius:6px; }
.radar-simulation-grid img { height:280px; }
.project-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.project-cover:has(img) .project-cover-tag { background:rgba(11,18,32,.83); color:#dcf7f1; padding:.4rem .65rem; border-radius:4px; }
@media(max-width:1050px) { .radar-metrics,.radar-system-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:730px) { .radar-visual-grid,.radar-photo-grid {grid-template-columns:1fr;} .radar-visual img {height:310px} .radar-photo-grid img {height:250px} }
@media(max-width:450px) { .radar-metrics,.radar-system-flow {grid-template-columns:1fr;} .radar-visual img {height:270px;} .radar-equation,.radar-power {padding:1.1rem;} }


/* Self-levelling gimbal - responsive hardware and control case study */
.gimbal-hero-gallery,.gimbal-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.55rem 0 1rem; max-width:1100px; }
.gimbal-hero-gallery figure,.gimbal-photo-grid figure { display:flex; flex-direction:column; justify-content:space-between; margin:0; min-width:0; padding:.85rem; border-radius:11px; background:var(--panel); border:1px solid var(--line); }
.gimbal-hero-gallery img { display:block; width:100%; height:315px; object-fit:contain; border-radius:6px; }
.gimbal-photo-grid img { display:block; width:100%; height:270px; object-fit:contain; border-radius:6px; }
.gimbal-hero-gallery figcaption,.gimbal-photo-grid figcaption { padding:.75rem .25rem .1rem; font-size:.81rem; line-height:1.5; color:var(--muted); text-align:center; }
.gimbal-metrics,.gimbal-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.95rem; margin:1.6rem 0 1.9rem; }
.gimbal-metrics>div,.gimbal-flow>div { min-width:0; padding:1.25rem 1rem; border-radius:9px; background:var(--panel); border:1px solid var(--line); }
.gimbal-metrics strong { display:block; font-size:1.16rem; color:var(--heading); line-height:1.45; }
.gimbal-metrics span {display:block; margin-top:.4rem; font-size:.77rem; line-height:1.55; color:var(--muted);}
.gimbal-flow span { display:block; margin-bottom:.6rem; font:700 .77rem Consolas,monospace; color:var(--accent); }
.gimbal-flow strong {display:block; margin-bottom:.6rem; font-size:.94rem; color:var(--heading);}
.gimbal-flow p {margin:0; font-size:.82rem; line-height:1.55;}
.gimbal-formula {margin:1.65rem 0; border-left:3px solid var(--accent); border-radius:3px 10px 10px 3px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); padding:1.35rem 1.6rem;}
.gimbal-formula strong {display:block; color:var(--heading); margin-bottom:.8rem;}
.gimbal-formula p {overflow-x:auto; margin:0 0 .6rem; padding:.25rem 0; color:var(--heading); }
.gimbal-formula code {font-size:.82rem; white-space:nowrap; color:var(--heading);}
.gimbal-formula small {display:block; color:var(--muted); line-height:1.5;}
.gimbal-spec {max-width:730px; margin:1.2rem 0 1.7rem; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.gimbal-spec>div {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; padding:.85rem 1.2rem; border-bottom:1px solid var(--line); font-size:.88rem;}
.gimbal-spec>div:last-child {border-bottom:0;}
.gimbal-spec>div:first-child {background:var(--panel); color:var(--heading);}
.gimbal-web-routes>div {grid-template-columns:minmax(100px,1fr) minmax(0,3fr);}
.gimbal-code-note {margin:1.7rem 0; max-width:840px;}
.gimbal-code-note>strong {display:block; color:var(--heading); margin-bottom:1rem;}
.gimbal-code-note pre {margin-bottom:.9rem;}
.gimbal-code-note p {margin:0;}
.gimbal-photo-grid figure.gimbal-wide-img img {height:270px;}
/* Make image covers reliable in split view, preserving original aspect ratio. */
@media(max-width:1050px) { .gimbal-metrics,.gimbal-flow {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:730px) { .gimbal-hero-gallery,.gimbal-photo-grid {grid-template-columns:1fr;} .gimbal-hero-gallery img {height:290px;} .gimbal-photo-grid img {height:250px;} }
@media(max-width:470px) { .gimbal-metrics,.gimbal-flow {grid-template-columns:1fr;} .gimbal-formula {padding:1rem;} }


/* Gimbal mathematics as readable, accessible typeset equations. */
.gimbal-math-row { padding:.7rem 0; border-top:1px solid var(--line); }
.gimbal-math-row:first-of-type { margin-top:.75rem; }
.gimbal-math-label { display:block; margin-bottom:.4rem; color:var(--muted); font-size:.76rem; letter-spacing:.04em; }
.gimbal-math-line { max-width:100%; overflow-x:auto; color:var(--heading); font-family:"Cambria Math","STIX Two Math",Georgia,serif; font-size:clamp(1.05rem,1.65vw,1.4rem); line-height:1.8; white-space:nowrap; }
.gimbal-math-line sub { font-size:.67em; vertical-align:sub; }
.gimbal-fraction { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.12; font-size:.88em; margin:0 .2em; }
.gimbal-fraction > span:first-child { border-bottom:1px solid currentColor; padding:0 .26em .12em; }
.gimbal-fraction > span:last-child {padding:.12em .26em 0;}
.gimbal-formula small { margin-top:.85rem; }
/* Zoom central PCB schematic for the project thumbnail; a link opens the uncropped original. */
.gimbal-schematic-figure { justify-content:space-between; }
.gimbal-schematic-preview { display:flex; align-items:center; justify-content:center; overflow:hidden; width:100%; height:270px; border-radius:6px; background:var(--page); cursor:zoom-in; }
.gimbal-schematic-preview img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.55); transform-origin:center; transition:transform .2s ease; }
.gimbal-schematic-preview:hover img,.gimbal-schematic-preview:focus-visible img { transform:scale(1.85); }
.gimbal-schematic-figure figcaption a { text-decoration:underline; color:var(--accent); }
@media(max-width:730px){.gimbal-schematic-preview {height:250px;}.gimbal-math-line {font-size:1.05rem;}}
@media(prefers-reduced-motion:reduce){.gimbal-schematic-preview img{transition:none;}}


/* Brayton cycle case study - analytical plots, equations, and model evidence. */
.brayton-main-plot {margin:1.6rem 0 1rem; max-width:850px; padding:1rem; background:var(--panel); border:1px solid var(--line); border-radius:12px;}
.brayton-main-plot>a {display:block; border:0; background:#fff; border-radius:6px; overflow:hidden;}
.brayton-main-plot img {display:block; height:390px; width:100%; object-fit:contain;}
.brayton-main-plot figcaption,.brayton-figure-grid figcaption {font-size:.82rem; line-height:1.5; color:var(--muted); text-align:center; padding:.85rem .2rem .12rem;}
.brayton-main-plot figcaption a,.brayton-figure-grid figcaption a {color:var(--accent); border:0; text-decoration:underline;}
.brayton-metrics,.brayton-flow {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1.5rem 0 2rem;}
.brayton-metrics>div,.brayton-flow>div {background:var(--panel); border:1px solid var(--line); border-radius:10px; min-width:0; padding:1.2rem 1rem;}
.brayton-metrics strong {display:block; color:var(--heading); font-size:1.18rem; line-height:1.4;}
.brayton-metrics span {display:block; color:var(--muted); font-size:.77rem; line-height:1.55; margin-top:.4rem;}
.brayton-flow span {display:block; color:var(--accent); font:.78rem Consolas,monospace; margin-bottom:.7rem;}
.brayton-flow strong {display:block; color:var(--heading); font-size:.94rem; margin-bottom:.55rem;}
.brayton-flow p {margin:0; font-size:.82rem; line-height:1.55;}
.brayton-parameter-wrap,.brayton-results-wrap {overflow-x:auto; width:100%; margin:1.5rem 0;}
.brayton-parameter-wrap table {min-width:700px;}
.brayton-results {min-width:700px; table-layout:auto;}
.brayton-equations {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.5rem 0 1.8rem;}
.brayton-equations>div {min-width:0; padding:1.2rem 1.35rem; border-radius:8px; border:1px solid var(--line); background:var(--panel);}
.brayton-equations span {display:block; font-size:.76rem; margin-bottom:.6rem; color:var(--muted);}
.brayton-equations p {margin:0; white-space:nowrap; overflow-x:auto; font:1.1rem/1.9 "Cambria Math",Georgia,serif; color:var(--heading);}
.brayton-equations sub,.brayton-equations sup {font-size:.67em;}
.brayton-figure-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.7rem 0 2rem;}
.brayton-figure-grid figure {margin:0; min-width:0; padding:.85rem; border:1px solid var(--line); border-radius:10px; background:var(--panel);}
.brayton-figure-grid figure>a {display:block; overflow:hidden; border:0; background:#fff; border-radius:5px;}
.brayton-figure-grid img {display:block; width:100%; height:285px; object-fit:contain;}
.project-card.accent-amber .project-cover:has(img) {background:#fff;}
.project-card.accent-amber .project-cover img {object-fit:contain;}
@media(max-width:1050px){.brayton-metrics,.brayton-flow {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:730px){.brayton-figure-grid,.brayton-equations {grid-template-columns:1fr;}.brayton-main-plot img {height:280px;}}
@media(max-width:460px){.brayton-metrics,.brayton-flow {grid-template-columns:1fr;}.brayton-figure-grid img {height:230px;}}


/* Open source photographs, PCB layouts and CAD models at full resolution. */
.gimbal-image-expand {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  border:0;
  cursor:zoom-in;
  border-radius:6px;
  overflow:hidden;
}
.gimbal-image-expand img {
  display:block;
  max-width:100%;
}
.gimbal-image-expand:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.gimbal-hero-gallery figcaption .gimbal-expand-label,
.gimbal-photo-grid figcaption .gimbal-expand-label {
  color:var(--accent);
  text-decoration:underline;
  font-weight:600;
  border:0;
  white-space:nowrap;
}
.gimbal-image-expand:hover img { opacity:.92; }
@media (prefers-reduced-motion:reduce) {
  .gimbal-image-expand img { transition:none; }
}


/* Universal click-to-expand images on every engineering case study. */
#main .case-hero a.portfolio-image-expander,
#main .case-section a.portfolio-image-expander,
#dynamic-project a.portfolio-image-expander {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:0;
  border-radius:6px;
  cursor:zoom-in;
}
#main a.portfolio-image-expander:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
#main a.portfolio-image-expander img {
  max-width:100%;
}
#main .case-hero figcaption a.portfolio-expand-link,
#main .case-section figcaption a.portfolio-expand-link,
#dynamic-project figcaption a.portfolio-expand-link {
  color:var(--accent);
  border:0;
  text-decoration:underline;
  font-weight:600;
  white-space:nowrap;
}
#main .portfolio-auto-image {
  margin:1.25rem 0;
  max-width:900px;
}
#main .portfolio-auto-image figcaption {
  padding-top:.6rem;
  color:var(--muted);
  text-align:center;
  font-size:.82rem;
}


/* Archive projects: reusable compact case-study layout */
.archive-case-hero {padding-bottom:1.75rem;}
.archive-technologies { margin:.9rem 0 0; color:var(--muted); font-size:.85rem; letter-spacing:.02em; }
.archive-facts {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; margin:1.6rem 0 1rem;}
.archive-facts>div {min-width:0; padding:1.15rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--panel);}
.archive-facts strong {display:block; font-size:1.12rem; line-height:1.35; color:var(--heading);}
.archive-facts span {display:block; color:var(--muted); margin-top:.45rem; font-size:.78rem; line-height:1.5;}
.archive-case-section {max-width:1100px;}
.archive-bullet-list {margin:1.1rem 0 1.7rem; padding-left:1.3rem; color:var(--text);}
.archive-bullet-list li {margin-bottom:.45rem; padding-left:.1rem;}
.archive-figure-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.6rem 0 1.7rem;}
.archive-image-figure {min-width:0; margin:0; padding:.9rem; background:var(--panel); border:1px solid var(--line); border-radius:10px;}
.archive-image-figure[hidden] {display:none !important;}
.archive-image-figure>img {width:100%; display:block; height:310px; object-fit:contain; border-radius:6px;}
.archive-image-figure figcaption {font-size:.82rem; line-height:1.5; padding:.8rem .15rem 0; text-align:center; color:var(--muted);}
.archive-image-figure figcaption a {color:var(--accent);}
.archive-case-section .section-header {margin-bottom:1.1rem;}
@media(max-width:1050px){.archive-facts {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:690px){.archive-figure-grid {grid-template-columns:1fr;}.archive-image-figure>img {height:260px;}}
@media(max-width:440px){.archive-facts {grid-template-columns:1fr;}}


/* Concise credentials beneath skills (from the original Notion profile). */
.portfolio-credentials {margin-top:1.7rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:9px; background:var(--panel);}
.portfolio-credentials h3 {margin:0 0 .55rem; font-size:.98rem;}
.portfolio-credentials p {margin:0; font-size:.84rem; color:var(--muted); line-height:1.6;}


/* Archived project technical examples */
.archive-code-example { max-width:920px; margin:1.7rem 0 1.9rem; }
.archive-code-example .robot-code { margin:.6rem 0 0; }
.archive-code-caption { font-weight:600; color:var(--heading); font-size:.84rem; margin:0; }
.archive-case-section .archive-bullet-list + .archive-figure-grid { margin-top:1.55rem; }


/* Compact visual grid distinguishing secondary projects from featured case studies. */
.archive-showcase-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0 2.8rem;}
.archive-teaser {display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--heading);text-decoration:none;transition:border-color .16s ease,transform .16s ease;}
.archive-teaser:hover,.archive-teaser:focus-visible {border-color:var(--accent);transform:translateY(-2px);outline-offset:3px;}
.archive-teaser-cover {height:170px;display:flex;align-items:center;justify-content:center;background:var(--page);border-bottom:1px solid var(--line);overflow:hidden;}
.archive-teaser-cover img {display:block;width:100%;height:100%;object-fit:contain;padding:.55rem;}
.archive-teaser-placeholder {display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:100%;height:100%;padding:1.35rem;color:var(--accent);background:linear-gradient(145deg,var(--panel),var(--page));}
.archive-teaser-placeholder span {font:700 .66rem Consolas,monospace;letter-spacing:.08em;opacity:.86;}
.archive-teaser-placeholder strong {font:600 clamp(1.3rem,2.5vw,2rem) Consolas,monospace;letter-spacing:.03em;}
.archive-teaser-body {display:flex;flex-direction:column;flex:1;gap:.6rem;padding:1.15rem 1.2rem 1.25rem;}
.archive-teaser-category {font:700 .68rem Consolas,monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);}
.archive-teaser-body>strong {font-size:1.03rem;line-height:1.3;color:var(--heading);}
.archive-teaser-body>p {font-size:.84rem;line-height:1.55;margin:0;color:var(--muted);flex:1;}
.archive-teaser-view {display:block;margin-top:.25rem;font-weight:700;font-size:.78rem;color:var(--accent);}
.archive-browse-label {margin-bottom:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line);}
.archive-browse-label h3 {margin:0 0 .3rem;font-size:1.22rem;}
.archive-browse-label p {margin:0;color:var(--muted);font-size:.9rem;}
@media(max-width:1050px) {.archive-showcase-grid {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px) {.archive-showcase-grid {grid-template-columns:1fr;}.archive-teaser-cover {height:200px;}}
@media(prefers-reduced-motion:reduce) {.archive-teaser {transition:none;}.archive-teaser:hover {transform:none;}}

/* Project catalogue: searchable, multi-tag and accessible on mobile. */
.explore-controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.2rem;margin:1.4rem 0 1.5rem}
.explore-controls label{display:block;color:var(--heading);font-weight:700;margin-bottom:.55rem;font-size:.9rem}
#project-search{width:100%;max-width:100%;border:1px solid var(--line);background:var(--page);color:var(--heading);border-radius:8px;padding:.85rem 1rem;box-sizing:border-box}
#project-search:focus-visible,.project-filter:focus-visible,#project-clear:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.project-filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.project-filter{border:1px solid var(--line);background:var(--page);color:var(--heading);padding:.42rem .77rem;border-radius:30px;cursor:pointer;font-size:.8rem;font-weight:600;line-height:1.4}
.project-filter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#111827}
.explore-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
.explore-status p{margin:0;color:var(--muted);font-size:.85rem}
#project-clear{cursor:pointer;color:var(--accent);font-size:.85rem;background:transparent;border:0;padding:.4rem}
.explore-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.explore-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.explore-card-visual{height:185px;background:var(--page);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.explore-card-visual img{width:100%;height:100%;object-fit:contain;padding:.6rem}
.explore-card-placeholder{font:700 .72rem Consolas,monospace;color:var(--accent)}
.explore-card-content{padding:1.15rem;display:flex;flex-direction:column;flex:1;gap:.65rem}
.explore-card-type{font:700 .69rem Consolas,monospace;letter-spacing:.1em;color:var(--accent);margin:0}
.explore-card h3{font-size:1.1rem;margin:0;line-height:1.35}
.explore-card-content>p:not(.explore-card-type){margin:0;color:var(--muted);font-size:.85rem;line-height:1.55;flex:1}
.explore-card-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.explore-card-tags span{font-size:.7rem;line-height:1.35;padding:.25rem .5rem;border:1px solid var(--line);border-radius:30px;color:var(--muted)}
.explore-card-link{font-size:.81rem;font-weight:700;color:var(--accent);text-decoration:none}
.explore-empty{grid-column:1/-1;padding:1.6rem;border:1px dashed var(--line);border-radius:10px}
@media(max-width:700px){.explore-results{grid-template-columns:1fr}.explore-controls{padding:1rem}.explore-card-visual{height:190px}}

/* Keep project navigation independent of the long page content. */
@media screen and (min-width:1281px) {
  #sidebar {
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    height:100dvh;
  }
  #sidebar > .inner {
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
}
@media screen and (max-width:1280px) {
  #sidebar > .inner {
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
}