#portfolio-design{
      --ink: #171817;
      --paper: #f6f4ef;
      --purple: #7151ba;
      --lime: #d8ff3f;
      --album-ink: #174851;
      --album-mint: #e4f5f0;
      --album-line: rgb(23 72 81 / 18%);
      --side-space: var(--portfolio-gutter);
      --content: min(var(--portfolio-content-max), 100%);
      --gap: clamp(10px, 1vw, 18px);
    }

    #portfolio-design{ scroll-behavior: smooth; background: var(--paper); }

    #portfolio-design{
      min-width: 320px;
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family:var(--font-ui);
    }

    #portfolio-design a{ color: inherit; text-decoration: none; }

    #portfolio-design .works{
      position: relative;
      isolation: isolate;
      padding: var(--portfolio-space-section) var(--side-space) 0;
      background-image:
        radial-gradient(closest-side, rgb(113 81 186 / 12%), transparent 72%),
        radial-gradient(rgb(19 19 19 / 2.5%) .55px, transparent .65px);
      background-position: 50% -20px, 0 0;
      background-size: min(920px, 90vw) 560px, 7px 7px;
      background-repeat: no-repeat, repeat;
    }

    #portfolio-design .works-head{
      width: var(--content);
      margin: 0 auto;
    }

    #portfolio-design .waterfall{
      width: var(--content);
      margin: clamp(40px, 5.5vw, 76px) auto 0;
      columns: 5;
      column-gap: var(--gap);
    }

    #portfolio-design .work-card{
      position: relative;
      display: block;
      width: 100%;
      margin: 0 0 var(--gap);
      break-inside: avoid;
      overflow: hidden;
      border-radius: var(--portfolio-radius-card);
      background: #e9e6de;
      box-shadow: var(--portfolio-shadow-card);
      cursor: zoom-in;
      isolation: isolate;
    }

    #portfolio-design .work-card img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 520ms cubic-bezier(.22, .75, .2, 1), filter 520ms ease;
    }

    #portfolio-design .work-card::after{
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(180deg, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 46%) 100%);
      opacity: 0;
      transition: opacity 420ms ease;
      pointer-events: none;
    }

    #portfolio-design .work-card:hover img, #portfolio-design .work-card:focus-visible img{ transform: scale(1.045); }
    #portfolio-design .work-card:hover::after, #portfolio-design .work-card:focus-visible::after{ opacity: 1; }

    #portfolio-design .work-card .no{
      position: absolute;
      z-index: 1;
      right: 12px;
      bottom: 10px;
      margin: 0;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 420ms ease, transform 420ms ease;
    }

    #portfolio-design .work-card:hover .no, #portfolio-design .work-card:focus-visible .no{ opacity: 1; transform: translateY(0); }

    #portfolio-design .work-card:focus-visible{ outline: 3px solid var(--purple); outline-offset: 3px; }

    #portfolio-design .album{
      padding: clamp(72px, 10vw, 132px) var(--side-space) clamp(112px, 13vw, 180px);
      color: var(--album-ink);
      background:
        linear-gradient(180deg, var(--paper) 0%, rgb(228 245 240 / 64%) 10%, var(--album-mint) 28%, var(--album-mint) 66%, rgb(228 245 240 / 64%) 82%, rgb(246 244 239 / 92%) 96%, var(--paper) 100%);
    }

    #portfolio-design .album-shell{ width: var(--content); margin: 0 auto; }

    #portfolio-design .album-head{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 36px;
    }

    #portfolio-design .album-viewport{
      position: relative;
      width: 100vw;
      margin: clamp(42px, 5vw, 72px) 0 0 calc((var(--content) - 100vw) / 2);
      overflow: hidden;
      padding: 0 var(--side-space) 16px;
      mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }

    #portfolio-design .album-track{
      display: flex;
      width: max-content;
      animation: ds-album-glide 104s linear infinite;
      will-change: transform;
    }

    #portfolio-design .album-reel-set{ display: flex; gap: clamp(12px, 1.5vw, 22px); padding-right: clamp(12px, 1.5vw, 22px); }

    #portfolio-design .album-card{
      position: relative;
      display: block;
      flex: 0 0 min(210px, 41vw);
      aspect-ratio: 210 / 287;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 1px solid var(--album-line);
      border-radius: var(--portfolio-radius-card);
      color: var(--album-ink);
      background: #fff;
      box-shadow: 0 10px 30px rgb(23 72 81 / 12%);
    }

    #portfolio-design .album-card img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
      transition: transform 440ms cubic-bezier(.22, .75, .2, 1);
    }

    #portfolio-design .album-card::after{
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 34%;
      content: "";
      background: linear-gradient(180deg, transparent, rgb(23 72 81 / 68%));
      pointer-events: none;
    }

    #portfolio-design .album-index{
      position: absolute;
      z-index: 1;
      right: 12px;
      bottom: 11px;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    #portfolio-design .album-viewport:hover .album-track, #portfolio-design .album-viewport:focus-within .album-track{ animation-play-state: paused; }

    #portfolio-design .photography{
      padding: clamp(76px, 10vw, 132px) var(--side-space) clamp(112px, 13vw, 180px);
      color: var(--ink);
      background: var(--paper);
    }

    #portfolio-design .photography-shell{ width: var(--content); margin: 0 auto; }

    #portfolio-design .photo-viewport{
      position: relative;
      width: 100vw;
      margin: clamp(42px, 5vw, 72px) 0 0 calc((var(--content) - 100vw) / 2);
      overflow: hidden;
      padding: 0 var(--side-space) 16px;
      mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }

    #portfolio-design .photo-track{
      display: flex;
      width: max-content;
      animation: ds-photo-glide 88s linear infinite;
      will-change: transform;
    }

    #portfolio-design .photo-reel-set{
      display: flex;
      align-items: stretch;
      gap: clamp(12px, 1.5vw, 22px);
      padding-right: clamp(12px, 1.5vw, 22px);
    }

    #portfolio-design .photo-card{
      flex: 0 0 auto;
      width: auto;
      height: clamp(220px, 28vw, 360px);
      margin: 0;
      aspect-ratio: var(--photo-ratio);
      background: #e9e6de;
      box-shadow: 0 10px 30px rgb(0 0 0 / 14%);
    }

    #portfolio-design .photo-card img{ object-fit: contain; background: #e9e6de; }

    #portfolio-design .photo-card::after{
      background: linear-gradient(180deg, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 46%) 100%);
    }

    #portfolio-design .photo-card:focus-visible{ outline-color: var(--purple); }

    #portfolio-design .photo-viewport:hover .photo-track, #portfolio-design .photo-viewport:focus-within .photo-track{ animation-play-state: paused; }

    @keyframes ds-album-glide {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    @keyframes ds-photo-glide {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    #portfolio-design .veil{
      position: absolute;
      z-index: 5;
      right: 0;
      bottom: 0;
      left: 0;
      height: clamp(300px, 34vh, 520px);
      background: linear-gradient(180deg, rgb(246 244 239 / 0%) 0%, rgb(246 244 239 / 32%) 24%, rgb(246 244 239 / 92%) 68%, var(--paper) 100%);
      pointer-events: none;
    }

    #portfolio-design .site-footer{
      padding: clamp(52px, 7vh, 96px) var(--side-space) clamp(30px, 4vh, 54px);
      text-align: center;
    }

    #portfolio-design .site-footer p{
      margin: 0;
      color: rgb(19 19 19 / 42%);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      line-height: 1.8;
      text-transform: uppercase;
    }

    #portfolio-design .modal{
      position: fixed;
      z-index: var(--portfolio-modal-layer);
      inset: 0;
      display: grid;
      grid-template-columns: minmax(52px, 1fr) minmax(0, 7fr) minmax(52px, 1fr);
      align-items: center;
      opacity: 0;
      visibility: hidden;
      background: rgb(9 9 12 / 92%);
      backdrop-filter: blur(6px);
      transition: opacity 240ms ease, visibility 240ms step-end;
    }

    #portfolio-design .modal.is-open{ opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0ms; }
    #portfolio-design .modal .round-button{ justify-self: center; }

    #portfolio-design .modal-figure{
      position: relative;
      display: grid;
      max-width: min(1200px, 100%);
      max-height: calc(100dvh - 48px);
      justify-self: center;
      overflow: hidden;
      border-radius: var(--portfolio-radius-modal);
      background: #111;
      box-shadow: var(--portfolio-shadow-modal);
      transform: translateY(14px) scale(.985);
      transition: transform 260ms cubic-bezier(.22, .75, .2, 1);
    }

    #portfolio-design .modal.is-open .modal-figure{ transform: translateY(0) scale(1); }

    #portfolio-design .work-card:active img,
    #portfolio-design .album-card:active img,
    #portfolio-design .gzh-card:active img,
    #portfolio-design .seo-card:active img,
    #portfolio-design .photo-card:active img{ transform: scale(.99); }

    #portfolio-design .round-button:active,
    #portfolio-design .close-button:active{ transform: scale(.96); }

    #portfolio-design .modal-image{
      display: block;
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: calc(100dvh - 48px);
      object-fit: contain;
    }

    #portfolio-design .modal-copy{
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 42px 20px 16px;
      background: linear-gradient(180deg, transparent, rgb(0 0 0 / 86%));
      pointer-events: none;
    }

    #portfolio-design .modal-copy strong{ font-size: 15px; line-height: 1.25; }
    #portfolio-design .modal-copy span{ color: rgb(255 255 255 / 68%); font-size: 12px; font-weight: 700; }

    #portfolio-design .round-button, #portfolio-design .close-button{
      display: grid;
      width: 49px;
      height: 49px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgb(40 40 48 / 72%);
      cursor: pointer;
      transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    #portfolio-design .round-button:hover, #portfolio-design .close-button:hover{ color: #0c0c0c; background: #fff; transform: scale(1.06); }
    #portfolio-design .round-button:active, #portfolio-design .close-button:active{ transform: scale(.96); }

    #portfolio-design .round-button:focus-visible, #portfolio-design .close-button:focus-visible, #portfolio-design .work-card:focus-visible{ outline: 3px solid var(--purple); outline-offset: 3px; }

    #portfolio-design .chevron{ width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
    #portfolio-design .left{ margin-left: 4px; transform: rotate(-135deg); }
    #portfolio-design .right{ margin-right: 4px; transform: rotate(45deg); }

    #portfolio-design .close-button{ position: fixed; z-index: 1; top: 20px; right: 20px; background: rgb(12 12 12 / 76%); }
    #portfolio-design .cross{ position: relative; width: 18px; height: 18px; }
    #portfolio-design .cross::before, #portfolio-design .cross::after{ position: absolute; top: 8px; left: 0; width: 18px; height: 2px; content: ""; background: currentColor; }
    #portfolio-design .cross::before{ transform: rotate(45deg); }
    #portfolio-design .cross::after{ transform: rotate(-45deg); }

    @media (max-width: 1199px){ #portfolio-design .waterfall{ columns: 4; } }
    @media (max-width: 899px){ #portfolio-design .waterfall{ columns: 3; } }
    @media (max-width: 599px){ #portfolio-design .waterfall{ columns: 2; } }

    @media (max-width: 599px){
      #portfolio-design .album-head{ display: block; }
      #portfolio-design .photography-head{ display: block; }
      #portfolio-design .album-viewport, #portfolio-design .photo-viewport{ margin-left: calc((100% - 100vw) / 2); }
      #portfolio-design .album-card{ flex-basis: min(210px, 41vw); }
      #portfolio-design .modal{ grid-template-columns: 44px minmax(0, 1fr) 44px; }
      #portfolio-design .modal-figure{ width: 100%; max-height: calc(100dvh - 84px); border-radius: var(--portfolio-radius-card); }
      #portfolio-design .modal-image{ max-height: calc(100dvh - 84px); }
      #portfolio-design .close-button{ top: 14px; right: 14px; width: 42px; height: 42px; }
      #portfolio-design .modal .round-button{ width: 42px; height: 42px; }
      #portfolio-design .modal-copy{ padding: 38px 16px 14px; }
    }

    @media (prefers-reduced-motion: reduce){
      #portfolio-design *, #portfolio-design *::before, #portfolio-design *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }

    /* ===== 品牌设计 · 纵向四区块 bk-（1013：VI 轮播 / 项目书 / 单页 / 易拉宝） ===== */

    #ds-album .bk-section{ margin-top: clamp(56px, 7vw, 96px); }
    #ds-album .bk-section:first-of-type{ margin-top: 0; }

    #ds-album .bk-subhead{
      display: flex;
      align-items: baseline;
      gap: 14px;
      width: var(--content);
      margin: 0 auto;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--album-line);
    }

    #ds-album .bk-subno{
      color: rgb(23 72 81 / 44%);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
    }

    #ds-album .bk-subtitle{
      margin: 0;
      color: var(--album-ink);
      font-size: clamp(17px, 1.6vw, 22px);
      font-weight: 800;
      letter-spacing: .04em;
    }

    #ds-album .bk-suben{
      color: rgb(23 72 81 / 46%);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    #ds-album .bk-subcount{
      margin-left: auto;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgb(23 72 81 / 10%);
      color: var(--album-ink);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1em;
    }

    /* 01 品牌视觉VI：全出血无缝滑动轮播（同项目书机制） */
    #ds-album .bk-carousel{
      position: relative;
      width: 100vw;
      margin: clamp(30px, 3.6vw, 52px) 0 0 calc((var(--content) - 100vw) / 2);
      overflow: hidden;
      padding: 0 var(--side-space) 16px;
      mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }

    #ds-album .bk-vi-track{
      display: flex;
      width: max-content;
      animation: ds-bk-vi-glide 132s linear infinite;
      will-change: transform;
    }

    @keyframes ds-bk-vi-glide {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    #ds-album .bk-vi-set{ display: flex; gap: clamp(12px, 1.5vw, 22px); padding-right: clamp(12px, 1.5vw, 22px); }

    #ds-album .bk-carousel:hover .bk-vi-track, #ds-album .bk-carousel:focus-within .bk-vi-track{ animation-play-state: paused; }

    #ds-album .bk-vi-card{
      position: relative;
      display: block;
      flex: 0 0 min(520px, 74vw);
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 1px solid var(--album-line);
      border-radius: var(--portfolio-radius-card);
      background: #fff;
      box-shadow: 0 10px 30px rgb(23 72 81 / 12%);
    }

    #ds-album .bk-vi-card img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #fff;
    }

    /* 03/04 网格卡片（单页瀑布流 / 易拉宝阵列共用） */
    #ds-album .bk-card{
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 1px solid var(--album-line);
      border-radius: var(--portfolio-radius-card);
      background: #fff;
      box-shadow: 0 10px 30px rgb(23 72 81 / 12%);
      cursor: zoom-in;
      transition: transform 300ms cubic-bezier(.22, .75, .2, 1), box-shadow 300ms ease;
    }

    #ds-album .bk-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgb(23 72 81 / 20%); }
    #ds-album .bk-card:focus-visible{ outline: 3px solid var(--purple); outline-offset: 3px; }

    #ds-album .bk-card img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #fff;
      transition: transform 440ms cubic-bezier(.22, .75, .2, 1);
    }

    #ds-album .bk-card:hover img{ transform: scale(1.035); }

    #ds-album .bk-no{
      position: absolute;
      z-index: 1;
      right: 10px;
      bottom: 10px;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgb(23 72 81 / 72%);
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .1em;
    }

    #ds-album .bk-waterfall{
      columns: 3;
      column-gap: var(--gap);
      width: var(--content);
      margin: clamp(30px, 3.6vw, 52px) auto 0;
    }

    #ds-album .bk-waterfall .bk-card{ break-inside: avoid; margin-bottom: var(--gap); }

    #ds-album .bk-rollup-grid{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(12px, 1.5vw, 22px);
      align-items: start;
      width: var(--content);
      margin: clamp(30px, 3.6vw, 52px) auto 0;
    }

    @media (max-width: 899px){
      #ds-album .bk-waterfall{ columns: 2; }
      #ds-album .bk-rollup-grid{ grid-template-columns: repeat(2, 1fr); }
      #ds-album .bk-suben{ display: none; }
    }