/* Selected work — asymmetric editorial composition, with native interface previews. */
.selected-work { position:relative; padding:82px 0 30px; background:#fff; isolation:isolate; overflow:hidden; }
.selected-work::before { content:''; position:absolute; top:80px; right:-20px; width:190px; height:300px; background-image:radial-gradient(#15223824 .8px,transparent .8px); background-size:13px 13px; mask-image:linear-gradient(90deg,transparent,#000); z-index:-1; }
.selected-work__heading { display:flex; flex-direction:column; gap:24px; margin-bottom:40px; }
.selected-work .eyebrow { font-size:.875rem; }
.selected-work h2 { font-size:clamp(2rem,3.2vw,2.8rem); line-height:1.2; letter-spacing:-.055em; font-weight:800; margin-top:19px; }
.selected-work h2>span { color:var(--color-bordeaux); }
.selected-work__intro { max-width:365px; }
.selected-work__intro>p { font-size:1.125rem; line-height:1.8; color:var(--color-muted); }
.selected-work__explore { display:inline-flex; align-items:center; gap:25px; border-bottom:1px solid #15223840; padding:0 0 8px; margin-top:22px; font-size:1rem; font-weight:500; }
.selected-work__explore .icon { width:20px; height:20px; }
.selected-work__explore:hover { color:var(--color-bordeaux); border-color:var(--color-bordeaux); }
.selected-work__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:44px; scroll-margin-top:30px; }
.selected-work__secondary { display:grid; gap:44px; min-width:0; }
.work-item { min-width:0; }
.work-item__visual { display:block; width:100%; position:relative; border:0; border-radius:16px; padding:0; overflow:hidden; cursor:pointer; text-align:left; color:inherit; font-family:var(--font-sans); isolation:isolate; }
.work-item__visual--aurea { aspect-ratio:1.08; background:#ede7df; }
.work-item__visual--forma { aspect-ratio:1.72; background:#8e9b8a; padding:42px 24px 24px; }
.work-item__visual--orizzonte { aspect-ratio:1.72; background:#d5e7e6; padding:42px 24px 24px; }
.work-item__label,.work-item__concept { position:absolute; top:19px; z-index:3; font-size:.65rem; font-weight:500; letter-spacing:.065em; }
.work-item__label { left:22px; }
.work-item__concept { right:22px; opacity:.8; }
.work-item__visual--forma>.work-item__label,.work-item__visual--forma>.work-item__concept { color:#fff; }
.work-item__open { position:absolute; bottom:20px; right:20px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--color-navy); z-index:4; box-shadow:0 4px 16px #00000015; transition:background .3s,color .3s,transform .4s var(--ease); }
.work-item__open .icon { width:22px; height:22px; }
.work-item__visual:hover .work-item__open,.work-item__visual:focus-visible .work-item__open { background:var(--color-bordeaux); color:#fff; transform:rotate(6deg); }
.work-item__caption { padding-top:21px; }
.work-item__title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.work-item h3 { font-size:1.5rem; letter-spacing:-.035em; line-height:1.2; }
.work-item h3 button { background:none; border:0; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.work-item h3 button:hover { color:var(--color-bordeaux); }
.work-item__index { font-size:1rem; color:#8a8f99; font-weight:300; }
.work-item__caption>p { font-size:1.125rem; line-height:1.7; margin-top:11px; color:var(--color-muted); max-width:53ch; }
.work-item__tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none; margin:16px 0 0; }
.work-item__tags>li { padding:6px 11px; border:1px solid #e0e3e8; border-radius:30px; color:#596373; font-size:.875rem; }
.aurea-scene { display:block; position:absolute; inset:0; overflow:hidden; container-type:inline-size; }
.aurea-scene__signature { position:absolute; left:9%; top:11%; color:#693426; font:400 clamp(44px,8vw,100px)/1 Georgia,serif; letter-spacing:-.07em; }
.aurea-scene__subtitle { position:absolute; top:27%; left:10%; font-size:1.45cqw; letter-spacing:.17em; color:#725949; }
.aurea-scene__detail { position:absolute; left:10%; bottom:7%; font-size:1.6cqw; letter-spacing:.13em; color:#725949; }
.web-preview { position:absolute; display:block; border:1px solid #ffffffb5; background:#faf7f0; overflow:hidden; box-shadow:0 28px 45px -24px #4a291d80; }
.web-preview--desktop { top:34%; left:8%; width:77%; border-radius:8px; transform:rotate(-7deg); transition:transform .7s var(--ease); }
.web-preview__chrome { height:14px; display:flex; align-items:center; gap:3px; padding:0 7px; background:#fbfaf8; border-bottom:1px solid #312c2512; }
.web-preview__chrome>i { width:3px; height:3px; background:#c8c2ba; border-radius:50%; }
.web-preview__chrome>span { margin:auto; font-size:1.1cqw; color:#9a9188; }
.web-preview__nav { display:flex; justify-content:space-between; align-items:center; height:5cqw; min-height:18px; padding:0 3%; background:#fdfaf4; color:#5d3e2f; }
.web-preview__nav>b { font-family:Georgia,serif; font-size:3cqw; font-weight:400; letter-spacing:-.05em; }
.web-preview__nav>span { font-size:.8cqw; letter-spacing:.05em; }
.web-preview__hero { display:block; position:relative; height:26cqw; }
.web-preview__hero>img { width:100%; height:100%; display:block; object-fit:cover; object-position:60% 47%; }
.web-preview__copy { position:absolute; inset:0; background:linear-gradient(90deg,#f3e7d3e0,#f3e7d300 90%); padding:4cqw; color:#573b2c; }
.web-preview__copy>small { display:block; font-size:.8cqw; letter-spacing:.13em; }
.web-preview__copy>strong { display:block; font:400 4.5cqw/1.05 Georgia,serif; letter-spacing:-.035em; margin-top:2cqw; }
.web-preview__copy>span { display:inline-block; font-size:.85cqw; border-bottom:1px solid #573b2c; padding-bottom:1cqw; margin-top:2.3cqw; }
.web-preview__below { display:flex; flex-direction:column; padding:2.4cqw 4cqw; color:#705746; min-height:9cqw; }
.web-preview__below>b { font:400 2cqw/1.2 Georgia,serif; }
.web-preview__below>span:not(.web-preview__swatches) { font-size:.8cqw; margin-top:1cqw; }
.web-preview__swatches { display:flex; gap:3px; position:absolute; right:4cqw; bottom:3cqw; }
.web-preview__swatches>i { width:1.6cqw; height:1.6cqw; border:1px solid #977456; border-radius:50%; background:#bc9871; }
.web-preview__swatches>i:nth-child(2) { background:#e3d3b7; }.web-preview__swatches>i:nth-child(3) { background:#8e6960; }
.web-preview--phone { right:8%; top:49%; width:24%; border:4px solid #f8f5ef; outline:1px solid #c6b9ad; border-radius:18px; transform:rotate(7deg); transition:transform .7s var(--ease); padding-top:12px; }
.web-preview__speaker { position:absolute; width:24%; height:3px; background:#ccc0b0; border-radius:4px; top:5px; left:38%; }
.web-preview--phone .web-preview__nav { height:5cqw; }
.web-preview--phone .web-preview__nav>b { font-size:3.3cqw; }
.web-preview--phone .web-preview__nav>span { font-size:1.4cqw; }
.web-preview--phone>img { width:100%; height:17cqw; display:block; object-fit:cover; object-position:65%; }
.web-preview__phone-copy { display:block; color:#634430; font:400 2.8cqw/1.1 Georgia,serif; padding:2cqw; }
.web-preview__phone-copy>small { font:.8cqw/1.5 var(--font-sans); display:block; border-top:1px solid #bba98f; margin-top:2cqw; padding-top:1.4cqw; }
.work-item__visual:hover .web-preview--desktop { transform:rotate(-5deg) translateY(-5px) scale(1.025); }
.work-item__visual:hover .web-preview--phone { transform:rotate(4deg) translateY(-5px); }
.forma-scene,.travel-scene { display:block; height:100%; position:relative; overflow:hidden; border-radius:4px; box-shadow:0 13px 23px #22352b30; transition:transform .7s var(--ease); container-type:inline-size; }
.forma-scene>img,.travel-scene>img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s var(--ease); }
.forma-scene::after,.travel-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(#0003,#0000 35%,#0006); }
.forma-scene__nav { position:absolute; top:8%; left:6%; right:6%; display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:1; }
.forma-scene__nav>b { font-size:3.8cqw; letter-spacing:-.04em; }
.forma-scene__nav>span { font-size:1.3cqw; letter-spacing:.04em; }
.forma-scene__copy { position:absolute; bottom:12%; left:6%; color:white; z-index:1; }
.forma-scene__copy>small { display:block; font-size:1.6cqw; letter-spacing:.12em; }
.forma-scene__copy>strong { display:block; margin-top:2cqw; font-size:6.5cqw; font-weight:400; letter-spacing:-.055em; }
.travel-scene__nav { position:absolute; top:8%; left:7%; right:7%; display:flex; justify-content:space-between; align-items:center; font-size:4cqw; font-weight:800; letter-spacing:-.04em; color:#fff; z-index:1; }
.travel-scene__nav>span { font-size:1.2cqw; letter-spacing:.08em; font-weight:400; }
.travel-scene__copy { position:absolute; top:32%; left:8%; color:#fff; z-index:1; }
.travel-scene__copy>small { display:block; font-size:1.5cqw; letter-spacing:.12em; }
.travel-scene__copy>strong { display:block; margin-top:2.2cqw; font-size:10cqw; line-height:.95; letter-spacing:-.055em; font-weight:800; }
.travel-scene__stamp { position:absolute; right:9%; bottom:13%; font-size:1.5cqw; line-height:1.5; letter-spacing:.14em; color:white; z-index:1; border-top:1px solid #fff8; padding-top:2cqw; }
.work-item__visual:hover .forma-scene,.work-item__visual:hover .travel-scene { transform:scale(1.035); }
.work-item__visual:hover .forma-scene>img,.work-item__visual:hover .travel-scene>img { transform:scale(1.025); }
.selected-work__footnote { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid #e1e5eb; margin-top:52px; color:#727987; }
.selected-work__footnote>span { font-size:.75rem; letter-spacing:.055em; }
.selected-work__footnote>p { font-size:.875rem; }

/* Concept detail sheet. Native dialog provides focus containment and Escape. */
.project-dialog { width:min(850px,calc(100% - 32px)); padding:0; border:0; border-radius:20px; max-height:88vh; max-height:88dvh; color:var(--color-navy); box-shadow:0 30px 100px #0005; }
.project-dialog::backdrop { background:#0c182dc9; backdrop-filter:blur(5px); }
.project-dialog__sheet { position:relative; }
.project-dialog__close { position:sticky; float:right; margin:14px 14px -58px 0; top:14px; z-index:2; width:44px; height:44px; border:1px solid #e0e3e8; background:#fff; color:var(--color-navy); border-radius:50%; font-size:28px; cursor:pointer; }
.project-dialog__image { display:block; width:100%; height:260px; object-fit:cover; }
.project-dialog__content { padding:28px; }
.project-dialog__content .eyebrow { font-size:.75rem; color:var(--color-bordeaux); }
.project-dialog__content h2 { font-size:2rem; margin:12px 0; letter-spacing:-.045em; }
.project-dialog__content>p:not(.eyebrow) { font-size:1.125rem; line-height:1.7; color:var(--color-muted); }
.project-dialog__details { display:grid; gap:22px; margin:28px 0; border-top:1px solid #e0e4ea; padding-top:24px; }
.project-dialog__details dt { font-size:1rem; font-weight:800; margin-bottom:8px; }
.project-dialog__details dd { margin:0; font-size:1rem; line-height:1.7; color:var(--color-muted); }
.project-dialog__content>.project-dialog__note { font-size:.875rem!important; border-radius:10px; padding:14px; background:#f2f4f7; }
html.has-project-dialog { overflow:hidden; }
@media(min-width:768px) {
  .selected-work { padding-top:100px; }
  .selected-work__heading { flex-direction:row; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:36px; }
  .selected-work__intro { max-width:330px; }
  .selected-work__grid { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; }
  .selected-work__secondary { padding-top:62px; gap:38px; }
  .work-item__visual--aurea { aspect-ratio:.83; }
  .work-item__visual--forma,.work-item__visual--orizzonte { aspect-ratio:1.35; padding:39px 17px 17px; }
  .aurea-scene__signature { top:16%; }
  .aurea-scene__subtitle { top:30%; }
  .web-preview--desktop { top:40%; }
  .web-preview--phone { top:53%; }
  .aurea-scene__detail { bottom:10%; }
  .work-item__caption>p { font-size:1rem; }
  .project-dialog__content { padding:36px; }
  .project-dialog__details { grid-template-columns:1fr 1fr; gap:28px; }
}
@media(min-width:1180px) {
  .selected-work__grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:52px; }
  .selected-work__secondary { padding-top:76px; gap:44px; }
  .work-item__visual--aurea { aspect-ratio:1.06; }
  .work-item__visual--forma,.work-item__visual--orizzonte { aspect-ratio:1.77; padding:44px 25px 25px; }
  .aurea-scene__signature { top:12%; }
  .aurea-scene__subtitle { top:28%; }
  .web-preview--desktop { top:35%; }
  .web-preview--phone { top:51%; }
  .aurea-scene__detail { bottom:7%; }
  .work-item__caption>p { font-size:1.125rem; }
  .work-item__label,.work-item__concept { font-size:.75rem; }
  .work-item__open { width:52px; height:52px; }
  .work-item h3 { font-size:1.65rem; }
}
@media(max-width:399px) { .work-item__visual--aurea { aspect-ratio:.92; } .web-preview--desktop { top:38%; } .web-preview--phone { top:53%; } .work-item__label,.work-item__concept { font-size:.55rem; } .work-item__open { width:40px; height:40px; } .work-item__visual--forma,.work-item__visual--orizzonte { aspect-ratio:1.45; padding:36px 16px 16px; } }
@media(prefers-reduced-motion:reduce) { .work-item__visual * { transition:none!important; } }