/* Portfolio covers only; the photo tint never affects foreground content. */
body.portfolio-page { position: fixed; inset: 0; margin: 0; overflow: hidden; }
.portfolio-page .site-main { height: 100%; min-height: 0; padding: 0; }
.portfolio {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-coffee);
  color: var(--color-ivory);
  isolation: isolate;
}
.portfolio__sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.portfolio__stage { height: 100%; overflow: clip; }
.portfolio .portfolio-cover {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--brand-header-initial-height) + 1rem) max(8rem, 13vw) 6rem max(1rem, 6vw);
}
.portfolio .portfolio-cover[hidden] { display: none; }
.portfolio-cover__photo, .portfolio-cover__picture, .portfolio-cover__photo::after { position: absolute; inset: 0; }
.portfolio-cover__photo { z-index: -1; }
.portfolio-cover__photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.portfolio-cover__photo::after { content: ""; z-index: 1; background: rgb(0 0 0 / 40%); pointer-events: none; }
.portfolio-cover { isolation: isolate; }
.portfolio-cover__copy { width: min(100%, 60rem); max-height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .5rem; overflow-wrap: anywhere; }
.portfolio-cover__copy h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 6vw, 6rem); line-height: 1.12; margin: 0 0 2rem; }
.portfolio-cover__copy h2 a { color: inherit; text-decoration: none; }
/* The gallery action inherits the shared public button theme and admin sizes. */
.portfolio-cover__button { display: inline-flex; }
.portfolio a:focus-visible { outline: 3px solid var(--color-ivory); outline-offset: 5px; }
.portfolio .portfolio__controls { position: absolute; inset: calc(var(--brand-header-initial-height) + 1rem) max(.5rem, env(safe-area-inset-right)) 6rem auto; flex-direction: column; justify-content: safe center; overflow: auto; overscroll-behavior: contain; padding: 8px; gap: .5rem; max-width: min(7rem, 112px); flex-wrap: nowrap; }
.portfolio__controls button { padding: .25rem .15rem; max-width: 100%; background: transparent; flex-shrink: 0; overflow-wrap: anywhere; }
.portfolio__counter { position: absolute; right: max(2rem, 6vw, env(safe-area-inset-right)); bottom: max(2rem, env(safe-area-inset-bottom)); font: 2.5rem/1.3 "Lao Sangam MN", "Noto Sans Lao", sans-serif; }
.portfolio__empty { position: absolute; inset: calc(var(--brand-header-initial-height) + 1rem) 1rem 6rem; margin: 0; padding: .5rem; overflow: auto; overscroll-behavior: contain; }
.portfolio__empty[hidden] { display: none; }
/* This list is only the no-script/initialization fallback, never an extra
   navigation control after the carousel has successfully become usable. */
.portfolio-fallback { position: absolute; inset: calc(var(--brand-header-initial-height) + 1rem) 1rem 1rem; padding: 1rem; overflow: auto; overscroll-behavior: contain; background: var(--color-coffee); color: var(--color-ivory); overflow-wrap: anywhere; }
.portfolio-fallback[hidden] { display: none; }
.portfolio-fallback ul { margin: 0; padding-left: 1.5rem; }
.portfolio-fallback a { color: inherit; display: inline-block; padding: .5rem 0; }
.portfolio:has([data-rotation-fallback]:not([hidden])) .portfolio-cover__copy,
.portfolio:has([data-rotation-fallback]:not([hidden])) .portfolio__counter,
.portfolio:has([data-rotation-fallback]:not([hidden])) .portfolio__controls { visibility: hidden; }
@media (max-width: 600px) {
  .portfolio .portfolio-cover { padding: calc(var(--brand-header-initial-height) + .5rem) calc(min(6rem, 96px) + 1.5rem) 6rem .5rem; }
  .portfolio__counter { right: 1rem; bottom: 1.5rem; font-size: 2rem; }
}

/* A short enlarged window keeps a readable inner line and one whole focused
   control available; the control rail itself scrolls, never the document. */
@media (max-height: 500px) {
  .portfolio .portfolio-cover { padding-top: var(--brand-header-initial-height); padding-bottom: 80px; }
  .portfolio .portfolio__controls { top: calc(var(--brand-header-initial-height) + 8px); bottom: 80px; }
  .portfolio__counter { font-size: 1.25rem; bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Keep each focused control wholly visible in a short landscape rail, even
   when the visitor enlarges text. Phone controls retain their 44px targets. */
@media (min-width: 769px) and (max-height: 500px) {
  .portfolio__controls { --circle-target-size: 60px; --circle-art-size: 60px; --circle-art-clearance: 42px; }
}

/* Only the script-disabled Portfolio needs a compact native primary menu:
   the shared always-open no-script bar would obscure the bounded fallback list. */
.portfolio-noscript-menu { position: fixed; top: 1rem; right: max(1rem, env(safe-area-inset-right)); color: var(--color-ivory); }
.portfolio-noscript-menu summary { padding: .5rem; min-height: 44px; cursor: pointer; background: var(--color-coffee); }
.portfolio-noscript-menu summary:focus-visible { outline: 3px solid var(--color-ivory); outline-offset: 3px; }
.portfolio-page:has(.portfolio-noscript-menu) .brand-menu-toggle { visibility: hidden; }
.portfolio-page:has(.portfolio-noscript-menu[open]) .portfolio { visibility: hidden; }