/* An image-led portfolio with asymmetric rhythm and restrained studio motion. */
.hub-intro { position: relative; isolation: isolate; }
.hub-intro > .wrap { position: relative; z-index: 1; }
.studio-ribbons { position: absolute; z-index: -1; inline-size: min(1300px, 130%); inset-inline-start: 50%; inset-block-start: 20px; transform: translateX(-50%); opacity: .22; pointer-events: none; }
[dir="rtl"] .studio-ribbons { transform: translateX(50%); }
.studio-ribbons svg { inline-size: 100%; overflow: visible; }
.ribbon-turn { transform-origin: 500px 310px; animation: ribbon-orbit 38s linear infinite; }
@keyframes ribbon-orbit { to { transform: rotate(360deg); } }
.all-work-link { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-block-size: 48px; border: 1px solid #d9be8f99; border-radius: 999px; padding: 9px 24px; margin-block: 6px 20px; font-size: 1rem; color: var(--paper); transition: background .3s, color .3s; }
.all-work-link:hover { background: var(--gold-l); color: var(--wine-deep); }
.all-work-link > span:last-child { font-family: var(--f-body); color: var(--gold-l); }
.all-work-link:hover > span:last-child { color: inherit; }

.hub-nav-slot { min-block-size: 80px; }
.hub-nav { position: relative; top: auto; }
.hub-nav.is-docked {
  position: fixed; inset-block-start: auto; inset-block-end: max(20px, env(safe-area-inset-bottom));
  inset-inline: 0; margin-inline: auto; inline-size: min(820px, calc(100% - 160px));
  padding: 5px; border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(#faf8f4ed, #faf8f4ed) padding-box, linear-gradient(115deg, #8b4258, #d9be8f, #984965) border-box;
  box-shadow: 0 12px 50px #160c1640; animation: dock-arrive .45s var(--ease) both;
}
.hub-nav.is-docked a { min-block-size: 46px; border-radius: 999px; padding-inline: 13px; }
@keyframes dock-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hub-chapter, .hub-chapter [id] { scroll-margin-top: 22px; }

#work.portfolio-showcase { --portfolio-ink: #f8f0e5; background: #22171c; color: var(--portfolio-ink); padding: 0; overflow: clip; }
#work.portfolio-showcase .hwork__head { align-items: center; padding-block: 45px 28px; margin-block-end: 30px; }
#work.portfolio-showcase .hwork__head .h2 { font-size: clamp(2rem, 4.5vw, 4.4rem); max-inline-size: 12ch; }
#work.portfolio-showcase .hwork__head em { color: var(--gold-l); }
#work.portfolio-showcase .hwork__head .label { color: var(--gold-l); }
#work.portfolio-showcase .hwork__meta { max-inline-size: 470px; flex-direction: column; align-items: flex-start; gap: 22px; }
#work.portfolio-showcase .hwork__meta .sec__sub { color: #d2bcc4; font-size: 1rem; }
.portfolio-total { display: flex; align-items: center; gap: 20px; color: var(--gold-l); font-size: 1rem; }
.portfolio-total strong { font: 400 clamp(3rem, 6vw, 6rem)/1 var(--f-lat); letter-spacing: -.05em; }
.portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(60px, 8vw, 120px) clamp(22px, 3vw, 48px); align-items: start; }
.project-card { grid-column: span 7; min-inline-size: 0; }
.project-card:nth-child(4n+2), .project-card:nth-child(4n+3) { grid-column: span 5; }
.project-card:nth-child(even) { padding-block-start: clamp(44px, 6vw, 100px); }
.project-cover { display: block; position: relative; inline-size: 100%; padding: 0; text-align: start; border-radius: 3px; }
.project-picture { display: block; block-size: clamp(320px, 39vw, 575px); background: var(--project-tone); overflow: hidden; position: relative; isolation: isolate; transition: border-radius .65s var(--ease), box-shadow .65s var(--ease); }
.project-picture::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #ffffff38, transparent 75%); pointer-events: none; z-index: 1; }
.project-image { inline-size: 100%; block-size: 100%; object-fit: contain; padding: clamp(18px, 2.5vw, 38px); transform: translate3d(0, var(--image-parallax, 0px), 0) scale(1); transition: transform .85s var(--ease); }
.project-picture--contain .project-image { filter: drop-shadow(0 16px 20px #100d1738); }
.project-picture--cover .project-image { object-fit: cover; padding: 0; transform: translate3d(0, var(--image-parallax, 0px), 0) scale(1.1); }
.project-corner { position: absolute; inset-block-start: 15px; inset-inline-end: 15px; inline-size: 44px; block-size: 44px; display: grid; place-items: center; background: #faf8f4f2; color: var(--wine-deep); border-radius: 50%; font: 400 1.45rem/1 system-ui; z-index: 2; transition: transform .45s var(--ease); }
.project-open { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 15px; background: #f8f0e5; color: var(--wine-deep); font-size: .9rem; }
.project-open > span:last-child { opacity: .65; }
.project-meta { display: flex; gap: 18px; align-items: baseline; padding-block-start: 20px; }
.project-number { color: var(--gold-l); font: 400 1rem var(--f-body); flex: none; }
.project-meta h3 { font: 400 clamp(1.35rem, 2vw, 2rem)/1.3 "Jost", var(--f-body); overflow-wrap: anywhere; }
.project-meta p { color: #cbb9c0; font-size: 1rem; margin-block-start: 7px; }
.project-cover:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 7px; }
.portfolio-ready .project-card { opacity: 0; transform: translateY(65px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--project-order) * .1s); }
.portfolio-ready .project-picture { clip-path: inset(12% 0 0 0); transition: clip-path 1.2s var(--ease), border-radius .65s var(--ease), box-shadow .65s var(--ease); }
.portfolio-ready .project-card.is-visible { opacity: 1; transform: none; }
.portfolio-ready .project-card.is-visible .project-picture { clip-path: inset(0); }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .project-cover:hover .project-picture { border-radius: 25px 3px 25px 3px; box-shadow: 0 20px 60px #0004; }
  .project-cover:hover .project-image { transform: translate3d(var(--hover-x,0px), var(--hover-y,0px), 0) scale(1.045); }
  .project-cover:hover .project-picture--cover .project-image { transform: translate3d(var(--hover-x,0px), var(--hover-y,0px), 0) scale(1.15); }
  .project-cover:hover .project-corner { transform: rotate(45deg); }
  .portfolio-pointer .project-cover, .portfolio-pointer .project-cover * { cursor: none; }
}
.color-flow { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 440; pointer-events: none; display: none; opacity: 0; transition: opacity .18s; contain: strict; }
.color-flow.is-active { opacity: 1; }
.cursor { display: none !important; }
.portfolio-cursor { position: fixed; inset: 0 auto auto 0; z-index: 490; inline-size: 96px; block-size: 96px; pointer-events: none; display: none; transform: translate3d(-200px,-200px,0); }
.portfolio-cursor > span { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; padding-block-end: 14px; color: #fff8f0; background: radial-gradient(ellipse at 15% 15%, #ab82c7b5, transparent 65%), radial-gradient(ellipse at 90% 85%, #d0a169ad, transparent 65%), linear-gradient(135deg,#573457c9,#93465cc9); backdrop-filter: blur(7px); font: 500 .88rem/1.4 var(--f-body); box-shadow: 0 0 0 1px #fff8, 0 8px 28px #391e4433; transform: scale(.35); opacity: 0; transition: transform .35s var(--ease), opacity .2s; }
.portfolio-cursor i { position: absolute; inset-inline: 0; inset-block-end: 18px; text-align: center; font: normal 1.2rem/1 system-ui; opacity: 0; transition: opacity .2s; color: #fff8f0; }
.portfolio-cursor.is-active > span { transform: scale(1); opacity: 1; }
.portfolio-cursor.is-active i { opacity: 1; }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .color-flow { display: block; }
  .portfolio-pointer .portfolio-cursor { display: block; }
  .portfolio-hover .cursor { visibility: hidden; }
}
.project-archive { margin-block-start: 75px; border-block-start: 1px solid #d9be8f44; }
.project-archive > summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; padding-block: 26px; color: var(--gold-l); font-size: 1.1rem; list-style: none; }
.project-archive > summary::-webkit-details-marker { display: none; }
.project-archive > summary > span:last-child { font: 300 2rem/1 system-ui; transition: transform .3s; }
.project-archive[open] > summary > span:last-child { transform: rotate(45deg); }
.project-archive .hwork__view { color: var(--ink); padding-block: 20px 45px; }
.project-archive .panel--navy { color: #eef0f6; }
.project-archive .panel--cta { color: var(--portfolio-ink); border-color: #d9be8f66; }
.project-archive .panel--cta em { color: var(--gold-l); }
.project-archive .panel--cta .btn { background: var(--gold-l); color: var(--wine-deep); }
.art-dialog { transform-origin: center; }
.art-step:disabled { opacity: .28; cursor: default; }
.art-dialog[open] { animation: art-arrive .35s var(--ease) both; }
@keyframes art-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hub-nav.is-docked { inline-size: min(720px, calc(100% - 32px)); }
  .portfolio-grid { gap: 50px 24px; }
  .project-picture { block-size: 370px; }
  .project-meta { gap: 12px; }
  #work.portfolio-showcase .hwork__head { padding-block-start: 12px; }
}
@media (max-width: 640px) {
  .studio-ribbons { inline-size: 950px; inset-block-start: 90px; opacity: .17; }
  .hub-nav-slot { min-block-size: 109px; }
  .hub-nav.is-docked { inline-size: calc(100% - 24px); inset-block-end: max(10px, env(safe-area-inset-bottom)); border-radius: 23px; gap: 2px; }
  .hub-nav.is-docked a { border-radius: 18px; font-size: .85rem; min-block-size: 44px; }
  .hub-nav.is-docked b { font-size: 1rem; }
  .portfolio-grid { grid-template-columns: minmax(0,1fr); gap: 45px; }
  .project-card, .project-card:nth-child(n) { grid-column: 1; padding-block-start: 0; }
  .project-picture { block-size: auto; aspect-ratio: 4 / 4.7; }
  .project-picture--cover { aspect-ratio: 1; }
  .project-image { padding: 20px; }
  .project-picture--cover .project-image { padding: 0; }
  .project-meta h3 { font-size: 1.45rem; }
  .project-meta p { font-size: .95rem; }
  #work.portfolio-showcase .hwork__head { gap: 24px; padding-block: 10px; }
  #work.portfolio-showcase .hwork__head .h2 { max-inline-size: none; }
  #work.portfolio-showcase .hwork__meta { gap: 14px; }
  .portfolio-total strong { font-size: 3.5rem; }
  .portfolio-total { gap: 15px; }
  .project-archive > summary { font-size: 1rem; }
  .has-project-dock .fab { inset-block-end: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-turn { animation: none; }
  .portfolio-ready .project-card { opacity: 1; transform: none; transition: none; }
  .portfolio-ready .project-picture { clip-path: none; transition: none; }
  .project-image, .project-cover:hover .project-image, .project-cover:hover .project-picture--cover .project-image { transform: none; transition: none; }
  .portfolio-cursor, .color-flow { display: none !important; }
  .portfolio-pointer .project-cover, .portfolio-pointer .project-cover * { cursor: pointer; }
  .hub-nav.is-docked, .art-dialog[open] { animation: none; }
}