/*-----------------------------------*\
  #style.css

  Industrial technical console: cool slate/cloud light palette,
  white cards on soft hairline edges with ambient shadow, royal industrial blue accent.
  Layout adapted from vCard by codewithsadee (MIT) - see LICENSE.
  Components reference tokens only; raw values live in #TOKENS.
\*-----------------------------------*/





/*-----------------------------------*\
  #TOKENS
\*-----------------------------------*/

:root {

  /**
   * palette (cool cloud / slate)
   */

  /* surface canvas */
  --surface-page: #F0F4F9;   /* soft ice / cloud slate canvas */
  --surface-card: #FFFFFF;   /* pure white cards */
  --surface-raised: #E8EEF5; /* metallic slate-blue insets and plates */
  --surface-strong: #DFE5ED; /* chips and control outlines */

  /* borders and grid */
  --line: #D8DFE8;                         /* precision 1px divider */
  --line-soft: rgba(216, 223, 232, 0.75);  /* card edge: --line at 75%, the shadow carries the elevation */
  --line-strong: #BCC7D4;                  /* active / hover divider */
  --grid-line: rgba(30, 41, 59, 0.02);     /* 40px engineering grid, a watermark rather than a pattern */

  /* ink */
  --text-strong: #1E293B; /* primary ink (slate 900) */
  --text-body: #475569;   /* secondary technical body (slate 700) */
  --text-muted: #64748B;  /* metadata and labels (slate 500) */

  /* accents */
  --accent: #0052CC; /* royal industrial blue */
  --accent-muted: #2563EB;
  --accent-faint: rgba(0, 82, 204, 0.08);
  --on-accent: #FFFFFF;

  /* overlays */
  --scrim: color-mix(in srgb, var(--surface-card) 88%, transparent);
  --nav-glass: color-mix(in srgb, var(--surface-card) 85%, transparent);
  --backdrop: rgba(15, 23, 42, 0.55);

  /* plates behind product shots, diagrams and logos */
  --plate-white: #FFFFFF;
  --plate-grey: #E8EEF5;

  /* functional accent for the STARDOM badge only, sampled from the hardware */
  --accent-stardom: #45A6AA;

  /* ghost chips: hairline tags on a near-white ground; the Tools card re-maps them to an accent tint */
  --chip-surface: #F8FAFC;
  --chip-line: #E2E8F0;
  --chip-ink: #334155;
  --chip-surface-tint: rgba(0, 82, 204, 0.03);
  --chip-line-tint: rgba(0, 82, 204, 0.12);

  /**
   * typography
   */

  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 26px;
  --text-3xl: 32px;

  /* two weights per page */
  --weight-regular: 400;
  --weight-semibold: 600;

  --leading: 24px;
  --leading-tight: 1.3;

  /* role sizes, re-mapped at breakpoints */
  --size-h2: var(--text-xl);
  --size-h3: var(--text-lg);
  --size-h4: var(--text-base);
  --size-name: var(--text-lg);
  --size-body: var(--text-sm);
  --size-nav: var(--text-xs);

  /**
   * spacing
   */

  --space-1: 5px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 25px;
  --space-9: 30px;
  --space-10: 35px;
  --space-11: 40px;
  --space-12: 45px;
  --space-13: 50px;
  --space-14: 60px;
  --space-15: 71px;
  --space-16: 100px;

  /* 8-point steps for project-card rhythm */
  --space-card: 16px;    /* gaps inside a card, footer rule offset */
  --space-card-lg: 24px; /* card grid gap; card padding from 768px */

  /* page gutter: card side padding and outer frame, re-mapped at breakpoints */
  --gutter: 16px;

  /**
   * shape
   */

  --radius-sm: 0 20px;
  --radius-chip: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 20px;
  --radius-6: 30px;
  --radius-circle: 50%;

  /**
   * elevation
   */

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);  /* resting button */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.03), 0 10px 25px -5px rgba(15, 23, 42, 0.04); /* resting card: contact plus diffuse ambient layer */
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); /* hover, floating nav */
  --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.18); /* dialogs */

  /**
   * motion
   */

  --motion-base: 0.25s ease;
  --motion-transform: 0.3s ease;
  --motion-slow: 0.5s ease-in-out;
  --motion-fade: 0.5s ease backwards;
  --press: scale(0.98);
  --lift: translateY(-2px);

  /**
   * component dimensions
   */

  --avatar: 80px;
  --icon-box: 30px;
  --svc-icon: 40px;
  --badge-plate: 96px;
  --badge-logo: 64px;
  /* minimum touch target */
  --touch: 44px;
  /* bottom margin that keeps content clear of the bottom navbar below 1024px */
  --nav-clearance: 90px;
  /* side column from 1024px */
  --sidebar-width: 290px;
  /* project visual column beside the text; widened to 300px on wide cards (#RESPONSIVE, container-driven) */
  --work-media: 260px;
  /* narrowest chip column that still keeps a card's outbound link beside it */
  --work-chips-min: 240px;
  --dot: 7px;

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

li { list-style: none; }

img, svg { display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input, textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html {
  font-family: var(--font-sans);
  color-scheme: light;
}

html:has(dialog[open]) { overflow: hidden; }

/* engineering grid: hairlines every 40px behind the cards */
body {
  background-color: var(--surface-page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--space-11) var(--space-11);
  color: var(--text-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* read by screen readers, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

/* every structural card shares one surface: a soft edge, with the layered shadow doing the lifting */
.sidebar,
article,
.work-card,
.service-item,
.skill-card,
.contact-card {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
}

.sidebar,
article {
  border-radius: var(--radius-full);
  padding: var(--gutter);
  z-index: 1;
}

/* a little more air above and below than at the sides on phones; square again from 768px */
article { padding-block: var(--space-7); }

.separator {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: var(--space-5) 0;
}

.icon-box {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--text-base);
  color: var(--accent);
}

article { display: none; }

article.active {
  display: block;
  animation: fade var(--motion-fade);
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.h2 { font-size: var(--size-h2); }

.h3 { font-size: var(--size-h3); }

.h4 { font-size: var(--size-h4); }

.h5 { font-size: var(--text-sm); }

.article-title {
  position: relative;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-9);
}

.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--space-9);
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius-md);
}

.has-scrollbar::-webkit-scrollbar {
  width: var(--space-1);
  height: var(--space-1);
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--surface-strong);
  border-radius: var(--radius-md);
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--radius-md);
}

.has-scrollbar::-webkit-scrollbar-button { width: var(--space-7); }

.has-scrollbar:focus-visible { outline-offset: -2px; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ghost tags: hairline edge on a near-white ground, so a dense list reads as text rather than a wall of boxes */
.chip {
  background: var(--chip-surface);
  color: var(--chip-ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding: 3px var(--space-3);
  border: 1px solid var(--chip-line);
  border-radius: var(--radius-chip);
  transition: background var(--motion-base), border-color var(--motion-base), color var(--motion-base), transform var(--motion-base);
}

.chip:hover {
  background: var(--surface-card);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.bullet-list {
  display: grid;
  gap: var(--space-2);
}

.bullet-list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--text-body);
  font-size: var(--size-body);
  line-height: var(--leading);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  top: calc(var(--leading) / 2);
  left: 0;
  width: var(--space-1);
  height: var(--space-1);
  border-radius: var(--radius-circle);
  background: var(--accent);
  transform: translateY(-50%);
}

.muted { color: var(--text-muted); }

/* button */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  box-shadow: var(--shadow-sm);
  transition: background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-transform);
}

.btn .icon { font-size: var(--text-base); }

.btn:hover,
.btn:focus-visible {
  background: var(--accent-muted);
  border-color: var(--accent-muted);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: var(--press); }

.btn-block { width: 100%; }





/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: var(--gutter) var(--space-4) var(--nav-clearance);
  min-width: 259px;
}





/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  /* the avatar row plus padding and the 1px border top and bottom */
  --sidebar-closed: calc(var(--avatar) + 2 * var(--gutter) + 2px);

  margin-bottom: var(--gutter);
  max-height: var(--sidebar-closed);
  overflow: hidden;
  transition: max-height var(--motion-slow);
}

/* --sidebar-open is measured by script.js; the fallback covers no-JS */
.sidebar.active { max-height: var(--sidebar-open, 720px); }

.sidebar-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-5);
}

.info-content { min-width: 0; }

.avatar-box {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--avatar);
  height: var(--avatar);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.avatar-monogram {
  color: var(--accent);
  font-size: calc(var(--avatar) * 0.36);
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
}

/* the headshot is cut as a circle, so the frame follows it once a photo is present */
.avatar-box:has(img) {
  border-radius: var(--radius-circle);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-md);
}

.avatar-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow);
}

.avatar-box:hover img { transform: scale(1.05); }

.info-content .name {
  color: var(--text-strong);
  font-size: var(--size-name);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.25px;
  margin-bottom: var(--space-3);
}

.info-content .title {
  color: var(--text-strong);
  background: var(--surface-strong);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  width: max-content;
  max-width: 100%;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
}

/* a corner tab that stays in the flex row, so the name and title wrap before they can run under it;
   the negative margins pull it into the card's top-right corner */
.info_more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  min-width: var(--touch);
  min-height: var(--touch);
  margin: calc(var(--gutter) * -1) calc(var(--gutter) * -1) 0 auto;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  background: var(--surface-raised);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3);
  transition: background var(--motion-base), color var(--motion-base), transform var(--motion-transform);
  z-index: 1;
}

.info_more-btn:hover,
.info_more-btn:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.info_more-btn:active { transform: var(--press); }

.info_more-btn span { display: none; }

.info_more-btn .icon {
  font-size: var(--text-base);
  transition: transform var(--motion-transform);
}

.sidebar.active .info_more-btn .icon { transform: rotate(0.5turn); }

.sidebar-info_more {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-slow), visibility var(--motion-slow);
}

.sidebar.active .sidebar-info_more {
  opacity: 1;
  visibility: visible;
}

.contacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.contact-item {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.contact-info {
  min-width: 0;
  flex: 1;
}

.contact-title {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  margin-bottom: 2px;
}

.contact-info :is(.contact-link, .contact-text, address) {
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.contact-info .contact-link {
  display: block;
  overflow-wrap: anywhere;
  transition: color var(--motion-base);
}

.contact-info address { font-style: normal; }

.contact-info .contact-link:hover,
.contact-info .contact-link:focus-visible { color: var(--accent); }

.social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-1);
  padding-left: var(--space-2);
}

.social-item .social-link {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-lg);
  transition: color var(--motion-base), transform var(--motion-transform);
}

.social-item .social-link:hover,
.social-item .social-link:focus-visible { color: var(--accent); }

.social-item .social-link:active { transform: var(--press); }

.sidebar-cv { margin-top: var(--space-5); }





/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--nav-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-3);
}

.navbar-link {
  display: block;
  color: var(--text-body);
  font-size: var(--size-nav);
  font-weight: var(--weight-semibold);
  padding: var(--space-7) var(--space-2);
  transition: color var(--motion-base);
}

.navbar-link:hover,
.navbar-link:focus-visible { color: var(--text-strong); }

.navbar-link:active { color: var(--accent-muted); }

.navbar-link.active { color: var(--accent); }





/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .article-title { margin-bottom: var(--space-5); }

/* one body size throughout: 16px desktop / 14px mobile, held to a readable measure */
.about-text {
  font-size: var(--size-body);
  line-height: 1.65;
  max-width: 68ch;
  color: var(--text-body);
  margin-bottom: var(--space-9);
}

.about-text p { margin-bottom: var(--space-5); }

.about-text .about-cta {
  margin-top: var(--space-6);
  color: var(--text-strong);
}

/* a button that reads as a link: switches to the Contact tab */
.inline-link {
  display: inline;
  color: var(--accent);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--motion-base);
}

.inline-link:hover,
.inline-link:focus-visible { color: var(--accent-muted); }



/**
 * #service
 */

.service { margin-bottom: var(--space-10); }

.service-title { margin-bottom: var(--space-7); }

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.service-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-transform);
}

.service-item:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: var(--lift);
}

.service-icon-box {
  flex-shrink: 0;
  margin-top: var(--space-1);
  color: var(--accent);
}

.svc-icon {
  width: var(--svc-icon);
  height: var(--svc-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-item-title { margin-bottom: var(--space-2); }

.service-item-text {
  color: var(--text-body);
  font-size: var(--size-body);
  line-height: var(--leading);
}



/**
 * #toolbox: badge grid
 * every plate has the same height; logos are contained at --badge-logo,
 * photos on gradient backdrops fill the plate (cover) without distortion
 */

.toolbox { margin-bottom: var(--space-3); }

.toolbox-title { margin-bottom: var(--space-7); }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.badge {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: border-color var(--motion-base), transform var(--motion-transform);
}

.badge:hover {
  border-color: var(--line-strong);
  transform: var(--lift);
}

.badge-feature { grid-column: span 2; }

.badge-plate {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--badge-plate);
  padding: var(--space-3);
  background: var(--plate-white);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.badge-plate img {
  max-width: 100%;
  max-height: var(--badge-logo);
  width: auto;
  height: auto;
  object-fit: contain;
}

.badge-feature .badge-plate img { max-height: calc(var(--badge-plate) - 2 * var(--space-3)); }

.badge-plate-photo {
  padding: 0;
  background: var(--plate-grey);
}

.badge-plate-photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* drawn above the photo: an inset shadow would sit underneath it */
.badge-accent-stardom .badge-plate::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-stardom);
}

.badge-stamp {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--accent);
  border-radius: var(--radius-md);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.badge-name {
  margin: var(--space-3) var(--space-1) 0;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.badge-note {
  margin: 2px var(--space-1) var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}





/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.timeline { margin-bottom: var(--space-9); }

.timeline .title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.timeline-list {
  --rail: var(--space-9);

  font-size: var(--size-body);
  margin-left: var(--space-12);
}

.timeline-item { position: relative; }

.timeline-item:not(:last-child) { margin-bottom: var(--space-9); }

.timeline-item-title {
  font-size: var(--size-h4);
  margin-bottom: var(--space-1);
}

.timeline-org { color: var(--text-strong); }

.timeline-date {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.timeline-place {
  color: var(--text-muted);
  font-style: italic;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--space-8) * -1);
  left: calc(var(--rail) * -1);
  width: 1px;
  height: calc(100% + var(--space-13));
  background: var(--line);
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: calc(var(--leading-tight) * var(--size-h4) / 2);
  left: calc(var(--rail) * -1);
  width: var(--dot);
  height: var(--dot);
  background: var(--accent);
  border-radius: var(--radius-circle);
  box-shadow: 0 0 0 4px var(--line);
  transform: translate(-50%, -50%);
}

.timeline-text {
  color: var(--text-body);
  line-height: var(--leading);
  margin-top: var(--space-2);
}

.timeline-group { margin-top: var(--space-5); }

.timeline-group-title {
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* resume prose is justified; hyphenation keeps narrow columns free of wide word gaps */
.timeline-text,
.timeline .bullet-list li {
  text-align: justify;
  hyphens: auto;
}





/*-----------------------------------*\
  #SKILLS
\*-----------------------------------*/

.skill-grid,
.extras-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.skill-extras { margin-top: var(--space-7); }

.skill-card {
  padding: var(--space-7);
  border-radius: var(--radius-xl);
}

/* the Tools card re-maps its chips to a faint accent tint; hover still lands on the shared chip state */
.skill-card-tools {
  --chip-surface: var(--chip-surface-tint);
  --chip-line: var(--chip-line-tint);
  --chip-ink: var(--text-strong);
}

.skill-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.plain-list {
  display: grid;
  gap: var(--space-2);
}

.plain-list li {
  color: var(--text-body);
  font-size: var(--size-body);
  line-height: var(--leading);
}





/*-----------------------------------*\
  #PROJECTS
\*-----------------------------------*/

/* filter tab bar: scrolls sideways on narrow screens instead of wrapping */

.filter-bar {
  display: flex;
  gap: var(--space-2);
  margin: 0 calc(var(--gutter) * -1) var(--space-8);
  padding: 0 var(--gutter) var(--space-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
  transition: border-color var(--motion-base), background var(--motion-base), color var(--motion-base), transform var(--motion-transform);
}

.filter-tab:hover { border-color: var(--line-strong); }

.filter-tab:active { transform: var(--press); }

.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.filter-count {
  min-width: var(--space-7);
  padding: 0 var(--space-1);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-align: center;
}

.filter-tab.active .filter-count {
  background: color-mix(in srgb, var(--on-accent) 15%, transparent);
  color: var(--on-accent);
}

/* cards: strictly one per row at every width; from 768px the visual sits left of the text */

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-card-lg);
  width: 100%;
  margin-bottom: var(--space-3);
}

/* phones: one vertical flow, visual on top */
.work-card {
  display: none;
  flex-direction: column;
  gap: var(--space-card);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

.work-card.active {
  display: flex;
  animation: fade var(--motion-fade);
}

.work-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.work-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.work-context {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.work-title {
  color: var(--text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

/* every visual shares one 16:9 frame; the modifier decides how the image fills it */
.work-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

button.work-visual { cursor: zoom-in; }

button.work-visual:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* photos: full bleed */
.work-visual-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow);
}

.work-visual-cover:hover img { transform: scale(1.04); }

/* logos and diagrams: contained on a slate plate so white artwork doesn't vanish into the white card;
   multiply sinks each image's baked-in white ground into the plate tone. The lightbox still shows them on white */
.work-visual-plate {
  --lightbox-plate: var(--plate-white);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding: var(--space-4);
  background: var(--plate-grey);
}

.work-visual-plate img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.work-zoom {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  padding: var(--space-1);
  background: var(--scrim);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--motion-base);
}

button.work-visual:hover .work-zoom,
button.work-visual:focus-visible .work-zoom { opacity: 1; }

/* justified like the resume bullets; hyphenation keeps the narrow tablet column free of wide word gaps */
.work-bullets li {
  font-size: var(--text-sm);
  text-align: justify;
  hyphens: auto;
}

/* every card ends on the same footer: divider, then chips. margin-top pins it to the card's bottom edge.
   Where there is an outbound link it sits beside the chips, centred on them, and drops under them
   only when the card is too narrow for both */
.work-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-card);
  border-top: 1px solid var(--line);
}

.work-foot:has(.work-link) {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.work-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  border-bottom: 1px solid var(--accent-muted);
  transition: border-color var(--motion-base);
}

.work-link:hover,
.work-link:focus-visible { border-bottom-color: var(--accent); }

.work-link:active { color: var(--accent-muted); }

.work-chips { gap: var(--space-1); }

/* row footers only: in the column footer this basis would become a height */
.work-foot:has(.work-link) .work-chips { flex: 1 1 var(--work-chips-min); }

.work-chips .chip {
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
}





/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact-intro {
  color: var(--text-body);
  font-size: var(--size-body);
  line-height: var(--leading);
  margin-bottom: var(--space-8);
}

.contact-cards { margin-bottom: var(--space-10); }

.contact-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* the copy button wraps under the address when the card is too narrow for both */
.contact-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  transition: background var(--motion-base), border-color var(--motion-base), transform var(--motion-transform);
}

.contact-card:hover,
.contact-card:focus-visible {
  background: var(--accent-faint);
  border-color: var(--accent);
}

a.contact-card:active { transform: var(--press); }

.contact-card-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.contact-card .contact-title { display: block; }

.contact-card-value {
  display: block;
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

/* card that holds its own link: the link's hit area stretches over the whole card */
.contact-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}

.contact-card-link:focus-visible { outline: none; }

.contact-card-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* sits above the stretched link */
.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  transition: background var(--motion-base), border-color var(--motion-base), transform var(--motion-transform);
}

.copy-btn:hover,
.copy-btn:focus-visible {
  background: var(--accent-faint);
  border-color: var(--accent);
}

.copy-btn:active { transform: var(--press); }





/*-----------------------------------*\
  #DIALOGS
\*-----------------------------------*/

@keyframes dialogIn {
  0% { transform: scale(1.1); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.dialog-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  background: var(--surface-strong);
  border-radius: var(--radius-md);
  width: var(--space-9);
  height: var(--space-9);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-strong);
  font-size: var(--text-lg);
  opacity: 0.7;
  transition: opacity var(--motion-base), transform var(--motion-transform);
}

.dialog-close:hover,
.dialog-close:focus-visible { opacity: 1; }

.dialog-close:active { transform: var(--press); }



/**
 * #lightbox
 */

.lightbox {
  width: calc(100% - var(--space-8));
  max-width: 1100px;
  max-height: none;
  margin: auto;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: var(--backdrop);
  backdrop-filter: blur(2px);
}

.lightbox[open] { animation: dialogIn var(--motion-base); }

.lightbox-figure {
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.lightbox-figure img {
  width: 100%;
  max-height: calc(100dvh - 160px);
  object-fit: contain;
  background: var(--lightbox-plate, var(--plate-white));
  border-radius: var(--radius-md);
}

.lightbox-caption {
  padding: var(--space-3) var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.lightbox-close {
  top: calc(var(--space-5) * -1);
  right: calc(var(--space-5) * -1);
  opacity: 1;
  box-shadow: var(--shadow-md);
}





/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * responsive larger than 580px screen
 */

@media (min-width: 580px) {

  :root {
    --size-h2: var(--text-3xl);
    --size-h3: var(--text-xl);
    --size-h4: var(--text-lg);
    --size-name: var(--text-2xl);
    --size-body: var(--text-base);
    --size-nav: var(--text-sm);
    --avatar: 120px;
    --icon-box: var(--space-12);
    --badge-plate: 104px;
  }



  /**
   * #REUSED STYLE
   */

  .sidebar, article {
    width: 520px;
    margin-inline: auto;
  }

  .article-title { padding-bottom: var(--space-5); }

  .article-title::after {
    width: var(--space-11);
    height: var(--space-1);
  }

  .icon-box {
    border-radius: var(--radius-lg);
    font-size: var(--text-lg);
  }



  /**
   * #SIDEBAR
   */

  .sidebar-info { gap: var(--space-8); }

  .avatar-box { border-radius: var(--radius-6); }

  .info-content .name { margin-bottom: var(--space-5); }

  .info-content .title { padding: var(--space-1) var(--space-6); }

  .info_more-btn { padding: var(--space-3) var(--space-5); }

  .info_more-btn span { display: block; }

  .info_more-btn .icon { display: none; }

  .separator { margin: var(--space-9) 0; }



  /**
   * #NAVBAR
   */

  .navbar { border-radius: var(--radius-full) var(--radius-full) 0 0; }

  .navbar-list { gap: var(--space-7); }



  /**
   * #ABOUT
   */

  .about .article-title { margin-bottom: var(--space-7); }

  .about-text { margin-bottom: var(--space-11); }

  .service-item {
    gap: var(--space-6);
    padding: var(--space-9);
  }

  .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }



  /**
   * #RESUME
   */

  .timeline-list {
    --rail: var(--space-11);
    margin-left: var(--space-14);
  }

  .timeline-item:not(:last-child) { margin-bottom: var(--space-11); }



  /**
   * #SKILLS
   */

  .skill-card { padding: var(--space-9); }



  /**
   * #PROJECTS
   */

  .work-card { padding: var(--space-7); }

}





/**
 * responsive larger than 768px screen (tablet): sidebar still stacked on top, skill cards pair up
 */

@media (min-width: 768px) {

  :root { --gutter: var(--space-9); }



  /**
   * REUSED STYLE
   */

  .sidebar, article { width: 700px; }

  article { padding-block: var(--gutter); }

  .has-scrollbar::-webkit-scrollbar-button { width: var(--space-16); }



  /**
   * MAIN
   */

  main { margin-top: var(--space-14); }



  /**
   * SIDEBAR
   */

  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9) var(--space-5);
  }

  .sidebar-cv { width: max-content; }



  /**
   * NAVBAR
   */

  .navbar-link { --size-nav: var(--text-base); }



  /**
   * SKILLS
   */

  .skill-grid,
  .extras-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-8);
  }

  .skill-card-wide { grid-column: 1 / -1; }



  .article-title { padding-bottom: var(--space-7); }

}





/**
 * responsive larger than 1024px screen (desktop): sticky sidebar column beside the content
 */

@media (min-width: 1024px) {

  /**
   * MAIN
   */

  /* capped at 1200px, and never closer than 30px to the window edges below that */
  main {
    width: min(1200px, 100% - 2 * var(--space-9));
    margin: var(--space-11) auto var(--space-14);
    display: flex;
    align-items: flex-start;
    gap: var(--space-9);
  }

  .main-content {
    position: relative;
    flex: 1;
    min-width: 0;
  }

  article { width: auto; }



  /**
   * SIDEBAR: fixed-width column, contacts always open
   */

  .sidebar,
  .sidebar.active {
    position: sticky;
    top: var(--space-9);
    width: var(--sidebar-width);
    flex-shrink: 0;
    max-height: max-content;
    margin-bottom: 0;
    padding-top: var(--space-14);
  }

  .sidebar-info { flex-direction: column; }

  .avatar-box { --avatar: 150px; }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title { margin: auto; }

  .info_more-btn { display: none; }

  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }

  .contacts-list { grid-template-columns: 1fr; }

  .contact-item { gap: var(--space-4); }

  .contact-info :is(.contact-link, .contact-text, address) { font-size: var(--text-sm); }

  .separator:last-of-type {
    margin: var(--space-5) 0;
    opacity: 0;
  }

  .social-list { justify-content: center; }

  .sidebar-cv { width: 100%; }



  /**
   * NAVBAR
   */

  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-7);
    box-shadow: none;
  }

  .navbar-list {
    gap: var(--space-9);
    padding: 0 var(--space-7);
  }

  /* page titles start below the tab strip, so long section names never run under it */
  article > header { padding-top: var(--space-13); }

}





/**
 * responsive larger than 1250px screen
 */

@media (min-width: 1250px) {

  /**
   * RESET
   */

  body::-webkit-scrollbar { width: var(--space-7); }

  body::-webkit-scrollbar-track { background: var(--surface-page); }

  body::-webkit-scrollbar-thumb {
    border: var(--space-1) solid var(--surface-page);
    background: var(--line);
    border-radius: var(--radius-full);
  }

  body::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

  body::-webkit-scrollbar-button { height: var(--space-14); }



  /**
   * RESUME
   */

  .timeline-text,
  .timeline-group { max-width: 700px; }

}



/**
 * container-driven layouts
 * from 1024px the sidebar column takes 320px beside the content, so a 1024-1220px window
 * leaves these sections less room than a tablet does. They lay out by their own width instead
 * of the window's: tablet and wide desktop get the paired and split layouts, the squeeze in
 * between falls back rather than crushing the text column
 */

.projects { container: projects / inline-size; }

.service { container: services / inline-size; }

.contact-cards { container: contacts / inline-size; }

/* project cards split visual | text once the text column keeps ~270px beside the visual */
@container projects (min-width: 600px) {

  .work-card { padding: var(--space-card-lg); }

  .work-card.active {
    display: grid;
    grid-template-columns: var(--work-media) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  /* full row height, so the footer still pins to the bottom when the text is shorter than the visual */
  .work-body { align-self: stretch; }

}

/* wide cards: the media track grows for diagram legibility */
@container projects (min-width: 760px) {

  .work-card.active {
    --work-media: 300px;
    gap: var(--space-card-lg);
  }

}

/* service cards pair up; while a pair is still narrow the icon moves above the text */
@container services (min-width: 600px) {

  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-8);
  }

}

@container services (min-width: 600px) and (max-width: 759px) {

  .service-item {
    flex-direction: column;
    gap: var(--space-4);
  }

  .service-icon-box { margin-top: 0; }

}

/* contact cards pair up once the email card fits its Copy button on one line (~360px per card) */
@container contacts (min-width: 740px) {

  .contact-card-list { grid-template-columns: 1fr 1fr; }

}





/*-----------------------------------*\
  #ACCESSIBILITY
\*-----------------------------------*/

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}