/* Sketch collages: use the full viewport in the lightbox. */
.artwork-lightbox:has(img[alt^="Collage"]) {
  padding: 0 !important;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  box-sizing: border-box;
}
.artwork-lightbox:has(img[alt^="Collage"]) figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.artwork-lightbox:has(img[alt^="Collage"]) img {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}
.artwork-lightbox:has(img[alt^="Collage"]) figcaption {
  position: absolute;
  bottom: 4px;
  left: 8px;
}
/* Smaller previews for feelings. */
.portfolio-packet:has(#packet-386) .packet-gallery {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
  height: auto !important;
  align-items: flex-start;
}
.portfolio-packet:has(#packet-386) .packet-artwork {
  position: static !important;
  width: auto !important;
  height: min(360px, 60vh) !important;
  max-width: 100%;
}
.portfolio-packet:has(#packet-386) .packet-artwork img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Keep keyboard instructions available to screen readers. */
.gallery-keyboard-help {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Mobile portfolio: independent columns without empty grid rows. */
@media (max-width: 600px) {
  body .portfolio-packet .packet-gallery {
    display: block !important;
    columns: 2 !important;
    column-gap: 14px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body .portfolio-packet .packet-gallery .packet-artwork {
    display: inline-block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    break-inside: avoid !important;
    vertical-align: top;
    transform: none !important;
    aspect-ratio: auto !important;
  }
  body .portfolio-packet .packet-gallery .packet-artwork img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
  }
}
/* Independent image columns at every viewport size. */
body .portfolio-packet .packet-gallery {
  display: block !important;
  columns: 3 !important;
  column-gap: 24px !important;
  height: auto !important;
  min-height: 0 !important;
}
body .portfolio-packet .packet-gallery .packet-artwork {
  display: inline-block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  break-inside: avoid !important;
  vertical-align: top;
  transform: none !important;
  aspect-ratio: auto !important;
}
body .portfolio-packet .packet-gallery .packet-artwork img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
@media (min-width:1600px) {
  body .portfolio-packet .packet-gallery {
    columns: 4 !important;
  }
}
@media (max-width:1000px) {
  body .portfolio-packet .packet-gallery {
    columns: 2 !important;
    column-gap: 20px !important;
  }
  body .portfolio-packet .packet-gallery .packet-artwork {
    margin-bottom: 20px !important;
  }
}
@media (max-width:600px) {
  body .portfolio-packet .packet-gallery {
    column-gap: 14px !important;
  }
  body .portfolio-packet .packet-gallery .packet-artwork {
    margin-bottom: 14px !important;
  }
}
/* Keep the feelings gallery in the same column layout. */
body .portfolio-packet:has(#packet-386) .packet-gallery {
  display: block !important;
}
body .portfolio-packet:has(#packet-386) .packet-gallery .packet-artwork {
  width: 100% !important;
  height: auto !important;
}
/* Hide the work-packet link list at every viewport size. */
.category-nav {
  display: none!important;
}
/* Home layout: about beside the artwork grid, matching the supplied sketches. */
@media(min-width:701px) {
  body.home main#content {
    display: grid;
    grid-template-columns: 6.4% minmax(210px,1fr) clamp(24px,3.5vw,64px) minmax(0,2.7fr) 6.4%;
    align-items: start;
    padding-bottom: clamp(90px,8vw,160px);
  }
  body.home .hero {
    grid-column: 1/-1;
    grid-row: 1;
  }
  body.home .works {
    grid-column: 4;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr)) auto;
    gap: clamp(12px,1.4vw,24px);
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: clamp(40px,5.58vw,90px) 0 0;
    align-self: start;
  }
  body.home .works .work-card:nth-child(n) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    grid-column: auto;
    grid-row: auto;
  }
  body.home .works .work-card:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/3;
    aspect-ratio: auto;
  }
  body.home .works .work-card:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  body.home .works .work-card:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
  }
  body.home .works .work-card:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
  body.home .works .work-card:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
  }
  body.home .works .work-card[data-category="photography"] {
    grid-column: 1/-1;
    grid-row: 3;
    aspect-ratio: 5/1;
  }
  body.home .about {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    width: 100%;
    padding: 0;
    margin: clamp(40px,5.58vw,90px) 0 0;
    border: 0;
  }
  body.home .about-heading {
    position: static;
    order: 0;
    align-self: flex-start;
    margin: 0 0 22px;
    padding: 0;
    transform: none;
  }
  body.home .about-copy {
    order: 1;
    align-self: stretch;
    grid-column: auto;
    grid-row: auto;
    padding: 0;
    margin: 0;
    text-align: left;
  }
  body.home .about-copy p {
    max-width: none;
    font-size: clamp(15px,1.1vw,19px);
    line-height: 1.65;
  }
  body.home .about-copy p:first-child {
    margin-top: 0;
  }
  body.home .about-space {
    display: none;
  }
  body.home .about-media {
    order: 2;
    align-self: flex-start;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    margin: 24px 0 0;
    background: transparent;
  }
  body.home .about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.home .works .work-card .label {
    font-size: clamp(11px,.9vw,17px);
    padding: 9px 10px;
    overflow-wrap: anywhere;
  }
}
@media(min-width:701px) and (max-width:1199px) {
  body.home main#content {
    grid-template-columns: 5% minmax(195px,1fr) clamp(24px,3vw,40px) minmax(0,1.5fr) 5%;
  }
  body.home .works {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: auto;
    gap: 16px;
  }
  body.home .works .work-card:nth-child(1) {
    grid-column: 1/-1;
    grid-row: 1;
    aspect-ratio: 1.3/1;
  }
  body.home .works .work-card:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  body.home .works .work-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  body.home .works .work-card:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }
  body.home .works .work-card:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
  body.home .works .work-card[data-category="photography"] {
    grid-column: 1/-1;
    grid-row: 4;
    aspect-ratio: 2.5/1;
  }
}
@media(min-width:701px) and (max-width:1199px) {
  body.home .about {
    align-self: start;
    margin-top: calc(clamp(40px,5.58vw,90px) + 60px);
  }
}
/* Lighter editorial balance; preserve original tile sizes on wide screens. */
@media(min-width:701px) {
  body.home .about {
    max-width: 290px;
  }
  body.home .about-heading {
    color: var(--ink);
    letter-spacing: .12em;
    font-size: 13px;
    margin-bottom: 26px;
  }
  body.home .about-copy p {
    font-size: clamp(15px,1vw,18px);
    line-height: 1.8;
  }
  body.home .about-copy p+p {
    margin-top: 28px;
  }
  body.home .works .work-card .label {
    font-weight: 450;
    letter-spacing: .035em;
    padding: 8px 11px;
  }
  body.home .works {
    gap: clamp(14px,1.5vw,24px);
  }
  body.home .about-media:empty {
    display: none;
  }
  body.home .about {
    align-self: center;
    margin-top: 0;
  }
  body.home .works .work-card {
    border-radius: 0;
  }
}
@media(min-width:1600px) {
  body.home {
    --original-site-width: clamp(1440px,62.5vw,1800px);
    --original-grid-width: calc(var(--original-site-width) * .812);
    --about-column: clamp(220px,10vw,280px);
    --editorial-gap: clamp(44px,3vw,80px);
  }
  body.home main#content {
    width: calc(var(--original-grid-width) + var(--about-column) + var(--editorial-gap));
    margin-left: calc((100% - var(--original-grid-width) - var(--about-column) - var(--editorial-gap)) / 2);
    grid-template-columns: 0 var(--about-column) var(--editorial-gap) var(--original-grid-width) 0;
  }
  body.home .hero {
    width: var(--original-site-width);
    justify-self: center;
  }
  body.home .works {
    --work-gap: 18px;
    gap: 18px;
    grid-template-rows: repeat(2,calc(var(--original-grid-width) * .25 - 13.5px)) clamp(115px,13vw,190px);
  }
  body.home .works .work-card[data-category="photography"] {
    aspect-ratio: auto;
  }
  body.home .about {
    align-self: end;
    margin-bottom: clamp(30px,3vw,70px);
  }
}
@media(min-width:3200px) {
  body.home {
    --original-site-width: 2200px;
  }
}
/* More breathing room with an understated vertical divider. */
@media(min-width:701px) {
  body.home main#content {
    --raster-shift: clamp(18px,3vw,48px);
  }
  body.home .works {
    transform: translateX(var(--raster-shift));
  }
  body.home .about {
    position: relative;
  }
  body.home .about::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(-1 * clamp(22px,3.5vw,60px));
    width: 1px;
    background: var(--muted);
    opacity: .4;
    pointer-events: none;
  }
}
@media(min-width:1600px) {
  body.home main#content {
    --raster-shift: clamp(48px,4vw,140px);
  }
  body.home .about::after {
    right: calc((var(--editorial-gap) + var(--raster-shift)) / -2);
  }
}
/* Remove the signature and extend the divider beyond the artwork grid. */
.hero .signature {
  display: none!important;
}
@media(min-width:701px) {
  body.home .about::after {
    display: none;
  }
  body.home main#content::before {
    content: "";
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    align-self: stretch;
    width: 1px;
    margin-top: calc(clamp(40px,5.58vw,90px) - 24px);
    margin-bottom: -24px;
    background: var(--muted);
    opacity: .4;
    transform: translateX(calc(var(--raster-shift) / 2));
    pointer-events: none;
  }
}
/* Desktop portfolio: wider canvas and proportional paired artworks. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet,body .portfolio-page .portfolio-intro {
    padding-left: 4%;
    padding-right: 4%;
  }
  body .portfolio-page .portfolio-packet .packet-gallery {
    columns: 3!important;
    column-gap: clamp(20px,2vw,36px)!important;
  }
  body .portfolio-page .portfolio-packet .packet-gallery:has(>.packet-artwork:nth-child(2):last-child) {
    display: grid!important;
    grid-template-columns: var(--pair-columns,1fr 1fr);
    grid-auto-rows: auto;
    align-items: start;
    gap: clamp(20px,2vw,36px);
    columns: auto!important;
    height: auto!important;
  }
  body .portfolio-page .portfolio-packet .packet-gallery:has(>.packet-artwork:nth-child(2):last-child) .packet-artwork:nth-child(n) {
    display: block!important;
    grid-column: auto;
    grid-row: auto;
    position: relative!important;
    left: auto!important;
    top: auto!important;
    width: 100%!important;
    height: auto!important;
    margin: 0!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    --pair-columns: 849fr 360fr;
  }
}
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    display: grid!important;
    grid-template-columns: 849fr 360fr!important;
    columns: auto!important;
    grid-auto-rows: auto!important;
    align-items: start!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery:has(>.packet-artwork:first-child img[width="360"]) {
    grid-template-columns: 360fr 849fr!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery .packet-artwork:nth-child(n) {
    grid-column: auto!important;
    grid-row: auto!important;
    display: block!important;
    width: 100%!important;
    height: auto!important;
    margin: 0!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery .packet-artwork img {
    width: 100%!important;
    height: auto!important;
  }
}
/* Compact oil previews; the protected full image remains in the lightbox. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    width: min(100%,calc(clamp(260px,30vw,360px) * 1.209 + clamp(20px,2vw,36px)))!important;
    max-width: 100%!important;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Soft grey-white frosted backdrop, keeping the artwork sharp. */
dialog.artwork-lightbox {
  background: rgba(245,245,243,.78)!important;
  color: #252522!important;
  backdrop-filter: blur(22px) grayscale(1);
  -webkit-backdrop-filter: blur(22px) grayscale(1);
}
dialog.artwork-lightbox::backdrop {
  background: rgba(228,228,225,.45);
  backdrop-filter: blur(22px) grayscale(1);
  -webkit-backdrop-filter: blur(22px) grayscale(1);
}
dialog.artwork-lightbox button,dialog.artwork-lightbox figcaption,dialog.artwork-lightbox .artwork-lightbox-status {
  color: #252522!important;
}
dialog.artwork-lightbox button {
  background: rgba(255,255,255,.75)!important;
}
/* Slow, subtle organic motion only while home previews are blurred. */
@keyframes skn-preview-morph {
  0% {
    transform: scale(1.09,1.07) translate(-.45%,.35%) skew(-.65deg,.35deg);
  }
  50% {
    transform: scale(1.12,1.09) translate(.35%,-.4%) skew(.55deg,-.45deg);
  }
  100% {
    transform: scale(1.08,1.11) translate(.5%,.25%) skew(-.25deg,.6deg);
  }
}
body.home .works .work-card img {
  animation: skn-preview-morph 16s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 19s;
  animation-delay: -7s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 22s;
  animation-delay: -11s;
}
body.home .works .work-card.is-viewport-center img,body.home .works .work-card:focus-within img {
  animation: none;
}
@media(hover:hover) and (pointer:fine) {
  body.home .works .work-card:hover img {
    animation: none;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.home .works .work-card img {
    animation: none!important;
  }
}
/* Smaller portfolio thumbnails in flowing asymmetrical columns. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet,body .portfolio-page .portfolio-intro {
    padding-left: 3%;
    padding-right: 3%;
  }
  body .portfolio-page .portfolio-packet .packet-gallery {
    columns: 4!important;
    column-gap: clamp(18px,1.6vw,28px)!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    width: min(100%,calc(clamp(220px,22vw,280px) * 1.209 + clamp(20px,2vw,36px)))!important;
    columns: auto!important;
  }
}
@media(min-width:1600px) {
  body .site:has(.portfolio-page) {
    width: 94%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  body .portfolio-page .portfolio-packet,body .portfolio-page .portfolio-intro {
    padding-left: 1.5%;
    padding-right: 1.5%;
  }
  body .portfolio-page .portfolio-packet .packet-gallery {
    columns: 5!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    columns: auto!important;
  }
}
@media(min-width:2400px) {
  body .portfolio-page .portfolio-packet .packet-gallery {
    columns: 7!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    columns: auto!important;
  }
}
/* Increase morph amplitude by seventeen percent, retaining the timing. */
@keyframes skn-preview-morph {
  0% {
    transform: scale(1.0883,1.0649) translate(-.5265%,.4095%) skew(-.7605deg,.4095deg);
  }
  50% {
    transform: scale(1.1234,1.0883) translate(.4095%,-.468%) skew(.6435deg,-.5265deg);
  }
  100% {
    transform: scale(1.0766,1.1117) translate(.585%,.2925%) skew(-.2925deg,.702deg);
  }
}
/* Portfolio preview trial: reveal on hover or near the touch viewport centre. */
.portfolio-page .packet-artwork img {
  transition: filter 1.2s ease,transform 1.2s ease;
  transform: scale(1.035);
}
@media(hover:hover) and (pointer:fine) {
  .portfolio-page .packet-artwork img {
    filter: blur(14px);
  }
  .portfolio-page .packet-artwork:hover img,.portfolio-page .packet-artwork:focus-within img {
    filter: blur(0);
    transform: scale(1);
  }
}
@keyframes skn-portfolio-scroll-reveal {
  0%,20%,80%,100% {
    filter: blur(14px);
  }
  40%,60% {
    filter: blur(0);
  }
}
@media(max-width:1024px),(hover:none) {
  @supports(animation-timeline:view()) {
    .portfolio-page .packet-artwork img {
      animation: skn-portfolio-scroll-reveal 1s linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    .portfolio-page .packet-artwork:focus-within img,.portfolio-page .packet-artwork:active img {
      animation: none;
      filter: blur(0);
    }
  }
}
@keyframes skn-lightbox-arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
dialog.artwork-lightbox[open] figure img {
  animation: skn-lightbox-arrive .38s cubic-bezier(.2,.7,.25,1) both;
}
dialog.artwork-lightbox {
  transition: opacity .28s ease;
}
@starting-style {
  dialog.artwork-lightbox[open] {
    opacity: 0;
  }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-page .packet-artwork img {
    animation: none!important;
    transition: none!important;
    filter: none!important;
    transform: none!important;
  }
  dialog.artwork-lightbox[open] figure img {
    animation: none!important;
  }
  dialog.artwork-lightbox {
    transition: none!important;
  }
}
/* Gentler work-packet blur. */
@media(hover:hover) and (pointer:fine) {
  .portfolio-page .packet-artwork img {
    filter: blur(4px);
  }
  .portfolio-page .packet-artwork:hover img,.portfolio-page .packet-artwork:focus-within img {
    filter: blur(0);
  }
}
@keyframes skn-portfolio-scroll-reveal {
  0%,20%,80%,100% {
    filter: blur(4px);
  }
  40%,60% {
    filter: blur(0);
  }
}
/* Desktop lightbox occupies only the right third of the screen. */
@media(min-width:1025px) {
  dialog.artwork-lightbox,dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    position: fixed;
    inset: 0 0 0 auto!important;
    margin: 0!important;
    width: 33.333333vw!important;
    max-width: 33.333333vw!important;
    height: 100dvh!important;
    max-height: 100dvh!important;
    padding: 58px 28px 36px!important;
    box-shadow: -12px 0 48px #00000016;
  }
  dialog.artwork-lightbox figure,dialog.artwork-lightbox:has(img[alt^="Collage"]) figure {
    width: 100%!important;
    height: 100%!important;
    max-width: 100%;
    margin: 0!important;
    padding: 0!important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  dialog.artwork-lightbox figure img,dialog.artwork-lightbox:has(img[alt^="Collage"]) img {
    width: auto!important;
    height: auto!important;
    max-width: 100%!important;
    max-height: calc(100dvh - 130px)!important;
    object-fit: contain!important;
  }
  dialog.artwork-lightbox .artwork-lightbox-prev {
    left: 4px;
  }
  dialog.artwork-lightbox .artwork-lightbox-next {
    right: 4px;
  }
  dialog.artwork-lightbox .artwork-lightbox-close {
    right: 10px;
    top: 10px;
  }
}
/* Centre the compact desktop lightbox. */
@media(min-width:1025px) {
  dialog.artwork-lightbox,dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    inset: 0!important;
    margin: 0 auto!important;
    box-shadow: 0 0 48px #00000016;
  }
}
/* Portfolio thumbnails stay clear until a lightbox is open. */
body .portfolio-page .packet-artwork img {
  animation: none!important;
  filter: none!important;
  transform: none!important;
  transition: filter .45s ease!important;
}
body:has(dialog.artwork-lightbox[open]) .portfolio-page .packet-artwork img {
  filter: blur(8px)!important;
}
dialog.artwork-lightbox::backdrop {
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  background: rgba(238,238,235,.35);
}
@media(min-width:1025px) {
  dialog.artwork-lightbox,dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    inset: 32px auto 32px clamp(24px,4vw,72px)!important;
    margin: 0!important;
    height: calc(100dvh - 64px)!important;
    max-height: calc(100dvh - 64px)!important;
    box-shadow: 0 8px 48px #0000001a;
  }
  dialog.artwork-lightbox figure img,dialog.artwork-lightbox:has(img[alt^="Collage"]) img {
    max-height: calc(100dvh - 194px)!important;
  }
}
/* Clearly visible, slow pulse in the blurred home previews. */
@keyframes skn-preview-morph {
  0%,100% {
    transform: scale(1.07,1.07);
  }
  45% {
    transform: scale(1.22,1.2);
  }
  58% {
    transform: scale(1.2,1.22);
  }
}
body.home .works .work-card img {
  animation-duration: 7.5s;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 8.5s;
  animation-delay: -2.5s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 9.5s;
  animation-delay: -5s;
}
/* Compact portfolio masonry, following the reference layout. */
@media (min-width:1025px) {
  body .portfolio-page .portfolio-packet .packet-gallery {
    width: 74%;
    max-width: 1200px!important;
    margin-left: 0!important;
    margin-right: auto!important;
    columns: 5!important;
    column-gap: clamp(12px,1.1vw,20px)!important;
  }
  body .portfolio-page .portfolio-packet .packet-gallery .packet-artwork {
    margin-bottom: clamp(12px,1.1vw,20px)!important;
  }
}
/* Portfolio: thumbnails right, lightbox in the free left area. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet .packet-gallery {
    margin-left: auto!important;
    margin-right: 0!important;
  }
  body .portfolio-page .portfolio-packet:has(#packet-386) .packet-gallery {
    margin-left: auto!important;
    margin-right: 0!important;
  }
  dialog.artwork-lightbox,dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    left: clamp(18px,2vw,48px)!important;
    right: auto!important;
    width: 24vw!important;
    max-width: 24vw!important;
    padding-left: 18px!important;
    padding-right: 18px!important;
  }
}
/* Centre the lightbox in the empty space left of the thumbnail block. */
@media(min-width:1025px) {
  body {
    --portfolio-grid-width: min(69.56vw,1200px);
  }
  dialog.artwork-lightbox,dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    left: calc((100% - var(--portfolio-grid-width))/2 - 12vw)!important;
  }
}
@media(min-width:1600px) {
  body {
    --portfolio-grid-width: min(67.4732vw,1200px);
  }
}
/* Quiet lightbox navigation, retaining generous hit areas. */
body dialog.artwork-lightbox .artwork-lightbox-prev,body dialog.artwork-lightbox .artwork-lightbox-next {
  background: transparent!important;
  border: 0!important;
  box-shadow: none!important;
  border-radius: 0!important;
  width: 44px!important;
  height: 44px!important;
  font-size: 25px!important;
  font-weight: 300!important;
  opacity: .45;
  transition: opacity .2s ease!important;
  color: #252522!important;
}
body dialog.artwork-lightbox .artwork-lightbox-prev:hover,body dialog.artwork-lightbox .artwork-lightbox-next:hover,body dialog.artwork-lightbox .artwork-lightbox-prev:focus-visible,body dialog.artwork-lightbox .artwork-lightbox-next:focus-visible {
  opacity: 1;
}
/* Show only the artwork and controls, without a grey lightbox panel. */
body dialog.artwork-lightbox {
  background: transparent!important;
  box-shadow: none!important;
  border: 0!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
}
body dialog.artwork-lightbox::backdrop {
  background: transparent!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
}
body dialog.artwork-lightbox .artwork-lightbox-prev,body dialog.artwork-lightbox .artwork-lightbox-next,body dialog.artwork-lightbox .artwork-lightbox-close,body dialog.artwork-lightbox .artwork-lightbox-status,body dialog.artwork-lightbox figcaption {
  color: var(--ink)!important;
}
body dialog.artwork-lightbox .artwork-lightbox-close {
  background: transparent!important;
  box-shadow: none!important;
  border: 0!important;
  opacity: .65;
}
/* Align portfolio with its neighbours; the word opens the categories. */
body .nav .portfolio-menu {
  align-items: baseline;
  gap: 0;
}
body .nav .portfolio-menu-toggle {
  position: absolute;
  left: 0;
  top: -6px;
  width: 100%;
  height: 32px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  z-index: 1;
}
body .nav .portfolio-submenu {
  top: calc(100% + 12px);
}
@media(max-width:700px) {
  body .nav .portfolio-submenu {
    padding-top: 12px;
  }
}
/* Give horizontal works more width, while retaining small portrait previews. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) {
    columns: 4!important;
  }
  body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork {
    width: 79%!important;
  }
  body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="707"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="777"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1024"][height="724"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1024"][height="683"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="608"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="716"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="689"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1000"][height="563"]),
body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork:has(img[width="1024"][height="783"]) {
    width: 100%!important;
  }
}
/* Packet descriptions follow the right-aligned heading. */
body .portfolio-page .portfolio-packet .packet-intro {
  display: block!important;
  width: 100%;
  max-width: 44rem!important;
  margin: 12px 0 32px auto!important;
  text-align: right!important;
  grid-column: 1 / -1!important;
}
body .portfolio-page .portfolio-packet .packet-intro p {
  margin-left: auto!important;
  margin-right: 0!important;
  text-align: right!important;
}
/* More room for the lightbox on narrower desktop screens. */
@media(min-width:1025px) and (max-width:1599px) {
  body dialog.artwork-lightbox,body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    left: clamp(16px,1.5vw,24px)!important;
    right: auto!important;
    width: 33.333333vw!important;
    max-width: 33.333333vw!important;
  }
}
/* Portraits and landscapes use the same column width. */
@media(min-width:1025px) {
  body .portfolio-page .portfolio-packet .packet-gallery:not(:has(>.packet-artwork:nth-child(2):last-child)) .packet-artwork {
    width: 100%!important;
  }
}
/* Responsive artwork size, October 2026. */
@media (min-width:1025px) {
  body dialog.artwork-lightbox, body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    box-sizing: border-box!important;
    width: 28.5vw!important;
    max-width: 28.5vw!important;
    left: calc((100vw - var(--portfolio-grid-width))/2 - 14.25vw)!important;
    right: auto!important;
    top: 4vh!important;
    bottom: auto!important;
    height: 92dvh!important;
    max-height: 92dvh!important;
    padding: 32px 4px 20px!important;
  }
  body dialog.artwork-lightbox figure, body dialog.artwork-lightbox:has(img[alt^="Collage"]) figure {
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    padding: 0!important;
  }
  body dialog.artwork-lightbox figure img, body dialog.artwork-lightbox:has(img[alt^="Collage"]) img {
    width: 100%!important;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 100%!important;
    object-fit: contain!important;
  }
  body dialog.artwork-lightbox .artwork-lightbox-status {
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}
@media (min-width:1025px) and (max-width:1599px) {
  body dialog.artwork-lightbox, body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    width: 42vw!important;
    max-width: 42vw!important;
    left: clamp(12px,1.5vw,24px)!important;
  }
}
@media (max-width:1024px), (max-height:600px) and (pointer:coarse) {
  body dialog.artwork-lightbox, body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    box-sizing: border-box!important;
    inset: 0!important;
    margin: 0!important;
    width: 100vw!important;
    max-width: 100vw!important;
    height: 100dvh!important;
    max-height: 100dvh!important;
    padding: 0!important;
  }
  body dialog.artwork-lightbox figure, body dialog.artwork-lightbox:has(img[alt^="Collage"]) figure {
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    padding: 0!important;
    gap: 0!important;
  }
  body dialog.artwork-lightbox figure img, body dialog.artwork-lightbox:has(img[alt^="Collage"]) img {
    width: 100%!important;
    height: 100%!important;
    max-width: 100%!important;
    max-height: 100%!important;
    object-fit: contain!important;
  }
  body dialog.artwork-lightbox figcaption, body dialog.artwork-lightbox .artwork-lightbox-status {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important;
    clip-path: inset(50%);
  }
  body dialog.artwork-lightbox .artwork-lightbox-close {
    top: max(4px,env(safe-area-inset-top))!important;
    right: max(4px,env(safe-area-inset-right))!important;
    z-index: 3;
    font-size: 32px;
  }
  body dialog.artwork-lightbox button {
    color: var(--ink)!important;
    text-shadow: 0 0 3px var(--paper),0 0 6px var(--paper);
  }
}
@media(min-width:1025px) {
  body dialog.artwork-lightbox .artwork-lightbox-close {
    top: 0!important;
    right: 0!important;
    z-index: 3;
    font-size: 28px!important;
    line-height: 1!important;
  }
}
/* Separate the existing homepage link from the portfolio category button. */
body .nav .portfolio-menu {
  display: flex!important;
  align-items: baseline!important;
  gap: 28px!important;
  --nav-label-size: 16px;
}
body .nav .portfolio-menu > a {
  font-size: 0!important;
  line-height: 1.5;
}
body .nav .portfolio-menu > a::before {
  content: "start";
  font-size: var(--nav-label-size);
  text-transform: lowercase;
}
body .nav .portfolio-menu-toggle {
  position: static!important;
  left: auto!important;
  top: auto!important;
  width: auto!important;
  height: auto!important;
  min-width: 0!important;
  min-height: 0!important;
  padding: 0!important;
  flex: none;
  z-index: auto!important;
  font-size: 0!important;
  line-height: 1.5!important;
  color: inherit!important;
  font-family: inherit!important;
  letter-spacing: inherit!important;
  background: transparent!important;
  border: 0!important;
}
body .nav .portfolio-menu-toggle::before {
  content: "portfolio";
  font-size: var(--nav-label-size);
  text-transform: lowercase;
}
body .nav .portfolio-menu-toggle::after {
  display: none!important;
}
body .nav .portfolio-submenu {
  left: auto!important;
  right: 0!important;
}
@media(max-width:700px) {
  body .nav .portfolio-menu {
    --nav-label-size: 15px;
    gap: 28px!important;
  }
}
/* Softer breathing with a gently circling drift in blurred previews. */
@keyframes skn-preview-morph {
  0%,100% {
    transform: translate(-.35%,.2%) rotate(-1deg) scale(1.085,1.09);
  }
  25% {
    transform: translate(.15%,-.35%) rotate(-.2deg) scale(1.095,1.09);
  }
  50% {
    transform: translate(.4%,.05%) rotate(.9deg) scale(1.105,1.10);
  }
  75% {
    transform: translate(-.05%,.4%) rotate(.2deg) scale(1.095,1.105);
  }
}
body.home .works .work-card img {
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  transform-origin: 50% 50%;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 19s;
  animation-delay: -7s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 22s;
  animation-delay: -11s;
}
@media(min-width:1025px) and (max-width:1599px) {
  body.home .about {
    transform: translateY(clamp(24px,2.4vw,40px));
  }
}
/* Wild, swirling morph for blurred home previews. */
@keyframes skn-preview-morph {
  0%,100% {
    transform: translate(-3%,2%) rotate(-8deg) skew(-5deg,3deg) scale(1.32,1.24);
  }
  20% {
    transform: translate(4%,-3%) rotate(7deg) skew(7deg,-5deg) scale(1.48,1.3);
  }
  40% {
    transform: translate(-2%,-4%) rotate(14deg) skew(-8deg,6deg) scale(1.3,1.53);
  }
  60% {
    transform: translate(-4%,3%) rotate(-10deg) skew(6deg,-7deg) scale(1.52,1.31);
  }
  80% {
    transform: translate(3%,4%) rotate(5deg) skew(-4deg,8deg) scale(1.36,1.48);
  }
}
body.home .works .work-card img {
  animation-duration: 6s;
  animation-timing-function: cubic-bezier(.45,0,.55,1);
  transform-origin: 50% 50%;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 7.2s;
  animation-delay: -2.5s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 8.4s;
  animation-delay: -4.8s;
}
/* Continuous flowing morph: independent, smooth movement cycles. */
@keyframes skn-preview-morph {
  0%,100% {
    transform: scale(1.40,1.30) skew(-5deg,3deg);
  }
  50% {
    transform: scale(1.30,1.44) skew(5deg,-3deg);
  }
}
@keyframes skn-preview-swirl {
  0%,100% {
    rotate: -8deg;
    translate: -2% 0;
  }
  25% {
    rotate: 0deg;
    translate: 0 -2%;
  }
  50% {
    rotate: 8deg;
    translate: 2% 0;
  }
  75% {
    rotate: 0deg;
    translate: 0 2%;
  }
}
body.home .works .work-card img {
  animation: skn-preview-morph 12s ease-in-out infinite,skn-preview-swirl 18s cubic-bezier(.37,0,.63,1) infinite;
  transform-origin: 50% 50%;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 14s,21s;
  animation-delay: -5s,-8s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 16s,24s;
  animation-delay: -9s,-14s;
}
body.home .works .work-card.is-viewport-center img,body.home .works .work-card:focus-within img {
  animation: none;
  rotate: 0deg;
  translate: 0 0;
}
@media(hover:hover) and (pointer:fine) {
  body.home .works .work-card:hover img {
    animation: none;
    rotate: 0deg;
    translate: 0 0;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.home .works .work-card img {
    animation: none!important;
    rotate: 0deg;
    translate: 0 0;
  }
}
/* A small, slow breathing pulse in blurred homepage previews. */
@keyframes skn-preview-breathe {
  0%,100% {
    transform: scale(1.065);
  }
  50% {
    transform: scale(1.085);
  }
}
body.home .works .work-card img {
  animation: skn-preview-breathe 10s ease-in-out infinite;
  rotate: 0deg!important;
  translate: 0 0!important;
  transform-origin: 50% 50%;
}
body.home .works .work-card:nth-child(2n) img {
  animation-duration: 11.5s;
  animation-delay: -4s;
}
body.home .works .work-card:nth-child(3n) img {
  animation-duration: 13s;
  animation-delay: -7s;
}
body.home .works .work-card.is-viewport-center img,body.home .works .work-card:focus-within img {
  animation: none;
}
@media(hover:hover) and (pointer:fine) {
  body.home .works .work-card:hover img {
    animation: none;
  }
}
@media(prefers-reduced-motion:reduce) {
  body.home .works .work-card img {
    animation: none!important;
  }
}
/* Homepage arrangement matching the latest six-picture reference. */
body.home .works {
  display: grid;
  grid-template-columns: repeat(875,minmax(0,1fr));
  grid-template-rows: repeat(602,minmax(0,1fr));
  gap: 0;
  aspect-ratio: 875/602;
  height: auto;
  min-height: 0;
  align-content: stretch;
}
body.home .works .work-card:nth-child(n) {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  aspect-ratio: auto;
  margin: 0;
  align-self: stretch;
  justify-self: stretch;
}
body.home .works .work-card:nth-child(1) {
  grid-column: 1/226;
  grid-row: 145/438;
}
body.home .works .work-card:nth-child(2) {
  grid-column: 239/464;
  grid-row: 1/296;
}
body.home .works .work-card:nth-child(3) {
  grid-column: 477/639;
  grid-row: 69/296;
}
body.home .works .work-card:nth-child(4) {
  grid-column: 651/876;
  grid-row: 145/438;
}
body.home .works .work-card:nth-child(5) {
  grid-column: 239/401;
  grid-row: 309/535;
}
body.home .works .work-card:nth-child(6) {
  grid-column: 416/640;
  grid-row: 309/603;
}
@media(max-width:700px) {
  body.home .works {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    aspect-ratio: 875/602;
  }
  body.home .works .work-card .label {
    font-size: clamp(8px,2.1vw,12px);
    line-height: 1.2;
    padding: 4px;
  }
}
/* Keep the requested lower about text position. */
@media(min-width:701px) {
  body.home .about {
    position: relative;
    top: 60px;
  }
}
/* Divider follows the about box, extending 20px above and below. */
@media(min-width:701px) {
  body.home main#content::before {
    display: none!important;
  }
  body.home .about::after {
    display: block!important;
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    right: calc(-1 * clamp(22px,3.5vw,60px));
    width: 1px;
    background: var(--muted);
    opacity: .4;
    pointer-events: none;
  }
}
@media(min-width:1600px) {
  body.home .about::after {
    right: calc((var(--editorial-gap) + var(--raster-shift)) / -2);
  }
}
/* Mobile navigation opens as one left-aligned dropdown below the burger. */
@media(max-width:700px) {
  body .site-header {
    position: relative;
  }
  body #site-nav {
    position: absolute!important;
    left: 8%!important;
    right: auto!important;
    top: calc(100% - 10px)!important;
    width: max-content!important;
    min-width: 190px;
    max-width: 84vw;
    box-sizing: border-box;
    padding: 18px 22px!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    justify-content: flex-start!important;
    gap: 18px!important;
    z-index: 100;
  }
  body #site-nav:not(.is-open) {
    display: none!important;
  }
  body #site-nav.is-open {
    display: flex!important;
  }
  body #site-nav .portfolio-menu {
    width: 100%!important;
    display: flex!important;
    flex-wrap: wrap!important;
    align-items: center!important;
    justify-content: flex-start!important;
    gap: 18px!important;
  }
  body #site-nav .portfolio-submenu {
    position: static!important;
    flex-basis: 100%!important;
    width: 100%!important;
    min-width: 0!important;
    padding: 0 0 0 8px!important;
    margin: 0!important;
    box-shadow: none!important;
    border: 0!important;
  }
  body #site-nav .portfolio-submenu a {
    white-space: normal!important;
  }
}
/* Mobile lightbox controls stay with the artwork; empty space targets the dialog. */
@media(max-width:1024px) {
  body dialog.artwork-lightbox,body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    box-sizing: border-box!important;
    inset: 0!important;
    margin: 0!important;
    width: 100vw!important;
    max-width: 100vw!important;
    height: 100dvh!important;
    max-height: 100dvh!important;
    padding: 72px 10px max(12px,env(safe-area-inset-bottom))!important;
    overflow: hidden!important;
    grid-template-columns: 1fr 52px 64px 52px 1fr;
    grid-template-rows: 44px minmax(0,1fr) 56px;
    gap: 10px 0;
  }
  body dialog.artwork-lightbox[open] {
    display: grid!important;
  }
  body dialog.artwork-lightbox figure,body dialog.artwork-lightbox:has(img[alt^="Collage"]) figure {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%!important;
    height: 100%!important;
    min-height: 0!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    pointer-events: none!important;
  }
  body dialog.artwork-lightbox figure img,body dialog.artwork-lightbox:has(img[alt^="Collage"]) img {
    width: auto!important;
    height: auto!important;
    max-width: 100%!important;
    max-height: 100%!important;
    object-fit: contain!important;
    pointer-events: auto!important;
  }
  body dialog.artwork-lightbox .artwork-lightbox-close {
    position: static!important;
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 44px!important;
    height: 44px!important;
    font-size: 32px!important;
    line-height: 1!important;
    opacity: 1!important;
    transform: none!important;
  }
  body dialog.artwork-lightbox .artwork-lightbox-prev,body dialog.artwork-lightbox .artwork-lightbox-next {
    position: static!important;
    grid-row: 3;
    align-self: center;
    justify-self: center;
    transform: none!important;
    width: 52px!important;
    height: 52px!important;
    font-size: 32px!important;
    opacity: 1!important;
  }
  body dialog.artwork-lightbox .artwork-lightbox-prev {
    grid-column: 2;
  }
  body dialog.artwork-lightbox .artwork-lightbox-next {
    grid-column: 4;
  }
}
@media(max-width:1024px) and (orientation:landscape) {
  body dialog.artwork-lightbox,body dialog.artwork-lightbox:has(img[alt^="Collage"]) {
    padding-top: 8px!important;
    grid-template-rows: 36px minmax(0,1fr) 48px;
    gap: 4px 0;
  }
}
/* Startseite: Senkrechtstrich links vom About-Text. */
@media (min-width: 701px) {
  body.home .about::after {
    right: auto;
    left: calc(-1 * clamp(22px, 3.5vw, 60px));
  }
}

/* Portfolio collection H1: strongest native Clash Display weight. */
html body .portfolio-page .portfolio-intro h1 {
  font-weight: 700!important;
}