/* Hùng Paris V23 / ALBUM-FIRST INDEX — every selectable object is a complete photo album.
   The editorial compositions inside Album Detail retain their original V22 rules. */
.album-index{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:clamp(13px,2.3vw,32px)!important;align-items:start!important;min-width:0}
.album-index .album-card{display:flex;flex-direction:column;grid-column:span 6;position:relative;min-width:0;color:var(--ink);background:transparent;text-decoration:none;cursor:pointer;isolation:isolate;}
.album-index .album-card:nth-child(4n+1){grid-column:span 7}
.album-index .album-card:nth-child(4n+2){grid-column:span 5}
.album-index .album-card:nth-child(4n+3){grid-column:span 5}
.album-index .album-card:nth-child(4n+4){grid-column:span 7}
.album-card-cover{position:relative;overflow:hidden;aspect-ratio:1.4;display:grid;place-items:center;isolation:isolate;background:#512e2e;padding:clamp(17px,3.3vw,58px)}
.album-card-cover::before{content:"";z-index:-2;position:absolute;inset:-15%;background-image:var(--cover-image);background-size:cover;background-position:center;filter:blur(40px) brightness(.6) saturate(.78);transform:scale(1.12);transition:transform .65s var(--ease)}
.album-card-cover::after{content:"";z-index:-1;position:absolute;inset:0;background:linear-gradient(115deg,#160a0855,#210b1673);pointer-events:none}
.album-card-mosaic{height:100%;max-height:380px;width:min(100%,580px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(3px,.5vw,7px);min-width:0;min-height:0;transition:transform .6s var(--ease)}
.album-card-frame{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border:1px solid #fff9;box-shadow:0 4px 10px #0002;overflow:hidden}
.album-card-letter{position:absolute;right:clamp(8px,2vw,29px);bottom:clamp(18px,3vw,44px);max-width:56%;font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.05em;line-height:1.06;color:#ffefdf;text-align:right;font-size:clamp(21px,3.6vw,53px);text-shadow:0 3px 18px #0009;pointer-events:none;overflow-wrap:break-word}
.album-card-index{position:absolute;top:13px;left:15px;font-size:10px;font-weight:800;letter-spacing:.11em;color:#fff4ed;background:#160b0b4d;padding:6px 8px}
.album-card--selection .album-card-mosaic,.album-card--gradbook .album-card-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.album-card--selection .album-card-letter,.album-card--gradbook .album-card-letter{position:static;max-width:none;display:flex;align-items:center;justify-content:center;padding:7px;text-align:center;font-size:clamp(12px,2.6vw,35px);border:1px solid #ffffff81;background:#e1ddd016;font-style:normal;font-weight:700;letter-spacing:-.07em}
.album-card--gradbook .album-card-letter{font-style:italic;font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em}
.album-card--selection .album-card-cover{background:#2b535b}
.album-card--gradbook .album-card-cover{background:#5d302f}
.album-card--ivory .album-card-cover{background:#c3b9aa}
.album-card--ivory .album-card-cover::before{filter:blur(44px) brightness(1.22) saturate(.52)}
.album-card--ivory .album-card-cover::after{background:#b6ae9b38}
.album-card--ivory .album-card-letter{color:#493d38;text-shadow:0 3px 15px #fff}
.album-card--winter .album-card-cover{background:#9ebdc9}
.album-card--winter .album-card-cover::before{filter:blur(43px) brightness(1.15) saturate(.72)}
.album-card--winter .album-card-cover::after{background:#72a3c13d}
.album-card--winter .album-card-letter{color:#214a62;text-shadow:0 4px 15px #d3e8ee}
.album-card--ensemble .album-card-cover{background:#35261e}
.album-card--community .album-card-cover{background:#183e5a}
.album-card--documentary .album-card-cover{background:#591f20}
.album-card--eventbook .album-card-cover{background:#301e40}
.album-card-content{padding:clamp(15px,2vw,25px) 0 20px;display:flex;flex-direction:column;min-width:0;flex:1;border-bottom:1px solid var(--border);gap:9px}
.album-card-overline{font-size:10px;letter-spacing:.085em;font-weight:800;color:var(--red);line-height:1.45;text-transform:uppercase}
.album-card-content h3{font-size:clamp(20px,2.7vw,37px);letter-spacing:-.064em;line-height:1.16;font-weight:900;margin:0;overflow-wrap:break-word}
.album-card-content p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;min-height:38px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.album-card-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:auto;padding-top:17px;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.035em}
.album-card-foot>span:last-child{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.album-card-foot .hp-icon{font-size:17px;transition:transform 250ms var(--ease)}
.album-card:hover .album-card-cover::before,.album-card:focus-visible .album-card-cover::before{transform:scale(1.2)}
.album-card:hover .album-card-mosaic,.album-card:focus-visible .album-card-mosaic{transform:translateY(-3px) scale(1.018)}
.album-card:hover .album-card-foot .hp-icon,.album-card:focus-visible .album-card-foot .hp-icon{transform:translate(3px,-3px)}
.album-card:focus-visible{outline:3px solid #b32917;outline-offset:5px}
.album-dialog{position:fixed;max-width:1100px;width:min(1120px,94vw);max-height:calc(100dvh - 24px);height:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--cream);color:var(--ink);padding:0;border:1px solid #b9a89b;box-shadow:0 23px 95px #080302aa}
.album-dialog::backdrop{background:#130807cb;backdrop-filter:blur(8px)}
.album-dialog-shell{padding:clamp(13px,2vw,32px);min-width:0}
.album-dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.album-dialog-brand{font-size:10px;font-weight:900;letter-spacing:.11em;color:var(--red)}
.album-dialog-bar .icon-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--border);background:transparent;color:var(--ink)}
.album-dialog-titlebar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:27px 0 17px}
.album-dialog-titlebar>div{min-width:0}
.album-dialog-titlebar span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.09em}
.album-dialog-titlebar h2{font-size:clamp(24px,4.6vw,51px);letter-spacing:-.07em;line-height:1.08;margin:10px 0 0}
.album-dialog-titlebar>span{flex:none}
.album-dialog-content .editorial-album{margin:0}
.album-dialog-content .album-header{display:none}
.album-dialog-content .album-stage{padding:clamp(15px,4vw,55px)}
.album-dialog-content .album-shot{cursor:zoom-in}
.album-dialog-content .album-shot-zoom{opacity:1;transform:none}
.album-dialog-end{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:15px;border-top:1px solid var(--border)}
.album-dialog-end>span{font-size:9px;color:var(--muted);letter-spacing:.05em;font-weight:800}
.album-dialog-end button{min-height:44px;background:var(--red);color:var(--cream);border:0;padding:10px 16px;font-size:10px;font-weight:800}
@media(max-width:760px){
  .album-index{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(10px,2.5vw,16px)!important}
  .album-index .album-card,.album-index .album-card:nth-child(n){grid-column:span 1!important}
  .album-card-cover{aspect-ratio:.92;padding:clamp(10px,3vw,15px)}
  .album-card-mosaic{gap:2px}
  .album-card-letter{font-size:clamp(14px,4vw,23px);bottom:11px;right:7px}
  .album-card--selection .album-card-letter,.album-card--gradbook .album-card-letter{font-size:clamp(10px,2.7vw,14px);padding:3px}
  .album-card-index{font-size:8px;top:5px;left:5px;padding:4px}
  .album-card-content{padding:11px 0 13px;gap:6px}
  .album-card-overline{font-size:8px;letter-spacing:.03em;line-height:1.35}
  .album-card-content h3{font-size:clamp(13px,3.7vw,20px);line-height:1.2}
  .album-card-content p{font-size:11px;line-height:1.48;min-height:48px;-webkit-line-clamp:3;line-clamp:3}
  .album-card-foot{font-size:8px;gap:5px;line-height:1.3;padding-top:8px;align-items:end}
  .album-card-foot>span:last-child{white-space:normal;gap:2px;text-align:right;justify-content:end}
  .album-card-foot .hp-icon{font-size:14px}
  .album-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .album-dialog-shell{padding:14px 10px}
  .album-dialog-titlebar{padding:18px 0 13px;align-items:start}
  .album-dialog-titlebar h2{font-size:clamp(23px,6.5vw,34px)}
  .album-dialog-titlebar span{font-size:8px}
  .album-dialog-content .album-stage{padding:20px 10px}
  .album-dialog-end>span{font-size:8px;max-width:50%}
  .works-count small{letter-spacing:.035em}
}
@media(max-width:360px){
  .album-card-cover{padding:9px}
  .album-card-content h3{font-size:13px}
  .album-card-overline{font-size:7px}
  .album-card-content p{font-size:10px}
  .album-card-foot{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .album-card-mosaic,.album-card-cover::before,.album-card-foot .hp-icon{transition:none!important}
}