/* Last, explicitly scoped repair layer. Existing desktop project presentation stays intact. */
#portfolio-root { scroll-padding-top:100px; }
#portfolio-root body { overflow-x:clip; }
#portfolio-root .contact-link i { display:none!important; }
#portfolio-root .contact-link { grid-template-columns:auto minmax(0,1fr)!important; }
#portfolio-root .contact-link strong { min-width:0; overflow-wrap:anywhere; }

/* Desktop: reserve three non-overlapping columns for the opening name and portrait. */
#portfolio-root:not(.compact-layout) #about { min-height:0!important; height:210svh!important; }
#portfolio-root:not(.compact-layout) #about .intro-sticky { min-height:0!important; height:100svh!important; }
#portfolio-root:not(.compact-layout) #about .intro-name { display:block!important; position:absolute!important; inset:0!important; padding:0!important; transform:none!important; z-index:3!important; }
#portfolio-root:not(.compact-layout) #about .intro-name span { position:absolute; display:block; line-height:1.1!important; letter-spacing:-.055em!important; white-space:nowrap; }
#portfolio-root:not(.compact-layout) #about .intro-portrait { width:26%!important; max-width:none!important; margin:0!important; transform:translateX(-50%)!important; }
#portfolio-root:not(.compact-layout) #about .intro-role { bottom:auto!important; width:40%!important; padding:14px 20px!important; transform:translateX(-50%)!important; opacity:1!important; }
#portfolio-root:not(.compact-layout) #about .intro-role b { font-size:clamp(16px,1.3vw,22px)!important; }
#portfolio-root:not(.compact-layout) #about .intro-role span { font-size:clamp(12px,.9vw,15px)!important; }
#portfolio-root:not(.compact-layout) #about .intro-about { left:5%!important; top:20%!important; bottom:auto!important; width:43%!important; max-width:640px!important; padding:clamp(24px,2.4vw,40px)!important; }
#portfolio-root:not(.compact-layout) #about .intro-about h2 { font-size:clamp(36px,3.4vw,60px)!important; line-height:1.06!important; margin-bottom:18px!important; }
#portfolio-root:not(.compact-layout) #about .intro-about p { font-size:clamp(14px,1.05vw,17px)!important; line-height:1.65!important; }

/* Compact mode also covers landscape tablets and reduced-motion preferences. */
#portfolio-root.compact-layout body > section > *,
#portfolio-root.compact-layout body :is(.anim,.reveal-mask,.v14-reveal,.center-text) {
  opacity:1!important; visibility:visible!important; filter:none!important;
  transform:none!important; translate:none!important; scale:none!important;
  animation:none!important; transition:none!important; will-change:auto!important;
}
#portfolio-root.compact-layout body > section { padding-block:48px!important; min-height:0; }
#portfolio-root.compact-layout body .center-text { margin-bottom:28px!important; }
#portfolio-root.compact-layout body .center-text :is(h2,.section-watermark) { font-size:clamp(30px,5vw,48px)!important; line-height:1.12!important; overflow-wrap:break-word; }
#portfolio-root.compact-layout body section img { translate:none!important; scale:none!important; }
#portfolio-root.compact-layout .reveal-mask > span { transform:none!important; opacity:1!important; transition:none!important; }
#portfolio-root.compact-layout :is(.cap-2,.cap-grid,.packages-grid,.skills-grid,.study-flow) > * { min-width:0!important; }
#portfolio-root.compact-layout #navbar { top:max(10px,env(safe-area-inset-top))!important; z-index:1000!important; }
#portfolio-root.compact-layout #navbar .nav { opacity:1!important; transform:none!important; pointer-events:auto!important; height:auto!important; min-height:52px!important; padding:8px 14px!important; gap:10px!important; }
#portfolio-root.compact-layout #navbar.reading-hidden:not(:focus-within) { transform:translateY(calc(-100% - 40px))!important; pointer-events:none!important; }
#portfolio-root.compact-layout #navbar .menu-toggle { display:block!important; min-height:40px; }
#portfolio-root.compact-layout #navbar .theme-toggle { min-height:34px; }
#portfolio-root.compact-layout #navbar .nav-menu { display:none!important; }
#portfolio-root.compact-layout #navbar .nav-menu.is-open { display:flex!important; position:absolute!important; top:calc(100% + 10px)!important; left:0!important; right:0!important; padding:16px!important; flex-wrap:wrap!important; gap:8px!important; background:var(--page)!important; border:1px solid var(--edge); border-radius:20px; max-height:70svh; overflow:auto; }
#portfolio-root.compact-layout #navbar .nav-menu a { padding:10px!important; }

/* Hero flows naturally. No fixed-height biography and no text behind the portrait. */
#portfolio-root.compact-layout #about { height:auto!important; min-height:0!important; padding:0!important; }
#portfolio-root.compact-layout #about .intro-sticky { position:relative!important; height:auto!important; min-height:0!important; overflow:visible!important; padding:96px var(--gutter) 32px!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:24px!important; }
#portfolio-root.compact-layout #about :is(.intro-name,.intro-portrait,.intro-role,.intro-about) { position:relative!important; inset:auto!important; width:100%!important; max-width:760px!important; min-width:0!important; height:auto!important; margin:0 auto!important; transform:none!important; opacity:1!important; visibility:visible!important; }
#portfolio-root.compact-layout #about .intro-name { display:flex!important; flex-wrap:wrap!important; justify-content:center!important; align-items:center!important; gap:0 .22em!important; padding:0!important; font-size:clamp(40px,8.5vw,86px)!important; }
#portfolio-root.compact-layout #about .intro-name span { position:static!important; font-size:inherit!important; line-height:1.05!important; letter-spacing:-.055em!important; }
#portfolio-root.compact-layout #about .intro-portrait { width:min(76%,420px)!important; aspect-ratio:4/5!important; overflow:hidden!important; }
#portfolio-root.compact-layout #about .intro-portrait img { width:100%!important; height:100%!important; display:block; object-fit:cover!important; transform:none!important; }
#portfolio-root.compact-layout #about .intro-role { padding:16px 18px!important; }
#portfolio-root.compact-layout #about .intro-role b { font-size:clamp(16px,2.5vw,22px)!important; line-height:1.4!important; }
#portfolio-root.compact-layout #about .intro-role span { font-size:13px!important; line-height:1.6!important; display:block; }
#portfolio-root.compact-layout #about .intro-about { padding:clamp(22px,4vw,36px)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
#portfolio-root.compact-layout #about .intro-about h2 { font-size:clamp(32px,5.6vw,52px)!important; line-height:1.08!important; margin-bottom:20px!important; }
#portfolio-root.compact-layout #about .intro-about p { font-size:16px!important; line-height:1.7!important; max-width:none!important; }
#portfolio-root.compact-layout #about .intro-roles { display:grid!important; grid-template-columns:1fr!important; gap:0!important; }
#portfolio-root.compact-layout #about .intro-roles > span { padding:14px 0!important; }
#portfolio-root.compact-layout #about .intro-roles small { display:inline-block; margin-top:6px; line-height:1.5; }
#portfolio-root.compact-layout #about .intro-progress { display:none!important; }

/* Featured project: independent panels, full images and naturally sized copy. */
#portfolio-root.compact-layout #projects .prj-list { transform:none!important; filter:none!important; }
#portfolio-root.compact-layout #projects #before-after { position:relative!important; inset:auto!important; width:100%!important; max-width:1120px!important; height:auto!important; min-height:0!important; margin:0 auto 32px!important; padding:0!important; }
#portfolio-root.compact-layout #projects #before-after .project-stage-v13 { position:relative!important; inset:auto!important; width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; border-radius:0!important; overflow:visible!important; transform:none!important; background:transparent!important; }
#portfolio-root.compact-layout #projects #before-after :is(.pv-backdrop,.pv-veil,.feature-beat-counter,.project-progress-v13) { display:none!important; }
#portfolio-root.compact-layout #projects #before-after .feature-cover { position:relative!important; inset:auto!important; width:100%!important; height:250px!important; min-height:0!important; opacity:1!important; transform:none!important; margin:0 0 32px!important; border-radius:24px!important; overflow:hidden!important; }
#portfolio-root.compact-layout #projects #before-after .feature-cover-copy { left:24px!important; right:24px!important; bottom:24px!important; top:auto!important; width:auto!important; transform:none!important; }
#portfolio-root.compact-layout #projects #before-after .feature-cover-copy h3 { font-size:clamp(28px,5vw,44px)!important; line-height:1.1!important; }
#portfolio-root.compact-layout #projects #before-after .feature-cover-copy p { display:none!important; }
#portfolio-root.compact-layout #projects #before-after .feature-cover-shade { background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12))!important; }
#portfolio-root.compact-layout #projects #before-after :is(.feature-cover-index,.feature-open-cue) { display:none!important; }
#portfolio-root.compact-layout #projects #before-after .project-panel-v13 { position:relative!important; inset:auto!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:18px!important; place-content:normal!important; align-items:start!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:0!important; margin:0 0 48px!important; padding:0!important; opacity:1!important; pointer-events:auto!important; transform:none!important; perspective:none!important; overflow:visible!important; }
#portfolio-root.compact-layout #projects #before-after .project-panel-v13::before { display:none!important; }
#portfolio-root.compact-layout #projects #before-after .project-media-v13 { position:relative!important; inset:auto!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto!important; grid-column:1!important; grid-row:1!important; gap:14px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; overflow:visible!important; box-shadow:none!important; background:transparent!important; aspect-ratio:auto!important; }
#portfolio-root.compact-layout #projects #before-after .single .project-media-v13 { grid-template-columns:1fr!important; }
#portfolio-root.compact-layout #projects #before-after .project-media-v13 img { position:relative!important; inset:auto!important; display:block!important; grid-column:auto!important; grid-row:auto!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; min-height:0!important; aspect-ratio:auto!important; margin:0!important; padding:0!important; opacity:1!important; visibility:visible!important; transform:none!important; translate:none!important; scale:none!important; object-fit:contain!important; filter:none!important; border-radius:18px!important; background:transparent!important; box-shadow:0 12px 32px #00000012!important; transition:none!important; }
#portfolio-root.compact-layout #projects #before-after .single .project-media-v13 img { max-width:540px!important; margin-inline:auto!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13 { position:relative!important; inset:auto!important; display:block!important; grid-column:1!important; grid-row:2!important; width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:clamp(22px,3vw,32px)!important; opacity:1!important; transform:none!important; overflow:visible!important; text-align:left!important; border:1px solid var(--edge)!important; border-radius:24px!important; background:var(--glass)!important; color:var(--ink)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13::after { display:none!important; }
#portfolio-root.compact-layout #projects #before-after .pv-mask { display:block!important; height:auto!important; max-height:none!important; min-height:0!important; margin:0 0 14px!important; padding:0!important; overflow:visible!important; flex:none!important; }
#portfolio-root.compact-layout #projects #before-after .pv-mask:last-child { margin-bottom:0!important; }
#portfolio-root.compact-layout #projects #before-after .pv-mask > * { transform:none!important; opacity:1!important; transition:none!important; height:auto!important; max-height:none!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13 :is(h2,p,span) { max-width:none!important; margin:0!important; color:var(--ink)!important; -webkit-text-fill-color:currentColor!important; overflow-wrap:break-word!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13 h2 { font-size:clamp(28px,4.4vw,42px)!important; line-height:1.12!important; letter-spacing:-.035em!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13 p { font-size:16px!important; line-height:1.65!important; color:var(--muted)!important; }
#portfolio-root.compact-layout #projects #before-after .project-copy-v13 span { font-size:11px!important; line-height:1.6!important; letter-spacing:.14em!important; }

/* Logos: the description belongs to its card, never to an overlapping floating layer. */
#portfolio-root.compact-layout #brand { overflow:visible!important; }
#portfolio-root.compact-layout #brand::before { inset:0!important; }
#portfolio-root.compact-layout #brand :is(.brandpin,.brandpin-inner,.htrack-wrap,.htrack) { position:relative!important; inset:auto!important; width:100%!important; max-width:1120px!important; height:auto!important; min-height:0!important; margin:0 auto!important; padding:0!important; transform:none!important; overflow:visible!important; }
#portfolio-root.compact-layout #brand .brandpin-inner { display:block!important; }
#portfolio-root.compact-layout #brand .htrack { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:24px!important; align-items:start!important; }
#portfolio-root.compact-layout #brand .brand-side { display:none!important; }
#portfolio-root.compact-layout #brand .bcard { position:relative!important; inset:auto!important; width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; margin:0!important; opacity:1!important; visibility:visible!important; transform:none!important; z-index:auto!important; background:var(--glass)!important; border:1px solid var(--edge)!important; border-radius:24px!important; overflow:hidden!important; }
#portfolio-root.compact-layout #brand .bcard::before { display:none!important; }
#portfolio-root.compact-layout #brand .blogo { width:100%!important; height:auto!important; aspect-ratio:1/1!important; border-radius:0!important; }
#portfolio-root.compact-layout #brand .blogo img { display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; transform:none!important; }
#portfolio-root.compact-layout #brand .bmeta { display:block!important; position:relative!important; inset:auto!important; opacity:1!important; transform:none!important; padding:22px!important; text-align:left!important; }
#portfolio-root.compact-layout #brand .bmeta h4 { font-size:26px!important; line-height:1.2!important; margin-bottom:10px!important; }
#portfolio-root.compact-layout #brand .bmeta :is(.bsector,.bwork,p) { color:var(--muted)!important; -webkit-text-fill-color:currentColor!important; line-height:1.6!important; }
#portfolio-root.compact-layout #brand .brand-description { font-size:15px!important; margin-top:14px!important; }
#portfolio-root:not(.compact-layout) #brand .brand-description { display:none!important; }

@media (max-width:600px) {
  #portfolio-root.compact-layout { --gutter:18px; }
  #portfolio-root.compact-layout #about .intro-name { flex-direction:column!important; align-items:flex-start!important; font-size:clamp(48px,15vw,78px)!important; }
  #portfolio-root.compact-layout #projects #before-after .project-media-v13 { grid-template-columns:minmax(0,1fr)!important; }
  #portfolio-root.compact-layout #projects #before-after .boards .project-media-v13 { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
  #portfolio-root.compact-layout #brand .htrack { grid-template-columns:minmax(0,1fr)!important; }
  #portfolio-root.compact-layout .contact-link { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:8px!important; padding:20px!important; }
}
@media (min-width:761px) {
  #portfolio-root.compact-layout #about .intro-sticky { max-width:1120px; margin:auto; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important; align-items:center!important; gap:28px!important; }
  #portfolio-root.compact-layout #about .intro-name { grid-column:1/-1; }
  #portfolio-root.compact-layout #about .intro-portrait { grid-column:1; grid-row:2; width:100%!important; max-width:420px!important; }
  #portfolio-root.compact-layout #about .intro-role { grid-column:1; grid-row:3; }
  #portfolio-root.compact-layout #about .intro-about { grid-column:2; grid-row:2/4; }
  #portfolio-root.compact-layout #projects #before-after .project-panel-v13 { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important; grid-template-rows:auto!important; gap:24px!important; align-items:center!important; }
  #portfolio-root.compact-layout #projects #before-after .project-copy-v13 { grid-column:2!important; grid-row:1!important; }
  #portfolio-root.compact-layout #projects #before-after .project-media-v13 { grid-template-columns:1fr!important; }
  #portfolio-root.compact-layout #projects #before-after .boards .project-media-v13 { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}