/* v15: Vietnamese art layered into the sections (see art.py). Content always sits above the art. */
[data-art]{position:relative;overflow:hidden}
[data-art]>.wrap,[data-art]>*:not(.art){position:relative;z-index:1}
.art{position:absolute;pointer-events:none;z-index:0;margin:0}

/* backgrounds: toned into the section color, fading away from the text */
.art-bg{inset:0}
.art-bg img{width:100%;height:100%;object-fit:cover;opacity:var(--o,.2)}
.deep .art-bg img,.deep.art-bg img{mix-blend-mode:luminosity}
[data-art]:not(.deep) .art-bg img{mix-blend-mode:multiply;filter:saturate(.7)}
.art-bg.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 70%)}
.art-bg.fade-r{-webkit-mask-image:linear-gradient(270deg,transparent 0%,transparent 30%,#000 75%);mask-image:linear-gradient(270deg,transparent 0%,transparent 30%,#000 75%)}
.art-bg.fade-c{-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 78%)}
/* one hero keeps its real colors (Tết: the yellow mai), with a shade behind the text */
.art-bg.color img{mix-blend-mode:normal;opacity:var(--o,.7)}
.art-bg.color::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,58,64,.94) 0%,rgba(31,58,64,.78) 45%,rgba(31,58,64,.15) 100%)}
@media (max-width:899px){
  /* on phones the text spans the width: keep backgrounds quieter and fade from the top instead */
  .art-bg.fade-l,.art-bg.fade-r{-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);mask-image:linear-gradient(180deg,#000 0%,transparent 75%)}
  .art-bg img{opacity:calc(var(--o,.2) * .7)}
  .art-bg.color::after{background:linear-gradient(180deg,rgba(31,58,64,.55) 0%,rgba(31,58,64,.93) 55%)}
}

/* cut-out objects at the edge of a section */
.art-cut{width:var(--w,220px);transform:rotate(var(--r,0deg))}
.art-cut img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(34,32,28,.22))}
.art-cut.tr{top:40px;right:-50px}
.art-cut.br{bottom:30px;right:-40px}
.art-cut.hero-r{right:2%;bottom:-10px;width:var(--w)}
.deep .art-cut img{filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
@media (max-width:899px){
  .art-cut{width:calc(var(--w,220px) * .42);opacity:.95}
  .art-cut.tr{top:14px;right:-22px}
  .art-cut.br{bottom:14px;right:-18px}
  .art-cut.hero-r{right:-24px;bottom:-6px;width:calc(var(--w) * .5);opacity:.85}
}
@media (min-width:1300px){.art-cut.tr{right:calc((100vw - 1200px) / 2 - 140px)}}
/* phones: headings run edge to edge, so objects would sit on the text; phones keep the backgrounds only */
@media (max-width:599px){.art-cut{display:none}}

/* framed pieces hung at the side, like a small print on the wall (computers only) */
.art-frame{display:none}
@media (min-width:1100px){
  .art-frame{display:block;top:60px;right:calc((100vw - 1200px) / 2 - 190px);width:200px;background:#FBF5E8;padding:10px 10px 12px;border-radius:4px;box-shadow:0 18px 36px rgba(34,32,28,.25);transform:rotate(3deg)}
  .deep .art-frame{box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .art-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
  .art-frame figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:#5A4F42;text-align:center;font-style:italic}
}
/* only sections that actually hold a framed piece make room for it; everything else stays centered */
@media (min-width:1100px) and (max-width:1599px){.art-frame{right:24px;width:170px}[data-art]:has(>.art-frame) .wrap{padding-right:200px}}

@media (prefers-reduced-motion:no-preference){
  .art-cut img{animation:artFloat 9s ease-in-out infinite alternate}
  @keyframes artFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}
}

/* each color theme has its own background photos in the deep sections (see art.py) */
html[data-theme="red"] .art-bg.t-teal,html:not([data-theme="red"]) .art-bg.t-red{display:none}

/* side objects change with the colors too (see art.py) */
html[data-theme="red"] .art-cut.t-teal,html:not([data-theme="red"]) .art-cut.t-red{display:none}