/* Original projects: editorial portfolio, film and image viewer. */
.hero-video {
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  object-position:center;pointer-events:none;
}
.hero-video.has-error {opacity:0}
.hero-image {object-position:center;animation:none}
.hero-shade {background:linear-gradient(90deg,rgba(12,15,12,.82),rgba(12,15,12,.48) 38%,rgba(12,15,12,.08) 75%),linear-gradient(0deg,rgba(12,15,12,.78),transparent 32%,transparent 72%,rgba(12,15,12,.3))}
.hero-film {display:flex;gap:35px;align-items:center}
.video-toggle {display:flex;gap:9px;align-items:center;padding:9px 0;color:var(--cream);font-size:9px;letter-spacing:.03em;min-height:44px}
.video-toggle[hidden] {display:none}
.video-toggle>svg {width:30px;height:30px;border:1px solid #eee7dc65;border-radius:50%;padding:6px}
.video-toggle .video-pause-icon {display:none}
.video-toggle.is-playing .video-pause-icon {display:block}
.video-toggle.is-playing .video-play-icon {display:none}
.hero-project {font-family:var(--serif);font-size:25px;line-height:1.2;text-align:right;padding:0 0 0 28px;border-left:1px solid #eee7dc45}
.hero-project>span {display:block;font-family:var(--sans);font-size:7px;letter-spacing:.16em;margin-bottom:8px}
.hero-project .arrow-icon {width:16px;height:16px;margin-left:12px;color:var(--accent)}
.hero-project:hover {color:var(--accent)}

.project-toolbar {border-bottom:1px solid var(--line);margin-bottom:30px;padding-bottom:17px}
.filters {flex-wrap:wrap;gap:12px 22px}
.project-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 30px}
.project-featured {grid-column:1/-1}
.project-image-wrap {aspect-ratio:1.5;isolation:isolate}
.project-featured .project-image-wrap {aspect-ratio:2.12}
.projects .project-card img {object-position:center;filter:brightness(.94)}
.project-image-wrap:after {background:linear-gradient(180deg,#14151042,transparent 22%,transparent 68%,#14151070)}
.project-invitation {position:absolute;left:25px;bottom:24px;display:flex;align-items:center;gap:18px;color:#fff;font-size:8px;letter-spacing:.16em;z-index:1;opacity:0;transform:translateY(7px);transition:opacity .45s,transform .65s var(--ease)}
.project-invitation .arrow-icon {width:18px;height:18px}
.project-open:hover .project-invitation,.project-open:focus-visible .project-invitation {opacity:1;transform:none}
.project-open:hover img {transform:scale(1.035)}
.project-caption {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.project-meta {margin:0;font-size:8px;letter-spacing:.18em}
.project-name {font-size:clamp(30px,3vw,45px);margin-top:8px;line-height:1.12}
.project-featured .project-name {font-size:clamp(40px,4vw,60px)}
.project-caption-arrow {display:grid;place-items:center;width:45px;height:45px;border:1px solid var(--line);border-radius:50%;flex-shrink:0;transition:background .35s,color .35s,border-color .35s}
.project-caption-arrow .arrow-icon {width:18px;height:18px;transition:transform .45s var(--ease)}
.project-open:hover .project-caption-arrow {background:var(--accent);color:var(--bg);border-color:var(--accent)}
.project-open:hover .project-caption-arrow .arrow-icon {transform:rotate(45deg)}
.project-subtitle {display:block;font-size:11px;color:var(--muted);line-height:1.8;margin-top:11px}
.portfolio-end {display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);margin-top:50px;padding-top:25px}
.portfolio-end>span {font-size:8px;letter-spacing:.15em;color:var(--muted)}
.portfolio-end .arrow-icon {width:16px;height:16px}
.steel-image img {object-position:68% center}

.project-dialog {width:calc(100% - 56px);max-width:1480px;height:min(940px,94svh);max-height:94svh;overflow:hidden;border:1px solid var(--line);background:#1b1a17;padding:0;color:var(--cream)}
.project-dialog[open] {display:flex;flex-direction:column;animation:dialog-in .5s var(--ease)}
.project-dialog::backdrop {background:#090b09e8;backdrop-filter:blur(12px)}
.gallery-header {display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 32px 23px;border-bottom:1px solid var(--line);flex-shrink:0}
.gallery-header .eyebrow {font-size:8px;letter-spacing:.15em;color:var(--muted)}
.gallery-header .eyebrow>span {color:var(--accent)}
.gallery-header h2 {font-size:42px;line-height:1.1;margin-top:9px}
.gallery-header .dialog-close {position:static;display:flex;align-items:center;justify-content:center;gap:12px;width:auto;min-width:44px;height:44px;padding:0 0 0 12px;border:0;background:none;flex-shrink:0}
.dialog-close svg {width:23px;height:23px;transition:transform .4s var(--ease)}
.dialog-close:hover svg {transform:rotate(90deg)}
.dialog-close>span {font-size:8px;letter-spacing:.17em}
.gallery-layout {display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:0;flex:1}
.gallery-main {min-width:0;min-height:0;display:flex;flex-direction:column;padding:24px;background:#141411}
.gallery-stage {position:relative;display:grid;place-items:center;flex:1;min-height:200px;overflow:hidden;isolation:isolate;touch-action:pan-y}
#dialog-image {display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain;transition:opacity .3s;user-select:none}
#dialog-image:not([src]) {visibility:hidden}
#dialog-image.is-entering {animation:gallery-image-in .5s var(--ease)}
.gallery-stage.is-loading #dialog-image {opacity:.5}
.gallery-loading {position:absolute;inset:50% auto auto 50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid #d6bc9540;border-top-color:var(--accent);border-radius:50%;opacity:0;pointer-events:none}
.is-loading .gallery-loading {opacity:1;animation:gallery-spin 1s linear infinite}
.gallery-arrow {position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:43px;height:43px;background:#181914ba;border:1px solid #eee7dc60;border-radius:50%;z-index:2;color:#fff;transition:background .3s,color .3s}
.gallery-arrow:hover {background:var(--accent);color:var(--bg)}
.gallery-arrow .arrow-icon {width:20px;height:20px}
.gallery-previous {left:12px}.gallery-next {right:12px}
.gallery-image-meta {display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:16px;flex-shrink:0;min-height:36px}
#image-caption {font-size:10px;color:var(--muted);line-height:1.6}
#image-counter {font-size:10px;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.gallery-aside {padding:28px 25px;overflow-y:auto;border-left:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#766950 transparent}
#dialog-category {color:var(--accent);font-size:8px;margin-bottom:18px}
#dialog-description {font-size:12px;color:var(--muted);line-height:1.9}
.gallery-selection {display:flex;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:.13em;margin-block:28px 14px;color:var(--muted)}
.gallery-thumbnails {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery-thumbnail {padding:3px;border:1px solid transparent;opacity:.55;transition:opacity .3s,border-color .3s;min-width:0}
.gallery-thumbnail img {aspect-ratio:1.25;object-fit:cover;width:100%;height:auto}
.gallery-thumbnail[aria-current=true] {opacity:1;border-color:var(--accent)}
.gallery-thumbnail:hover,.gallery-thumbnail:focus-visible {opacity:1}
.gallery-hint {font-size:9px;color:var(--muted);margin-top:15px;line-height:1.7}
.gallery-contact {font-size:10px;gap:15px;margin-top:30px;line-height:1.8}
.gallery-contact .arrow-icon {width:16px;height:16px;flex-shrink:0}
.gallery-footer {padding:17px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);flex-shrink:0}
.gallery-footer .text-link {font-size:10px;gap:12px;border:0;padding:9px 0}
.gallery-footer .arrow-icon {width:17px;height:17px}
#dialog-counter {font-size:8px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.gallery-error {position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#141411;gap:15px;padding:55px;text-align:center;font-size:12px}
.gallery-error[hidden] {display:none}
@keyframes gallery-image-in {from{opacity:.3;transform:scale(1.008)}to{opacity:1;transform:scale(1)}}
@keyframes gallery-spin {to{transform:rotate(360deg)}}
@media(hover:none) {.project-invitation{opacity:1;transform:none}}
@media(max-width:1100px) {
  .gallery-layout{grid-template-columns:minmax(0,1fr) 270px}
  .gallery-main{padding:18px}.gallery-aside{padding:23px 20px}
  .gallery-header{padding:22px 24px}.gallery-footer{padding:15px 24px}
}
@media(max-width:800px) {
  .project-grid{gap:36px 22px}.project-featured .project-image-wrap{aspect-ratio:1.6}
  .project-image-wrap{aspect-ratio:1.25}.project-name{font-size:32px}
  .project-invitation{left:17px;bottom:18px}.project-subtitle{font-size:10px}
  .hero-video{object-position:62% center}.hero-image{object-position:62% center}
  .hero-film{gap:22px}.hero-project{padding-left:22px}
  .gallery-layout{display:flex;flex-direction:column;overflow:auto}
  .gallery-main{flex:none;padding:16px 18px 18px}
  .gallery-stage{height:45svh;min-height:240px;flex:none}
  .gallery-aside{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:22px 24px}
  .gallery-thumbnails{display:flex;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#766950 transparent}
  .gallery-thumbnail{flex:0 0 88px}.gallery-selection{margin-top:22px}
  .gallery-hint{margin-top:8px}.gallery-contact{margin-top:20px}
  #dialog-description{max-width:600px}
  .gallery-header h2{font-size:38px}
}
@media(max-width:580px) {
  .hero-bottom .scroll-cue{display:none}.hero-film{width:100%;justify-content:space-between;gap:15px}
  .hero-project{font-size:24px;padding-left:20px}.hero-project>span{font-size:6px}
  .video-toggle{font-size:8px}.video-toggle>svg{width:32px;height:32px}
  .hero-shade{background:linear-gradient(90deg,#0c0f0cc9,#0c0f0c69 75%),linear-gradient(0deg,#0c0f0cc9,transparent 45%,#0c0f0c15 75%,#0c0f0c40)}
  .project-toolbar{margin-bottom:24px}.project-grid{grid-template-columns:1fr;gap:34px}
  .project-featured{grid-column:auto}.project-featured .project-image-wrap,.project-image-wrap{aspect-ratio:1.15}
  .project-caption{margin-top:17px;gap:15px}.project-featured .project-name,.project-name{font-size:35px;line-height:1.15}
  .project-caption-arrow{width:38px;height:38px}.project-caption-arrow .arrow-icon{width:16px;height:16px}
  .project-meta{font-size:7px}
  .project-subtitle{font-size:11px;margin-top:9px}.project-invitation{font-size:7px}
  .portfolio-end{align-items:flex-start;flex-direction:column;gap:15px;margin-top:34px;padding-top:24px}
  .portfolio-end>span{font-size:7px}.portfolio-end .text-link{font-size:11px}
  .project-dialog{width:100%;max-width:none;height:100svh;max-height:100svh;margin:0;border:0}
  .gallery-header{padding:20px 20px 17px;gap:15px}.gallery-header .eyebrow{font-size:7px;gap:9px}
  .gallery-header h2{font-size:34px;margin-top:8px}.dialog-close>span{display:none}
  .gallery-header .dialog-close{padding:0}.gallery-main{padding:12px 12px 17px}
  .gallery-stage{height:41svh;min-height:235px}.gallery-arrow{width:38px;height:38px}
  .gallery-previous{left:5px}.gallery-next{right:5px}.gallery-arrow .arrow-icon{width:18px;height:18px}
  .gallery-image-meta{gap:12px;padding-inline:7px}#image-caption{font-size:9px}
  #image-counter{font-size:9px}.gallery-aside{padding:22px 20px 27px}
  .gallery-footer{padding:10px 20px calc(10px + env(safe-area-inset-bottom));gap:12px}
  .gallery-footer .text-link{font-size:9px;gap:7px;min-height:44px}
  #dialog-counter{font-size:7px;letter-spacing:0}.gallery-footer .arrow-icon{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-video,.project-invitation,#dialog-image{transition:none}
  #dialog-image.is-entering,.project-dialog[open],.gallery-loading{animation:none}
}