/* Canonical layout bridge for the retained interactive experience and project content. */
body.editorial-site.integrated-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--paper) !important;
  color: var(--ink);
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
}

.integrated-page main,
.integrated-page main * {
  min-width: 0;
  box-sizing: border-box;
}

.integrated-page main :is(p, li, dd, a, span, label) {
  overflow-wrap: anywhere;
}

.integrated-intro,
.integrated-page :is(
  #remote-ready,
  #experience,
  #certs,
  #topology,
  #backup-pipeline,
  #raid-sim,
  #telemetry,
  #ai-zone,
  #projects,
  #rag-search
),
.integrated-page :is(.activity-record, .activity-media-section),
.integrated-page main > details {
  width: min(var(--content), calc(100% - 2 * var(--gutter))) !important;
  max-width: var(--content) !important;
  margin-inline: auto !important;
}

.integrated-intro {
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--line);
}

.integrated-intro .eyebrow {
  margin-bottom: 1rem;
}

.integrated-intro h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-size: clamp(3.25rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}

.integrated-intro .intro {
  margin-top: 1rem;
}

.integrated-intro .case-reading-guide {
  max-width: var(--reading);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Experience page: keep the opening sequence aligned and visually connected. */
.integrated-experience .integrated-intro {
  padding-block: clamp(3rem, 4vw, 4rem);
}

.integrated-experience #experience {
  padding-top: clamp(3rem, 4vw, 4rem) !important;
}

.integrated-experience #experience > .max-w-7xl {
  padding-inline: 0 !important;
}

/* Shared editorial data rows for experience, projects and activities. */
.integrated-page .case-fields {
  width: 100%;
  max-width: var(--content);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--line);
}

.integrated-page :is(.case-reading-guide, .case-fields) > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, .25fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: .9rem 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.integrated-page :is(.case-reading-guide, .case-fields) dt {
  color: var(--accent);
  font: 800 .84rem/1.6 "JetBrains Mono", monospace;
  letter-spacing: .02em;
}

.integrated-page :is(.case-reading-guide, .case-fields) dd {
  margin: 0;
  color: var(--copy);
  font-size: .98rem;
  line-height: 1.75;
}

.integrated-page .case-fields dd :is(p, ul) {
  margin: 0;
}

.integrated-page .case-fields dd p + p {
  margin-top: .75rem;
}

.integrated-page .case-fields dd ul {
  padding-left: 1.15rem;
}

.integrated-page .case-fields dd li + li {
  margin-top: .45rem;
}

.integrated-page :is(
  #remote-ready,
  #experience,
  #certs,
  #topology,
  #backup-pipeline,
  #raid-sim,
  #telemetry,
  #ai-zone,
  #projects,
  #rag-search
),
.integrated-page :is(.activity-record, .activity-media-section) {
  padding: var(--section-space) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  scroll-margin-top: 5rem;
}

.integrated-page :is(.activity-record, .activity-media-section) {
  min-width: 0;
}

.integrated-page :is(h1, h2, h3, h4) {
  color: var(--ink) !important;
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  text-shadow: none !important;
}

.integrated-page :is(
  #remote-ready,
  #experience,
  #certs,
  #topology,
  #backup-pipeline,
  #raid-sim,
  #telemetry,
  #ai-zone,
  #projects,
  #rag-search
) h2,
.integrated-page :is(#topology, #backup-pipeline) > h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere;
}

.integrated-page .remote-ready-title {
  text-wrap: balance;
}

.integrated-page #topology > #homelab-title {
  max-width: none;
  white-space: nowrap;
}

.integrated-page #ai-zone > .max-w-7xl > .text-center > h2 {
  max-width: none;
  text-align: center;
}

@media (max-width: 760px) {
  .integrated-page #projects .project-evidence-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .integrated-page :is(
    #remote-ready,
    #experience,
    #certs,
    #topology,
    #backup-pipeline,
    #raid-sim,
    #telemetry,
    #ai-zone,
    #projects,
    #rag-search
  ) h2,
  .integrated-page :is(#topology, #backup-pipeline) > h2 {
    font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .integrated-page #topology > #homelab-title {
    white-space: normal;
  }
}

.integrated-page :is(.text-gray-300, .text-gray-400, .text-gray-500) {
  color: var(--copy) !important;
}

.integrated-page main :is(.text-brand-cyan, .text-brand-emerald, .text-brand-amber, .text-brand-rose) {
  color: var(--accent) !important;
}

.integrated-page main :is(
  .bg-brand-panelBg,
  .bg-brand-darkBg,
  .bg-brand-subBg,
  .bg-slate-950,
  .bg-slate-900,
  .bg-slate-800
) {
  background: transparent !important;
}

.integrated-page main :is(
  .rounded,
  .rounded-lg,
  .rounded-xl,
  .rounded-2xl,
  .rounded-full,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl,
  .nvd-project-card,
  .homelab-card,
  .cert-card
) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page .max-w-7xl {
  max-width: 100% !important;
}

/* Remote office */
.integrated-page #remote-ready > .max-w-7xl > .flex {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap: clamp(2rem, 6vw, 5rem) !important;
  align-items: start !important;
}

.integrated-page #remote-ready .md\:w-1\/3,
.integrated-page #remote-ready .md\:w-2\/3 {
  width: auto !important;
  max-width: none !important;
}

.integrated-page #remote-ready > .max-w-7xl > .flex > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem !important;
  border-top: 1px solid var(--line);
}

.integrated-page #remote-ready > .max-w-7xl > .flex > div:last-child > div {
  padding: 1.2rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

/* Work history */
.integrated-page #experience > .max-w-7xl > .text-center,
.integrated-page #certs > .text-center,
.integrated-page #projects > .max-w-7xl > .text-center {
  max-width: var(--reading) !important;
  margin: 0 0 2.5rem !important;
  text-align: left !important;
}

.integrated-page :is(#experience, #certs, #projects) h2 > i {
  display: none;
}

.integrated-page #experience .lg\:grid-cols-12 {
  display: grid !important;
  grid-template-columns: minmax(13rem, .35fr) minmax(0, 1fr) !important;
  gap: 2.5rem !important;
}

.integrated-page #experience [role="tablist"] {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.integrated-page #experience .job-node {
  padding: 1rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.integrated-page #experience #job-details-content {
  padding: 0 0 0 2rem !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
}

.integrated-page #experience #job-details-content .job-summary {
  padding-block: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-block: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #experience #job-details-content .job-summary p {
  margin: 0;
  color: var(--copy) !important;
  font-style: normal !important;
}

.integrated-page #certs > .grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 1.5rem !important;
}

.integrated-page #certs .cert-card {
  padding: 1.25rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
}

/* HomeLab records */
.integrated-page #topology .device-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem !important;
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.integrated-page #topology .device-item {
  padding: 1.15rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.integrated-page #topology .device-item dl,
.integrated-page #topology .device-item dd {
  margin: 0;
}

.integrated-page #topology .device-item dt {
  margin-bottom: .35rem;
  color: var(--ink);
  font-weight: 800;
}

.integrated-page #backup-pipeline > div[role="list"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1.5rem !important;
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.integrated-page #backup-pipeline .pipeline-stage {
  padding: 1.15rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

.integrated-page #backup-pipeline .pipeline-data-flow {
  display: none !important;
}

/* Collapsible lab */
.integrated-page main > details {
  padding: 1.5rem 0 0 !important;
  border-bottom: 1px solid var(--line);
}

.integrated-page main > details > summary {
  width: fit-content;
  max-width: 100%;
  padding: .8rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

.integrated-page main > details > summary > span:not(:first-child) {
  display: none !important;
}

.integrated-page main > .supporting-demo-disclosure {
  padding: clamp(1rem, 2.5vw, 1.5rem) 0 !important;
}

.integrated-page main > .supporting-demo-disclosure > summary {
  width: 100%;
  justify-content: space-between;
  border-bottom-width: 1px !important;
}

.integrated-page main > .supporting-demo-disclosure > summary .summary-note {
  display: inline !important;
  color: var(--copy);
  font-size: .85rem;
  font-weight: 500;
}

.integrated-page main > .supporting-demo-disclosure #ai-zone {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(2rem, 5vw, 3.5rem) 0 0 !important;
  border-bottom: 0 !important;
}

.integrated-page #ai-zone.supporting-demo > .max-w-7xl > .text-center {
  max-width: var(--reading) !important;
  margin: 0 0 1.5rem !important;
  text-align: left !important;
}

.integrated-page #ai-zone.supporting-demo > .max-w-7xl > .text-center > h2 {
  max-width: 22ch;
  font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
  text-align: left;
}

.integrated-page #raid-sim,
.integrated-page #telemetry {
  width: 100% !important;
  max-width: none !important;
}

.integrated-page :is(#raid-sim, #telemetry) .lab-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  max-width: 24ch;
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

.integrated-page :is(#raid-sim, #telemetry) .lab-title i {
  margin: 0 !important;
  font-size: .75em;
}

.integrated-page #raid-sim > div:first-child,
.integrated-page #telemetry > div:first-child {
  max-width: var(--reading) !important;
  margin: 0 0 2rem !important;
  text-align: left !important;
}

.integrated-page #raid-sim > div:last-child {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #raid-sim > div:last-child > .grid:first-child {
  gap: 1rem !important;
  padding-block: 1.5rem !important;
  border-block: 1px solid var(--line) !important;
}

.integrated-page :is(input, select, textarea) {
  max-width: 100%;
  background: #fff !important;
  border: 1px solid #8d928c !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

.integrated-page #raid-sim > div:last-child > .grid.grid-cols-3 {
  gap: 0 !important;
  padding-block: 1.25rem !important;
  border-bottom: 1px solid var(--line);
}

.integrated-page #raid-sim > div:last-child > .grid.grid-cols-3 > div {
  padding: .75rem 1.25rem !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
}

.integrated-page #raid-sim > div:last-child > .grid.grid-cols-3 > div:first-child {
  border-left: 0 !important;
}

.integrated-page #raid-sim > div:last-child > div:last-child {
  padding: 1.25rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-block: 1px solid var(--line) !important;
}

.integrated-page #telemetry > .grid {
  gap: 1.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.integrated-page #telemetry > .grid > div,
.integrated-page #telemetry > .grid > div:last-child > div {
  padding: 1.25rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #telemetry .lab-status {
  align-self: flex-start;
  padding: .4rem .65rem !important;
  background: transparent !important;
  border-color: var(--line) !important;
  border-radius: 0 !important;
}

.integrated-page #telemetry-syslog-container {
  padding: 1.25rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-block: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
}

.integrated-page #telemetry-syslog-stream {
  padding: .9rem 1rem !important;
  background: var(--surface) !important;
  color: var(--copy) !important;
  border-left: 3px solid var(--accent);
  font-family: "JetBrains Mono", monospace !important;
}

.integrated-page #telemetry-syslog-stream > * {
  color: inherit !important;
}

/* AI workspace, project records and knowledge search */
.integrated-page #ai-zone > .max-w-7xl > .max-w-3xl,
.integrated-page #projects > .max-w-7xl > .text-center,
.integrated-page #rag-search > div {
  width: 100%;
  max-width: var(--content) !important;
  margin-inline: 0 !important;
}

.integrated-page #ai-zone > .max-w-7xl > .max-w-3xl > div,
.integrated-page #ai-zone > div > div:last-child {
  padding: 1.5rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-block: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #ai-zone [role="tablist"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integrated-page #ai-zone [role="tablist"] button {
  min-width: 0;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--copy) !important;
}

.integrated-page #ai-zone [role="tablist"] button[aria-selected="true"] {
  color: var(--accent) !important;
}

.integrated-page #ai-zone :is(#panel-ai-document, #panel-ai-excel, #panel-ai-meeting) > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 1rem !important;
}

.integrated-page #ai-zone #draft-output {
  background: var(--surface) !important;
  color: var(--copy) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #ai-zone #export-docx-btn {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
}

.integrated-page #ai-zone #export-docx-btn:hover,
.integrated-page #ai-zone #export-docx-btn:focus-visible {
  background: var(--ink) !important;
  color: var(--surface) !important;
}

.integrated-page :is(#raid-sim, #telemetry, #ai-zone) :is(label, input, select, textarea, button) {
  font-size: max(.9rem, 14px) !important;
}

.integrated-page :is(#raid-sim, #telemetry, #ai-zone) :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-xs) {
  font-size: .85rem !important;
  line-height: 1.6 !important;
}

.integrated-page #telemetry-syslog-stream {
  font-size: .85rem !important;
  line-height: 1.7 !important;
}

.integrated-page #projects > .max-w-7xl > .space-y-12 > div {
  padding: 2rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #projects .case-topics {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin-top: 1.25rem;
  color: var(--copy);
  font: 700 .78rem/1.5 "JetBrains Mono", monospace;
}

.integrated-page #projects .case-action {
  margin-top: 1.5rem;
}

/* Activity records reuse the same flat editorial rhythm. */
.integrated-activities .section-head {
  display: block;
  max-width: var(--reading);
}

.integrated-activities .activity-record .case-fields,
.integrated-activities .activity-record .meta {
  max-width: var(--reading);
}

.integrated-activities .activity-record .meta {
  margin-top: 2rem;
}

.integrated-activities :is(.photo-grid, .video-list) {
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: 1.5rem 0;
}

.integrated-activities :is(.photo-grid img, .video-list video) {
  display: block;
  max-width: 100%;
}

.integrated-activities .caption {
  font-size: .85rem;
  line-height: 1.65;
}

.integrated-page :is(.certificate-disclosure, .media-disclosure) {
  width: 100%;
  max-width: var(--content);
}

.integrated-page :is(.certificate-disclosure, .media-disclosure) > summary {
  padding: .9rem 0;
  font-size: .95rem;
}

.integrated-page :is(
  .certificate-disclosure,
  .media-disclosure,
  .supporting-demo-disclosure
) > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.integrated-page #projects .project-evidence-gallery {
  display: grid;
  grid-template-columns: minmax(15rem, .42fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
  align-items: start !important;
}

.integrated-page #projects .project-evidence-gallery > div {
  width: auto !important;
  min-width: 0;
}

.integrated-page #projects .project-evidence-gallery > div:last-child {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.integrated-page #projects .project-evidence-gallery img {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.integrated-page #projects .project-gallery-phone img {
  height: auto !important;
  object-fit: contain;
}

.integrated-page #projects .js-phone-frame {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.integrated-page #projects .project-video-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
  padding-block: 1.5rem;
}

.integrated-page #projects .js-phone-frame > :not(.project-video-screen),
.integrated-page #projects .project-video-screen > :not(video) {
  display: none !important;
}

.integrated-page #projects .project-video-screen,
.integrated-page #projects .project-video-screen video {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 40rem;
  border-radius: 0 !important;
  object-fit: contain;
}

.integrated-page #rag-search .rag-shell {
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page #rag-search .rag-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2rem 0 1.5rem !important;
  border-block: 1px solid var(--line) !important;
  text-align: center;
}

.integrated-page #rag-search .rag-header > div {
  max-width: 48rem;
  margin-inline: auto;
}

.integrated-page #rag-search .rag-header h2 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.12 !important;
}

@media (min-width: 900px) {
  .integrated-page #rag-search .rag-header h2 {
    white-space: nowrap;
  }
}

.integrated-page #rag-search .rag-topics {
  justify-content: center;
  padding: 1.5rem 0 0 !important;
}

.integrated-page #rag-search .rag-form {
  max-width: 48rem;
  padding: 1.5rem 0 2rem !important;
  margin-inline: auto !important;
}

.integrated-page #rag-search .rag-form-footer {
  flex-direction: column;
  justify-content: center;
}

.integrated-page #rag-search .rag-form-footer p {
  text-align: center;
}

.integrated-page #rag-search .rag-submit {
  align-self: center;
}

.integrated-page #rag-search .rag-form label {
  margin-bottom: .65rem;
  color: var(--ink) !important;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.integrated-page #rag-search .rag-form textarea {
  min-height: 7rem;
  padding: 1rem 1.1rem !important;
  background: rgba(255, 253, 249, .72) !important;
  border: 1px solid var(--line) !important;
  border-radius: .25rem !important;
  box-shadow: inset 0 1px 0 rgba(31, 40, 37, .03) !important;
  color: var(--ink) !important;
  font: inherit;
  line-height: 1.7;
}

.integrated-page #rag-search .rag-form textarea::placeholder {
  color: var(--copy) !important;
  opacity: 1;
}

.integrated-page #rag-search .rag-form textarea:focus-visible {
  border-color: var(--accent) !important;
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
  outline-offset: 2px !important;
}

.integrated-page #rag-search .rag-result {
  max-width: 48rem;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.integrated-page .site-footer {
  max-width: var(--content) !important;
  background: transparent !important;
}

/* High-specificity canonical lock against legacy light-mode component skins. */
body.editorial-site.light-mode.integrated-page main :is(
  #remote-ready,
  #experience,
  #certs,
  #topology,
  #backup-pipeline,
  #raid-sim,
  #telemetry,
  #ai-zone,
  #projects,
  #rag-search
) {
  width: min(var(--content), calc(100% - 2 * var(--gutter))) !important;
  max-width: var(--content) !important;
  padding: var(--section-space) 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.editorial-site.light-mode.integrated-page #remote-ready > .max-w-7xl > .flex,
body.editorial-site.light-mode.integrated-page #topology .device-item,
body.editorial-site.light-mode.integrated-page #backup-pipeline .pipeline-stage,
body.editorial-site.light-mode.integrated-page #experience .job-node,
body.editorial-site.light-mode.integrated-page #certs .cert-card,
body.editorial-site.light-mode.integrated-page #projects > .max-w-7xl > .space-y-12 > div,
body.editorial-site.light-mode.integrated-page #project-card-nvd {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.editorial-site.light-mode.integrated-page #remote-ready > .max-w-7xl > .flex {
  padding: 0 !important;
  border: 0 !important;
}

body.editorial-site.light-mode.integrated-page #remote-ready h2 {
  max-width: 18ch;
  font-size: clamp(2.15rem, 3.5vw, 3.05rem) !important;
  line-height: 1.18 !important;
}

body.editorial-site.light-mode.integrated-page #topology .device-item,
body.editorial-site.light-mode.integrated-page #backup-pipeline .pipeline-stage {
  padding: 1.15rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

body.editorial-site.light-mode.integrated-page #experience .job-node,
body.editorial-site.light-mode.integrated-page #certs .cert-card {
  padding: 1rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}

body.editorial-site.light-mode.integrated-page #experience #job-details-content {
  min-height: 0 !important;
}

/* Prevent legacy dark-theme utility surfaces from becoming white cards in light mode. */
body.editorial-site.light-mode.integrated-page main :is(
  .bg-brand-panelBg,
  .bg-brand-panelBg\/80,
  .bg-brand-panelBg\/50,
  .bg-brand-panelBg\/40,
  .bg-brand-darkBg,
  .bg-brand-darkBg\/80,
  .bg-brand-darkBg\/60,
  .bg-brand-darkBg\/50,
  .bg-brand-darkBg\/30,
  .bg-brand-subBg,
  .bg-slate-950,
  .bg-slate-900,
  .bg-slate-900\/80,
  .bg-slate-900\/60,
  .bg-slate-900\/50,
  .bg-slate-800,
  .bg-slate-800\/50,
  .bg-slate-800\/40
) {
  background: transparent !important;
  box-shadow: none !important;
}

body.editorial-site.light-mode.integrated-page #projects > .max-w-7xl > .space-y-12 > div,
body.editorial-site.light-mode.integrated-page #project-card-nvd {
  padding: 2rem 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
}

@media (max-width: 900px) {
  .integrated-page #certs > .grid,
  .integrated-page #topology .device-list,
  .integrated-page #backup-pipeline > div[role="list"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .integrated-intro h1 {
    max-width: 100%;
    font-size: clamp(2.55rem, 12vw, 3.45rem);
  }

  .integrated-page :is(
    #remote-ready,
    #experience,
    #certs,
    #topology,
    #backup-pipeline,
    #raid-sim,
    #telemetry,
    #ai-zone,
    #projects,
    #rag-search
  ) h2,
  .integrated-page :is(#topology, #backup-pipeline) > h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9.5vw, 2.7rem) !important;
  }

  .integrated-page #remote-ready > .max-w-7xl > .flex,
  .integrated-page #remote-ready > .max-w-7xl > .flex > div:last-child,
  .integrated-page #experience .lg\:grid-cols-12,
  .integrated-page #certs > .grid,
  .integrated-page #topology .device-list,
  .integrated-page #backup-pipeline > div[role="list"],
  .integrated-page #ai-zone :is(#panel-ai-document, #panel-ai-excel, #panel-ai-meeting) > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .integrated-page :is(.case-reading-guide, .case-fields) > div,
  .integrated-activities .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .35rem !important;
  }

  .integrated-page main > .supporting-demo-disclosure > summary .summary-note {
    display: none !important;
  }

  .integrated-activities :is(.photo-grid, .video-list) {
    grid-template-columns: minmax(0, 1fr);
  }

  .integrated-activities .video-list .landscape {
    grid-column: auto;
  }

  .integrated-page #experience #job-details-content {
    padding: 1.5rem 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .integrated-page #raid-sim .grid-cols-3,
  .integrated-page #telemetry > .grid,
  .integrated-page #projects .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .integrated-page #raid-sim > div:last-child > .grid.grid-cols-3 > div {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
  }

  .integrated-page #raid-sim > div:last-child > .grid.grid-cols-3 > div:first-child {
    border-top: 0 !important;
  }

  .integrated-page #telemetry > div:first-child {
    align-items: flex-start !important;
  }

  .integrated-page #ai-zone [role="tablist"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .integrated-page #projects .js-phone-frame {
    transform: scale(.74);
    margin-bottom: -8rem;
  }

  body.editorial-site.light-mode.integrated-page #remote-ready h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
  }

  .integrated-page main :is(h1, h2, h3, h4, p, li, dt, dd, label, span, button, input, select, textarea) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}