/* Deferred portfolio focus layer. Load after style.css on work.html only. */
#portfolio-pages .portfolio-image,
.portfolio-focus-composition [data-detail-index] {
  cursor: zoom-in;
}

#portfolio-pages .portfolio-image:focus-visible,
.portfolio-focus-composition [data-detail-index]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

.portfolio-focus-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  /* Keep controls and artwork clear of cut-outs in either orientation. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0;
  box-sizing: border-box;
  color: #f1f1ee;
  background: #08090a;
}

.portfolio-focus-dialog::backdrop { background: #08090a; }

.portfolio-focus-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.portfolio-focus-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px clamp(16px, 3vw, 36px);
  font: 12px/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: .04em;
}

.portfolio-focus-toolbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.portfolio-focus-toolbar button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.portfolio-focus-actions{display:flex;align-items:center;gap:8px}
.portfolio-focus-actions [data-focus-close]{font-size:24px}
.portfolio-focus-title{margin:0;font:12px/1.3 Geist,Arial,sans-serif;letter-spacing:0}
.portfolio-focus-navigation{grid-column:3}
.portfolio-focus-zoom { display: flex; align-items: center; gap: 2px; }
.portfolio-focus-zoom button[data-focus-zoom="reset"] { min-width: 48px; }
.portfolio-focus-navigation { justify-self: end; display: flex; align-items: center; gap: 4px; }
.portfolio-focus-navigation output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.portfolio-focus-toolbar button:disabled { opacity: .28; cursor: default; }
.portfolio-focus-dialog[data-navigation-unavailable] .portfolio-focus-navigation { visibility: hidden; }

.portfolio-focus-viewport {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}

.portfolio-focus-image {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center;
  transition: transform 120ms ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.portfolio-focus-status {
  position: absolute;
  inset: auto 0 18px;
  margin: 0;
  padding: 0 18px;
  color: #f1f1ee;
  text-align: center;
  font: 11px/1.3 "Geist Mono", ui-monospace, monospace;
}

.portfolio-focus-status[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .portfolio-focus-image { transition: none; }
}

@media (max-width: 700px) {
  .portfolio-focus-toolbar { grid-template-columns: auto 1fr auto; gap: 6px; padding: 8px 12px; }
  .portfolio-focus-toolbar > button { font-size: 22px; }
  .portfolio-focus-zoom { justify-self: center; }
  .portfolio-focus-dialog[data-view=image] .portfolio-focus-navigation output { display: none; }
  .portfolio-focus-toolbar{gap:0;padding-inline:6px}
  .portfolio-focus-actions{gap:0}
  .portfolio-focus-title{font-size:11px}
  .portfolio-focus-zoom button[data-focus-zoom="reset"]{min-width:40px}
  .portfolio-focus-navigation{gap:0}
}

/* The transparent SVG canvases must not intercept adjacent photographs. */
.portfolio-native-asset,.portfolio-native-vector{pointer-events:none}
.portfolio-native-vector image{pointer-events:visiblePainted}
.portfolio-native-asset > img{pointer-events:auto}
.portfolio-focus-image{transition:none}

/* A continuous dark space, without bands at the top or bottom. */
.work-page{background:#08090a}
.work-page .work-space{filter:grayscale(1) brightness(.075) blur(36px)}
.work-page .work-space::after{content:none}
.work-page .reader-toolbar{background:rgba(8,9,10,.88);border-bottom-color:transparent}
.work-page .reader-toolbar #previous-work,
.work-page .reader-toolbar #next-work,
.work-page .reader-toolbar #work-count{display:none}

.portfolio-focus-composition{position:absolute;inset:0;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;scroll-snap-type:y proximity;touch-action:pan-y}
.portfolio-focus-composition{box-sizing:border-box;scroll-padding-block:0}
.portfolio-focus-composition::before,.portfolio-focus-composition::after{content:"";display:block;height:var(--reader-leading-space,0px);pointer-events:none}
.portfolio-focus-composition::after{height:var(--reader-trailing-space,0px)}
.portfolio-focus-composition::-webkit-scrollbar{display:none}
.portfolio-expanded-slide{height:100%;min-height:240px;padding:16px clamp(12px,3vw,48px) max(48px,env(safe-area-inset-bottom));scroll-snap-align:center}
.portfolio-expanded-media{height:100%;width:100%;display:grid;place-items:center;min-width:0;min-height:0}
.portfolio-focus-composition .portfolio-native-canvas{max-width:100%;margin:0;filter:none}
.portfolio-focus-single{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.portfolio-focus-hint{position:absolute;bottom:14px;left:12px;right:150px;margin:0;text-align:center;color:#b6b7b7;font:11px/1.5 Geist,Arial,sans-serif;pointer-events:none}
.portfolio-focus-next-composition{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:12px;min-width:44px;min-height:44px;padding:0 12px;border:0;background:#08090acc;color:#f1f1ee;font:11px/1 Geist,Arial,sans-serif;letter-spacing:.02em;cursor:pointer}
.portfolio-focus-next-composition:disabled{opacity:.3;cursor:default}
html.work-scroll-snap{scroll-snap-type:y proximity;scroll-padding-top:calc(72px + env(safe-area-inset-top));scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
html.work-scroll-snap #portfolio-pages .portfolio-image{scroll-snap-align:center;scroll-margin-block:calc(72px + env(safe-area-inset-top))}
html.work-scroll-snap .work-intro{scroll-snap-align:start;scroll-margin-top:74px}
.portfolio-focus-dialog[data-view=image] .portfolio-focus-viewport{touch-action:none}
.portfolio-focus-dialog[data-view=composition] .portfolio-focus-viewport{touch-action:pan-y}
.portfolio-focus-navigation{grid-column:3}
.portfolio-focus-zoom,.portfolio-focus-title{grid-column:2;grid-row:1}

/* One stop per composition. Arrows center the next slide; scrolling stays free. */
.work-guide{--guide-length:120px;right:2px;width:60px;height:244px;mix-blend-mode:normal;color:#e5e6e3}
.work-guide .page-guide-input{top:112px;height:44px}
.work-guide .page-guide-label{top:218px;font-size:10px}
.work-guide button{position:absolute;left:8px;width:44px;height:44px;min-height:44px;font-size:20px;line-height:1;padding:0}
.work-guide-previous{top:0}
.work-guide-next{top:176px}
.work-guide-hint{position:absolute;top:-22px;left:0;right:0;text-align:center;font:9px/1.2 "Geist Mono",monospace;letter-spacing:.02em;color:#aaa}
@media(hover:hover){.work-guide button:hover{color:#fff;background:#ffffff0d}}
@media(max-width:700px){
 .work-guide{position:fixed;top:auto;bottom:max(12px,env(safe-area-inset-bottom));right:50%;transform:translateX(50%);width:240px;height:44px;background:#08090ae8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 .work-guide .page-guide-input{left:96px;top:22px;width:96px;height:44px;transform:translate(-50%,-50%)}
 .work-guide .page-guide-label{top:17px;left:146px;right:auto;width:48px;font-size:9px}
 .work-guide button{top:0;left:0}
 .work-guide .work-guide-next{left:auto;right:0}
 .work-guide-hint{display:none}
 .work-page #portfolio-pages{padding:0 12px 86px}
 .portfolio-expanded-slide{padding:6px 8px max(26px,env(safe-area-inset-bottom))}
 .portfolio-expanded-slide{height:auto;min-height:0}
 .portfolio-expanded-media{height:auto;max-height:calc(100dvh - 92px);aspect-ratio:var(--portfolio-ratio,16 / 9)}
 .portfolio-focus-hint{left:8px;right:8px;bottom:58px}
 .portfolio-focus-next-composition{bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right));font-size:10px}
}

/* Landscape phones have room across the screen but little vertical room. */
@media (max-height: 520px) and (orientation: landscape) {
 .portfolio-focus-toolbar{min-height:44px;padding-block:4px}
 .portfolio-focus-toolbar button{min-height:44px;min-width:44px}
 .portfolio-focus-actions [data-focus-close]{font-size:21px}
 .portfolio-focus-title{font-size:11px}
 .portfolio-expanded-slide{min-height:0;padding-top:6px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
 .portfolio-focus-hint{display:none}
}

@media(max-width:359px){
 .portfolio-focus-dialog[data-view=image] .portfolio-focus-toolbar{grid-template-columns:1fr 1fr;grid-template-rows:44px 44px;padding:4px 8px;row-gap:0}
 .portfolio-focus-dialog[data-view=image] .portfolio-focus-actions{grid-column:1;grid-row:1}
 .portfolio-focus-dialog[data-view=image] .portfolio-focus-navigation{grid-column:2;grid-row:1}
 .portfolio-focus-dialog[data-view=image] .portfolio-focus-zoom{grid-column:1 / -1;grid-row:2;justify-self:center}
}

/* No rectangular focus frames when opening/closing the portfolio. */
#portfolio-pages .portfolio-image:focus,
#portfolio-pages .portfolio-image:focus-visible,
.portfolio-focus-composition [data-detail-index]:focus,
.portfolio-focus-composition [data-detail-index]:focus-visible,
.portfolio-focus-dialog:focus,
.portfolio-focus-toolbar button:focus,
.portfolio-focus-toolbar button:focus-visible{outline:none;box-shadow:none}
.portfolio-focus-toolbar button:focus-visible{color:var(--brand-green,#59ee79)}

.portfolio-focus-toolbar [data-focus-close],
.portfolio-focus-toolbar [data-focus-close]:focus,
.portfolio-focus-toolbar [data-focus-close]:focus-visible,
.portfolio-focus-toolbar [data-focus-close]:active{color:#fff}
.portfolio-focus-toolbar [data-focus-close]:hover{color:var(--brand-green,#59ee79)}