html{scroll-behavior:smooth}.style-main{max-width:1280px}.style-intro{display:grid;grid-template-columns:1.35fr .65fr;align-items:end;gap:40px;padding:100px 0 70px}.style-intro .label{grid-column:1/-1;margin:0}.style-intro h1{font-size:clamp(42px,6vw,78px);letter-spacing:-2px}.style-intro>div{max-width:370px;padding-bottom:5px;color:#596451}.style-intro a{display:inline-block;margin-top:22px;border-bottom:1px solid #87704c}.style-note{display:flex;justify-content:space-between;gap:25px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:#625b4c}.style-note strong{font:22px Georgia,serif;color:#283c2e;white-space:nowrap}
.look{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;min-height:680px;margin:70px 0;overflow:hidden;background:#b4aa95}.look-image{position:absolute;inset:0;z-index:-2}.look-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.look::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 30%,rgba(22,31,23,.05) 48%,rgba(22,31,23,.54) 100%);pointer-events:none}.look-details{width:min(43%,490px);padding:38px 40px;margin:30px 35px;color:#fff9ec;background:rgba(31,41,31,.67);border:1px solid rgba(255,249,236,.35);box-shadow:0 20px 55px rgba(16,23,17,.16)}.look-details .label{color:#e8d9b9}.look-details h2{font-size:clamp(34px,4vw,54px);line-height:1.05;margin:18px 0 20px;color:#fff9ec}.look-details>p:not(.label){color:#f5ead5}.look-details h3{font:24px Georgia,serif;font-weight:400;margin:28px 0 12px;color:#fff9ec}.look-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid rgba(255,249,236,.3)}.look-item label{font-size:13px;color:#fff9ec}.look-item select{min-width:118px;max-width:155px;border:1px solid rgba(255,249,236,.72);border-radius:0;background:#fff9ec;color:#283c2e;padding:10px 30px 10px 11px;font:13px Arial,sans-serif;cursor:pointer}.look button{margin-top:25px;background:#e8d8ba;border:1px solid #e8d8ba;color:#26382b;padding:15px 22px;font:13px Arial,sans-serif;cursor:pointer}.look button:hover{background:#fff5df}.look button:focus-visible,.look select:focus-visible{outline:2px solid #fff9ec;outline-offset:3px}.form-message{min-height:25px;margin-top:12px;font-size:12px;color:#fff9ec}.form-message a{text-decoration:underline}.demo-explanation{font-size:12px;color:#726d5f;max-width:700px;margin:35px 0}.style-main .return{margin-bottom:10px}
@media(max-width:700px){header{flex-wrap:wrap}header nav{width:100%;justify-content:space-between;gap:7px}header nav a{white-space:nowrap;font-size:10px}.style-intro{grid-template-columns:1fr;gap:20px;padding:55px 0 35px}.style-intro .label{grid-column:auto}.style-intro h1{font-size:42px}.style-note{display:block}.style-note span{display:block;margin-top:8px}.look{min-height:820px;align-items:flex-end;margin:38px 0}.look-image img{object-position:21% center}.look::after{background:linear-gradient(180deg,transparent 18%,rgba(22,31,23,.12) 38%,rgba(22,31,23,.83) 100%)}.look-details{width:100%;margin:0;padding:25px 22px 20px;background:rgba(31,41,31,.72);border:0;border-top:1px solid rgba(255,249,236,.35)}.look-details h2{font-size:38px}.look-details h3{margin-top:20px}.look-item{padding:9px 0}.look button{margin-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The photographs extend to the edges while the rest of the page keeps its measure. */
#looks{position:relative;width:100vw;left:50%;margin-left:-50vw}
.look{width:100%;overflow:visible}
.look-image,.look::after{overflow:hidden}
.look-details{position:relative;margin-right:clamp(24px,7vw,120px)}
.look-item-name{font-size:13px;color:#fff9ec}
.size-menu{position:relative;width:120px;z-index:2}
.size-menu[open]{z-index:5}
.size-menu summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 13px;border:1px solid rgba(238,225,202,.65);background:rgba(248,242,229,.09);color:#fff9ec;font:13px Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.size-menu summary::-webkit-details-marker{display:none}
.size-menu summary::after{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.size-menu[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.size-menu summary:hover,.size-menu[open] summary{background:rgba(248,242,229,.17);border-color:#f0e2c9}
.size-menu summary:focus-visible,.size-options input:focus-visible+span{outline:2px solid #f4e6cb;outline-offset:3px}
.size-options{position:absolute;right:0;bottom:calc(100% + 5px);width:100%;padding:5px;background:#f0e6d4;border:1px solid #c4b395;box-shadow:0 9px 24px rgba(12,20,14,.28);color:#273c2e}
.size-options label{display:block;cursor:pointer}
.size-options input{position:absolute;opacity:0;width:1px;height:1px}
.size-options label span{display:block;padding:9px 11px;color:#273c2e;font:13px Arial,sans-serif;transition:background .15s}
.size-options label:hover span,.size-options input:checked+span{background:#d6c8ad;color:#203428}
@media(max-width:700px){.look-details{margin-right:0}.size-menu{width:112px}.look{overflow:visible}}

/* Show the complete editorial photographs at every viewport width. */
.look{min-height:0;aspect-ratio:1672/941}.look-image picture,.look-image img{display:block;width:100%;height:100%}.look-image img{object-fit:contain}
@media(max-width:700px){.look{display:block;aspect-ratio:auto;min-height:0}.look-image{position:relative;inset:auto}.look-image picture,.look-image img{height:auto}.look-image img{object-fit:contain}.look::after{display:none}.look-details{position:relative;box-sizing:border-box;width:100%;background:#27372d}}

/* Brand signature in the quiet strip between the two looks. */
#looks .look{margin-bottom:0}
.look-brand{height:96px;display:flex;align-items:center;justify-content:center;gap:10px;background:#e9e2d3}
.look-brand img{display:block;object-fit:contain}
.look-brand .look-brand-emblem{width:86px;height:86px}
.look-brand .look-brand-wordmark{width:clamp(190px,24vw,300px);height:86px}
#looks .look-brand+.look{margin-top:0}
@media(max-width:700px){.look-brand{height:76px;gap:5px}.look-brand .look-brand-emblem{width:68px;height:68px}.look-brand .look-brand-wordmark{width:190px;height:68px}}