:root {
  --ink: #102247;
  --muted: #637089;
  --line: #d7e3f2;
  --blue: #2f7dcc;
  --blue-deep: #1f65b5;
  --blue-pale: #ecf5ff;
  --surface: #ffffff;
  --page: #f8fbff;
  --shadow: 0 22px 70px -44px rgba(36, 93, 157, 0.5);
  font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 18% 4%, rgba(115, 167, 219, 0.2), transparent 25rem),
    linear-gradient(180deg, #ffffff 0%, #f9fcff 49%, #f4f9ff 100%);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
}

.site-shell {
  position: relative;
  min-height: 100dvh;
  padding-bottom: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) auto minmax(220px, 0.8fr);
  align-items: center;
  gap: 1.5rem;
  min-height: 118px;
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(217, 229, 244, 0.78);
  box-shadow: 0 12px 45px -36px rgba(56, 98, 148, 0.55);
  backdrop-filter: blur(18px);
}

.tdri-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  color: #6ca7dd;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tdri-logo span {
  font-size: clamp(2.4rem, 5vw, 4.15rem);
  font-weight: 800;
  line-height: 0.85;
}

.tdri-logo small {
  max-width: 5.4rem;
  color: #405069;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.05;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 2vw, 1.75rem);
}

.main-nav button,
.filter-row button {
  position: relative;
  border: 0;
  background: transparent;
  color: #41506a;
  cursor: pointer;
  transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1), transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav button {
  padding: 0.75rem 0.55rem;
  white-space: nowrap;
}

.main-nav button::after {
  position: absolute;
  right: 0.45rem;
  bottom: 0;
  left: 0.45rem;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav button.active,
.main-nav button:hover {
  color: var(--blue-deep);
}

.main-nav button.active::after,
.main-nav button:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
}

.icon-button,
.profile-button,
.edit-toggle,
.primary-button,
.secondary-button,
.delete-button,
.section-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(186, 207, 229, 0.82);
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms, background 220ms, box-shadow 220ms;
}

.icon-button:active,
.profile-button:active,
.edit-toggle:active,
.primary-button:active,
.secondary-button:active,
.delete-button:active,
.section-edit-button:active,
.view-all:active {
  transform: translateY(1px) scale(0.98);
}

.icon-button,
.profile-button {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #5e86b6;
}

.profile-button {
  overflow: hidden;
  background: #e8f1fb;
  border-color: transparent;
}

.profile-button img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.edit-toggle,
.primary-button,
.secondary-button,
delete-button {
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}

.edit-toggle,
.primary-button {
  color: #ffffff;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  box-shadow: 0 16px 34px -24px rgba(31, 101, 181, 0.75);
}

.secondary-button {
  color: var(--blue-deep);
}

.delete-button {
  width: max-content;
  color: #c84f4b;
  border-color: rgba(239, 102, 95, 0.28);
}

.portfolio-stage {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16rem, 19rem) minmax(20rem, 30rem) 1fr;
  gap: clamp(2rem, 5vw, 4.2rem);
  align-items: center;
  min-height: 27.2rem;
  overflow: hidden;
  isolation: isolate;
}

.photo-uploader {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(13.5rem, 23vw, 18.5rem);
  aspect-ratio: 1;
  color: #58687f;
  text-align: center;
  border: 2px dashed #7e8fa6;
  border-radius: 50%;
  cursor: pointer;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    radial-gradient(circle, rgba(47, 125, 204, 0.09), transparent 68%) border-box;
  box-shadow: inset 0 0 0 7px #ffffff, 0 28px 72px -54px rgba(45, 117, 199, 0.82);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms;
}

.photo-uploader:hover {
  border-color: var(--blue-deep);
  transform: translateY(-4px);
}

.photo-uploader input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-uploader img {
  width: calc(100% - 1.5rem);
  height: calc(100% - 1.5rem);
  border-radius: 50%;
  object-fit: cover;
}

.photo-icon {
  position: relative;
  display: inline-flex;
  margin-bottom: 0.55rem;
  color: #657487;
}

.photo-icon svg {
  width: 4.3rem;
  height: 4.3rem;
}

.photo-icon i {
  position: absolute;
  right: -0.55rem;
  bottom: 0.25rem;
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  color: #ffffff;
  background: var(--blue);
  border: 3px solid #ffffff;
  border-radius: 999px;
  font-style: normal;
}

.photo-icon i svg {
  width: 1rem;
  height: 1rem;
}

.photo-uploader strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}

.photo-uploader small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.83rem;
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding-top: 0.65rem;
}

.hero-copy h1 {
  margin: 0;
  color: #0b285b;
  font-size: clamp(2.3rem, 4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0;
}

.role-text {
  margin: 0.8rem 0 1rem;
  color: #3e86d8;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1.2;
}

.bio-text,
.about-copy p,
.section-heading p,
.quote-band p {
  color: #3e4f6b;
  font-size: 1.02rem;
  line-height: 1.55;
}

.bio-text {
  width: min(100%, 30rem);
  margin: 0 0 1.55rem;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: min(100%, 28rem);
  padding-top: 1.15rem;
  border-top: 1px solid rgba(150, 168, 190, 0.36);
}

.contact-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: #1d2a43;
}

.contact-row svg {
  flex: 0 0 auto;
  color: #5c6878;
}

.contact-row .divider {
  display: block;
  width: 1px;
  min-height: 1.55rem;
  padding: 0;
  background: #7d8797;
}

.skyline {
  position: absolute;
  right: -2.7rem;
  bottom: -0.15rem;
  z-index: -1;
  display: flex;
  align-items: end;
  gap: 0.55rem;
  width: min(40rem, 44vw);
  height: 18rem;
  color: #a9cdf1;
  opacity: 0.52;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}

.skyline::before,
.skyline::after {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.18;
}

.skyline::before {
  right: 3rem;
  bottom: 5rem;
  width: 10rem;
  height: 10rem;
}

.skyline::after {
  right: 12rem;
  bottom: 4.2rem;
  width: 5rem;
  height: 5rem;
}

.skyline span {
  position: relative;
  width: clamp(1rem, 2vw, 2rem);
  height: calc(3.4rem + (var(--i) % 7) * 1.65rem);
  background: linear-gradient(180deg, rgba(92, 153, 213, 0.45), rgba(92, 153, 213, 0.86));
  clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 100%, 0 100%);
}

.skyline span:nth-child(3n) {
  width: clamp(1.25rem, 2.6vw, 2.5rem);
  clip-path: inset(0);
}

.skyline span:nth-child(4n) {
  height: calc(8rem + (var(--i) % 4) * 1.4rem);
}

.about-band {
  display: grid;
  grid-template-columns: 6.9rem 1fr auto;
  align-items: center;
  gap: 2rem;
  min-height: 10.6rem;
  padding: 1.85rem 2rem;
  background: linear-gradient(100deg, #e9f4ff 0%, #f8fcff 47%, #e8f3ff 100%);
  border: 1px solid rgba(215, 227, 242, 0.74);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.about-icon,
.category-icon {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--accent, var(--blue));
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, white);
}

.about-icon {
  width: 6.85rem;
  height: 6.85rem;
  color: #6aa8e6;
  background: rgba(255, 255, 255, 0.82);
}

.about-icon svg {
  width: 3.6rem;
  height: 3.6rem;
}

.about-copy h2,
.section-heading h2 {
  margin: 0;
  color: #0f3f83;
  font-size: 1.45rem;
  line-height: 1.2;
}

.about-copy p {
  max-width: 44rem;
  margin: 0.6rem 0 0;
}

.about-band .tdri-logo span {
  font-size: clamp(3.2rem, 6.5vw, 5.2rem);
}

.about-band .tdri-logo small {
  font-size: 0.67rem;
}

.achievements {
  padding: 3rem 0 2rem;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1.4fr);
  align-items: end;
  gap: 1.5rem;
  margin-bottom: 1.9rem;
}

.section-heading h2 {
  color: #082964;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
}

.section-heading span[aria-hidden="true"] {
  display: block;
  width: 4.2rem;
  height: 4px;
  margin: 0.85rem 0 1rem;
  border-radius: 999px;
  background: #2d79d0;
}

.section-heading p {
  max-width: 52rem;
  margin: 0;
}

.filters {
  display: grid;
  justify-items: end;
  gap: 0.65rem;
  max-width: 58rem;
}

.filter-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.filter-row button,
.sort-control select,
.panel-sort select {
  min-height: 2.3rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(193, 210, 230, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.filter-row button {
  white-space: nowrap;
}

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #61708a;
}

.sort-control span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sort-control select,
.panel-sort select {
  color: #263b5c;
  cursor: pointer;
  outline: 0;
}

.sort-control select:focus,
.panel-sort select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 125, 204, 0.15);
}

.filter-row button.active {
  color: #ffffff;
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0 0 1.35rem;
}

.stat-tile {
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(202, 218, 235, 0.92);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px -42px rgba(45, 117, 199, 0.62);
}

.stat-tile span,
.stat-tile small {
  display: block;
}

.stat-tile span {
  color: #637089;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-tile strong {
  display: block;
  margin-top: 0.35rem;
  color: #0b2b66;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1;
}

.stat-tile small {
  margin-top: 0.4rem;
  color: #6f7d93;
  font-size: 0.92rem;
  line-height: 1.35;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.7rem;
}

.achievement-card {
  --accent: #2d75c7;
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  padding: 1.45rem 1.55rem 1.2rem;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(202, 218, 235, 0.95);
  border-radius: 0.9rem;
  box-shadow: 0 20px 54px -46px color-mix(in srgb, var(--accent) 58%, transparent);
  animation: card-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--index) * 80ms);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms, border-color 260ms;
}

.achievement-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 34%, #cbd9ea);
  box-shadow: 0 32px 68px -48px color-mix(in srgb, var(--accent) 74%, transparent);
}

.project-card {
  grid-column: 1 / -1;
  min-height: 24rem;
}

@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.achievement-card header {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.card-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.section-edit-button {
  gap: 0.38rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.68rem;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 24%, #dbe8f5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 800;
}

.section-edit-button svg {
  width: 1rem;
  height: 1rem;
}

.section-edit-button.active {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.category-icon {
  width: 4rem;
  height: 4rem;
}

.category-icon svg {
  width: 2rem;
  height: 2rem;
}

.achievement-card h3 {
  margin: 0;
  color: #0b2b66;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.count-input {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2rem;
  padding: 0.25rem;
  color: var(--accent);
  font-size: 1.55rem;
  font-weight: 800;
  text-align: right;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
}

.is-editing .count-input {
  border-color: transparent;
  background: transparent;
}

.item-list {
  display: grid;
  gap: 1.05rem;
  max-height: 17.8rem;
  margin-top: 1.75rem;
  padding-right: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, #cbd9ea) transparent;
  scrollbar-width: thin;
}

.project-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-height: 36rem;
  margin-top: 1.65rem;
  padding-right: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--accent) 42%, #cbd9ea) transparent;
  scrollbar-width: thin;
}

.item-list::-webkit-scrollbar,
.project-sections::-webkit-scrollbar {
  width: 0.55rem;
}

.item-list::-webkit-scrollbar-track,
.project-sections::-webkit-scrollbar-track {
  background: transparent;
}

.item-list::-webkit-scrollbar-thumb,
.project-sections::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 38%, #d7e3f2);
  border-radius: 999px;
}

.project-status-group {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, #dce8f5);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}

.project-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}

.project-status-head h4 {
  margin: 0;
  color: #0b2b66;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-status-head span {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  color: var(--accent);
  font-weight: 800;
  border-radius: 999px;
  background: #ffffff;
}

.project-list {
  display: grid;
  gap: 0.75rem;
}

.project-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12rem);
  gap: 1.35rem;
  align-items: stretch;
  padding: 1rem;
  border: 1px solid rgba(187, 205, 226, 0.55);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.54);
}

.project-item:last-child {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(187, 205, 226, 0.55);
}

.project-copy {
  min-width: 0;
}

.project-item strong {
  display: block;
  color: #102247;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 800;
  line-height: 1.48;
  overflow-wrap: anywhere;
  word-break: normal;
}

.project-item small {
  display: block;
  max-width: 58rem;
  margin-top: 0.55rem;
  color: #66758d;
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-item time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding-left: 1rem;
  color: #6d7f99;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: right;
  border-left: 1px solid rgba(187, 205, 226, 0.7);
}

.empty-projects {
  margin: 0;
  color: #74839a;
}

.achievement-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}

.achievement-item strong {
  display: block;
  color: #102247;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.work-link {
  display: inline-flex;
  align-items: baseline;
  color: #0f55b2;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 204, 0.34);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 180ms, text-decoration-color 180ms;
}

.work-link:hover {
  color: #083c88;
  text-decoration-color: currentColor;
}

.achievement-item small {
  display: block;
  margin-top: 0.22rem;
  color: #68758c;
  font-size: 0.93rem;
  line-height: 1.25;
}

.achievement-item time {
  color: #8a94a8;
  font-size: 0.93rem;
  white-space: nowrap;
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  width: max-content;
  margin-top: auto;
  margin-left: auto;
  padding: 0.55rem 0;
  color: var(--accent);
  font-weight: 700;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.view-all svg {
  width: 1rem;
}

.quote-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(2rem, 4.5rem) minmax(16rem, 30rem) 1fr;
  gap: 1.25rem;
  align-items: center;
  min-height: 9.5rem;
  padding: 1.5rem clamp(1.2rem, 4vw, 3rem);
  overflow: hidden;
  background: linear-gradient(90deg, #edf7ff 0%, #ffffff 48%, #e7f3ff 100%);
  border-top: 1px solid rgba(215, 228, 243, 0.75);
}

.quote-mark {
  color: #aacbec;
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
}

.quote-band p {
  margin: 0;
  color: #0f55b2;
  font-weight: 600;
}

.campus-line {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.42rem;
  min-height: 6.7rem;
  color: #b2d1ee;
}

.campus-line span {
  width: calc(1.5rem + (var(--i) % 3) * 0.9rem);
  height: calc(2rem + (var(--i) % 5) * 0.62rem);
  border: 2px solid currentColor;
  border-bottom: 3px solid currentColor;
  opacity: 0.9;
}

.campus-line span:nth-child(2n) {
  height: 4.7rem;
}

.campus-line span:nth-child(5n) {
  width: 5rem;
  height: 3.2rem;
}

.editable-field {
  border-radius: 0.28rem;
  outline: 0;
}

.is-editing .editable-field.is-editable {
  box-shadow: 0 0 0 1px rgba(47, 125, 204, 0.18), 0 8px 28px -24px rgba(47, 125, 204, 0.8);
}

.is-editing .editable-field.is-editable:focus {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(47, 125, 204, 0.2);
}

.editor-panel {
  position: fixed;
  top: 8.25rem;
  right: 1rem;
  z-index: 5;
  display: grid;
  gap: 1.1rem;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 9.25rem);
  padding: 1rem;
  overflow: auto;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(198, 216, 235, 0.9);
  border-radius: 1.25rem;
  box-shadow: 0 28px 90px -56px rgba(24, 70, 126, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px);
}

.editor-head,
.editor-tools,
.editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.editor-head {
  position: sticky;
  top: -1rem;
  z-index: 2;
  align-items: flex-start;
  margin: -1rem -1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(202, 218, 235, 0.78);
  backdrop-filter: blur(18px);
}

.editor-head small {
  display: block;
  margin-top: 0.28rem;
  color: var(--blue-deep);
  font-size: 0.82rem;
  font-weight: 800;
}

.editor-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.editor-head > div > span,
.panel-sort span,
.editor-form label span,
.category-editor label span,
.editor-item label span {
  display: block;
  margin-bottom: 0.4rem;
  color: #66758d;
  font-size: 0.77rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editor-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.35rem;
}

.panel-sort {
  display: grid;
  gap: 0.4rem;
}

.section-editor-note {
  margin: -0.2rem 0 0;
  color: #637089;
  font-size: 0.95rem;
  line-height: 1.45;
}

.editor-form,
.category-editor {
  display: grid;
  gap: 0.8rem;
}

.editor-form input,
.editor-form textarea,
.panel-sort select,
.category-editor input,
.category-editor select,
.editor-item select,
.editor-item input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  border: 1px solid #cbd9ea;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.86);
  outline: 0;
  transition: border-color 180ms, box-shadow 180ms;
}

.section-lock input {
  font-weight: 800;
}

.editor-form textarea {
  resize: vertical;
}

.editor-form input:focus,
.editor-form textarea:focus,
.category-editor input:focus,
.category-editor select:focus,
.editor-item select:focus,
.editor-item input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 125, 204, 0.15);
}

.split-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.editor-row {
  align-items: end;
}

.editor-row label {
  flex: 1;
}

.category-list {
  display: grid;
  gap: 0.8rem;
}

.editor-item {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid rgba(202, 218, 235, 0.86);
  border-radius: 0.9rem;
  background: rgba(248, 251, 255, 0.74);
}

.editor-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.editor-item summary::marker {
  content: "";
}

.editor-item summary::-webkit-details-marker {
  display: none;
}

.editor-item[open] summary {
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(202, 218, 235, 0.72);
}

.editor-summary-copy {
  min-width: 0;
}

.editor-summary-copy strong,
.editor-summary-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.editor-summary-copy strong {
  color: #102247;
  font-size: 0.96rem;
  line-height: 1.25;
}

.editor-summary-copy small {
  margin-top: 0.18rem;
  color: #6f7d93;
  font-size: 0.86rem;
  line-height: 1.3;
}

.category-order-block,
.project-editor-groups,
.editor-subgroup {
  display: grid;
  gap: 0.8rem;
}

.editor-order-list {
  display: grid;
  gap: 0.55rem;
}

.editor-order-row {
  display: block;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(202, 218, 235, 0.86);
  border-radius: 0.85rem;
  background: rgba(248, 251, 255, 0.74);
}

.editor-order-row.active {
  border-color: rgba(47, 125, 204, 0.5);
  background: rgba(236, 245, 255, 0.92);
}

.editor-order-row button {
  min-width: 0;
  padding: 0.1rem 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.editor-order-row strong,
.editor-order-row small {
  display: block;
  overflow-wrap: anywhere;
}

.editor-order-row strong {
  color: #102247;
  font-weight: 800;
}

.editor-order-row small {
  margin-top: 0.12rem;
  color: #6f7d93;
  font-size: 0.86rem;
}

.editor-link-preview {
  width: max-content;
  color: #0f55b2;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(47, 125, 204, 0.34);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.editor-tools {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(202, 218, 235, 0.78);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(14, 32, 60, 0.34);
  backdrop-filter: blur(12px);
}

.modal-sheet {
  position: relative;
  width: min(40rem, 100%);
  max-height: min(42rem, calc(100dvh - 2rem));
  padding: 1.35rem;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(209, 222, 238, 0.96);
  border-radius: 1.25rem;
  box-shadow: 0 30px 90px -42px rgba(12, 40, 85, 0.72);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  transform: rotate(45deg);
}

.modal-sheet header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 4rem;
}

.modal-sheet h2 {
  margin: 0;
  font-size: 1.75rem;
}

.modal-sheet p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.modal-list {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.4rem;
}

.modal-list .achievement-item {
  padding: 1rem;
  border: 1px solid #dbe7f4;
  border-radius: 0.85rem;
  background: #f8fbff;
}

.empty-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 0.65rem;
  min-height: 16rem;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #b9cce2;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
}

.empty-state div {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--blue);
  background: #e8f3ff;
  border-radius: 999px;
}

.empty-state h3,
.empty-state p {
  margin: 0;
}

.skill-profile-section {
  padding: 1.5rem 0 3rem;
}

.skill-heading {
  margin-bottom: 1.45rem;
}

.skill-heading p {
  color: #3e4f6b;
  font-size: 1.02rem;
  line-height: 1.55;
}

.skill-card-edit {
  justify-self: end;
  align-self: start;
}

.skill-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
  gap: 1.7rem;
}

.skill-card {
  --accent: var(--blue);
  position: relative;
  min-width: 0;
  padding: 1.55rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 14rem),
    rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(202, 218, 235, 0.95);
  border-radius: 0.9rem;
  box-shadow: 0 20px 54px -46px color-mix(in srgb, var(--accent) 58%, transparent);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms, border-color 260ms;
}

.core-skills-card {
  --accent: #2d75c7;
}

.certification-card {
  --accent: #16aa82;
}

.skill-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 34%, #cbd9ea);
  box-shadow: 0 32px 68px -48px color-mix(in srgb, var(--accent) 74%, transparent);
}

.skill-card > * {
  position: relative;
  z-index: 1;
}

.skill-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.card-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  padding: 0.25rem;
  color: #697993;
  background: rgba(232, 242, 253, 0.68);
  border: 1px solid rgba(203, 219, 237, 0.76);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px rgba(116, 151, 190, 0.08);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card-sort-control > span {
  padding-left: 0.48rem;
}

.sort-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.sort-pill-group button {
  min-height: 2rem;
  padding: 0.34rem 0.72rem;
  color: #102247;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.sort-pill-group button:hover,
.sort-pill-group button:focus-visible {
  background: rgba(255, 255, 255, 0.62);
  outline: 0;
}

.sort-pill-group button.active {
  color: #ffffff;
  background: var(--blue-deep);
  box-shadow: 0 0.45rem 1.1rem -0.8rem rgba(31, 101, 181, 0.82);
}

.sort-pill-group button:active {
  transform: translateY(1px);
}

.skill-card h3 {
  margin: 0;
  color: #0b2b66;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.skill-card p {
  margin: 0.35rem 0 0;
  color: #6f7d93;
  font-size: 0.95rem;
}

.skill-domain-list,
.certification-list {
  display: grid;
  gap: 1rem;
  max-height: 25rem;
  padding-right: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--blue) 42%, #cbd9ea) transparent;
  scrollbar-width: thin;
}

.skill-domain-list::-webkit-scrollbar,
.certification-list::-webkit-scrollbar {
  width: 0.55rem;
}

.skill-domain-list::-webkit-scrollbar-track,
.certification-list::-webkit-scrollbar-track {
  background: transparent;
}

.skill-domain-list::-webkit-scrollbar-thumb,
.certification-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 38%, #d7e3f2);
  border-radius: 999px;
}

.skill-domain {
  padding: 1rem;
  border: 1px solid rgba(202, 218, 235, 0.82);
  border-radius: 0.85rem;
  background: rgba(248, 251, 255, 0.68);
}

.skill-domain-head {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.skill-domain-icon,
.certification-badge {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--blue-deep);
  background: #e7f2ff;
}

.skill-domain-icon {
  width: 2.65rem;
  height: 2.65rem;
}

.certification-badge {
  width: 3rem;
  height: 3rem;
}

.skill-domain h4 {
  margin: 0;
  color: #102247;
  font-size: 1.05rem;
  line-height: 1.25;
}

.skill-domain-head span {
  color: var(--blue-deep);
  font-weight: 800;
}

.skill-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.skill-chip {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.18rem 0.45rem;
  max-width: 100%;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(198, 216, 235, 0.9);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.82);
}

.skill-chip strong {
  color: #102247;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.skill-chip span,
.skill-chip small {
  width: max-content;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skill-chip span {
  padding: 0.16rem 0.42rem;
  color: #52637d;
  background: #eef4fb;
}

.skill-chip small {
  grid-column: 1 / -1;
  color: #1f65b5;
}

.certification-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem;
  border: 1px solid rgba(202, 218, 235, 0.82);
  border-radius: 0.85rem;
  background: rgba(248, 251, 255, 0.68);
}

.certification-item strong,
.certification-item a {
  display: block;
  color: #102247;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration-color: rgba(47, 125, 204, 0.34);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.certification-item small {
  display: block;
  margin-top: 0.22rem;
  color: #6f7d93;
  font-size: 0.92rem;
  line-height: 1.35;
}

.certification-item time {
  color: #8a94a8;
  font-size: 0.92rem;
  white-space: nowrap;
}

.skill-editor-block {
  display: grid;
  gap: 0.8rem;
}

.skill-editor-block h3 {
  margin: 0;
  color: #102247;
  font-size: 1.05rem;
}

.skill-editor-list {
  display: grid;
  gap: 0.8rem;
}

.skill-editor-list.compact {
  gap: 0.65rem;
}

.skill-domain-editor {
  background: rgba(232, 243, 255, 0.45);
}

.skill-item-editor {
  background: rgba(255, 255, 255, 0.72);
}

.inline-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(202, 218, 235, 0.78);
}

.skill-item-editor .inline-tools {
  justify-content: flex-start;
  margin-top: 0.15rem;
  padding-top: 0.95rem;
}

.skill-domain-editor > .inline-tools {
  margin-top: 0.45rem;
}

@media (max-width: 1180px) {
  .site-shell.is-editing .portfolio-stage,
  .site-shell.is-editing .quote-band {
    padding-right: min(34rem, calc(100vw - 1rem));
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }
}

@media (max-width: 900px) {
  .site-shell.is-editing .portfolio-stage,
  .site-shell.is-editing .quote-band {
    padding-right: clamp(1rem, 3vw, 2rem);
  }

  .topbar {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-height: auto;
    padding: 2rem 0 2.5rem;
  }

  .hero-copy {
    text-align: left;
  }

  .skyline {
    right: -5rem;
    width: 70vw;
    opacity: 0.28;
  }

  .about-band,
  .section-heading,
  .quote-band {
    grid-template-columns: 1fr;
  }

  .about-band .tdri-logo {
    display: none;
  }

  .filters {
    justify-items: start;
  }

  .stats-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .achievement-grid {
    grid-template-columns: 1fr;
  }

  .skill-profile-grid {
    grid-template-columns: 1fr;
  }

  .project-sections {
    grid-template-columns: 1fr;
    max-height: 34rem;
  }

  .editor-panel {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 1rem 1rem;
  }
}

@media (max-width: 640px) {
  .tdri-logo span {
    font-size: 2.35rem;
  }

  .tdri-logo small {
    font-size: 0.52rem;
  }

  .header-actions {
    gap: 0.45rem;
  }

  .edit-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .edit-toggle {
    width: 3.25rem;
    min-height: 3.25rem;
    padding: 0;
  }

  .photo-uploader {
    width: min(16rem, 82vw);
  }

  .contact-row .divider {
    display: none;
  }

  .about-band {
    gap: 1rem;
    padding: 1.2rem;
  }

  .achievement-card {
    min-height: 0;
    padding: 1.05rem;
  }

  .item-list {
    max-height: 19rem;
  }

  .project-sections {
    max-height: 38rem;
  }

  .stats-overview {
    grid-template-columns: 1fr;
  }

  .skill-card {
    padding: 1.05rem;
  }

  .skill-card header {
    gap: 0.75rem;
  }

  .card-sort-control {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .sort-pill-group {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .skill-domain-list,
  .certification-list {
    max-height: 28rem;
  }

  .certification-item {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .certification-item time {
    grid-column: 2;
    white-space: normal;
  }

  .achievement-card header {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .card-tools {
    gap: 0.35rem;
  }

  .section-edit-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .section-edit-button {
    width: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
  }

  .category-icon {
    width: 3.4rem;
    height: 3.4rem;
  }

  .achievement-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .project-item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .achievement-item time {
    white-space: normal;
  }

  .project-item time {
    padding-top: 0.75rem;
    padding-left: 0;
    text-align: left;
    border-top: 1px solid rgba(187, 205, 226, 0.7);
    border-left: 0;
    white-space: normal;
  }

  .split-fields,
  .editor-row {
    grid-template-columns: 1fr;
    display: grid;
  }
}