@font-face{font-family:Onest;src:url('fonts/onest.ttf') format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:Cormorant;src:url('fonts/cormorantgaramond.ttf') format('truetype');font-weight:300 700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Onest,sans-serif;background:#f3f5f8;color:#20334d;line-height:1.6;font-synthesis:none}a{color:inherit;text-underline-offset:4px}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #2351c4;outline-offset:5px}.skip-link{position:fixed;left:15px;top:-100px;padding:12px;background:white;z-index:30}.skip-link:focus{top:10px}.gallery-header,main,.gallery-footer{max-width:1400px;margin-inline:auto;width:calc(100% - 100px)}.gallery-header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ced6e0}.gallery-brand{font-size:19px;display:flex;gap:10px;align-items:center;text-decoration:none;letter-spacing:-.6px}.gallery-brand span{font-family:Cormorant;font-style:italic;font-size:45px;line-height:1;color:#355889}.gallery-header>span{font-size:12px;color:#56677b}.gallery-header>a:last-child{font-size:12px}.gallery-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;padding-block:75px 55px;align-items:end}.intro-caption{font-size:12px;margin:0 0 25px;color:#53657b}h1{font-family:Cormorant,serif;font-size:clamp(56px,6.6vw,96px);font-weight:450;line-height:.98;letter-spacing:-.04em;margin:0}.intro-side{padding-bottom:4px}.intro-side>p:first-child{font-size:19px;line-height:1.6;margin-top:0}.intro-detail{font-size:13px;color:#53657b;max-width:440px}.compare-trigger{background:#20334d;color:#fff;border:0;padding:15px 24px;border-radius:6px;font-size:13px;margin-top:15px}.compare-trigger:hover{background:#334f73}.gallery-note{display:flex;align-items:flex-start;gap:12px;background:#e4ebf3;padding:18px 22px;border-radius:7px;font-size:11px;color:#4b607b;margin-bottom:45px}.gallery-note p{margin:0;max-width:1050px}.note-dot{height:6px;width:6px;border-radius:50%;background:#466a97;margin-top:6px;flex-shrink:0}.concepts{display:grid;grid-template-columns:1fr 1fr;gap:40px 30px}.concept-card{background:#fff;border:1px solid #d7dee7;border-radius:11px;overflow:hidden}.preview-link{display:block;text-decoration:none;position:relative;background:#e2e8f0;overflow:hidden}.preview-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:10px;background:#e4eaf2;color:#4b607b}.preview-link img{width:100%;height:auto;display:block;aspect-ratio:1.44;object-fit:cover;object-position:top}.open-preview{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;padding:12px 18px;border-radius:30px;background:#20334df2;color:white;opacity:0;transition:opacity .2s}.preview-link:hover .open-preview,.preview-link:focus-visible .open-preview{opacity:1}.concept-description{padding:25px 27px 24px}.concept-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.concept-title h2{font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.6px;margin:0}.favorite{background:none;border:1px solid #d6dfe9;border-radius:50%;min-width:38px;height:38px;font-size:24px;line-height:1;display:grid;place-items:center;font-family:Arial,sans-serif}.favorite[aria-pressed=true]{color:#325b91;background:#e4edf8;border-color:#b9cee6}.concept-description p{font-size:13px;line-height:1.75;color:#53657b;margin:17px 0}.concept-description .concept-detail{font-size:11px;color:#64768c;min-height:39px}.concept-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #e3e8ee;padding-top:20px;margin-top:22px}.palette{display:flex;gap:6px}.palette span{width:17px;height:17px;background:var(--swatch);border-radius:50%;border:1px solid #20334d20}.preview-links{display:flex;gap:16px;font-size:10px}.concept-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.concept-card:last-child .concept-description{padding:38px;display:flex;flex-direction:column;justify-content:center}.concept-card:last-child .concept-title h2{font-size:29px}.concept-card:last-child .concept-description>p{font-size:16px}.concept-card:last-child .concept-description>.concept-detail{font-size:13px}.selection-guide{padding-block:85px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.selection-guide h2{font-family:Cormorant;font-size:57px;line-height:1.1;font-weight:450;letter-spacing:-2px;margin:0 0 20px}.selection-guide p{font-size:13px;color:#53657b;max-width:370px}.selection-guide ol{margin:0;padding-left:25px;display:grid;gap:23px}.selection-guide li{padding-left:15px}.selection-guide li strong{display:block;font-size:16px;font-weight:500}.selection-guide li span{display:block;font-size:12px;color:#53657b;margin-top:8px}.gallery-footer{border-top:1px solid #ced6e0;display:flex;justify-content:space-between;gap:40px;padding-block:25px 35px;font-size:10px;color:#53657b}.gallery-footer p{margin:0;max-width:760px}.gallery-footer a{white-space:nowrap}.comparison-open{overflow:hidden}dialog{width:min(1380px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:28px;border:1px solid #bfcddd;background:#f3f5f8;color:#20334d;border-radius:12px;box-shadow:0 20px 90px #20334d50;overflow:auto}dialog::backdrop{background:#142a4199;backdrop-filter:blur(5px)}dialog>header{display:flex;justify-content:space-between;gap:25px;align-items:flex-start}dialog h2{font-size:24px;font-weight:500;margin:0;outline:none}dialog header p{font-size:11px;color:#53657b;margin:7px 0 15px}#compare-close{background:none;border:1px solid #cad4e0;width:40px;min-width:40px;height:40px;border-radius:50%;font-size:27px;font-weight:300}.compare-mode{display:flex;gap:5px;margin-block:5px 20px}.compare-mode button{font-size:11px;border:1px solid #ced7e3;padding:9px 16px;border-radius:5px;background:none}.compare-mode button[aria-pressed=true]{background:#20334d;color:white;border-color:#20334d}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.compare-column{min-width:0}.compare-column label{font-size:11px;display:block;margin-bottom:5px}.compare-column select{width:100%;padding:10px;border:1px solid #c3cfde;background:white;border-radius:5px;font-size:12px;margin-bottom:15px}.compare-image{background:#dce4ef;border-radius:5px;overflow:hidden;height:auto}.compare-image img{width:100%;height:auto;display:block}.compare-column>a{display:inline-block;margin-top:15px;font-size:12px}dialog[data-mode=mobile] .compare-image{height:560px;overflow:auto;max-width:340px;margin-inline:auto}dialog[data-mode=mobile] .compare-image img{width:100%;height:auto}.compare-column>a{display:inline-block}.compare-column>select:focus{outline-offset:1px}
@media(max-width:900px){.gallery-header,main,.gallery-footer{width:calc(100% - 48px)}.gallery-intro{gap:40px;grid-template-columns:1.1fr 1fr;padding-top:60px}h1{font-size:68px}.intro-side>p:first-child{font-size:16px}.intro-detail{font-size:12px}.concepts{gap:25px 20px}.concept-description{padding:20px}.concept-title h2{font-size:18px}.concept-description p{font-size:12px}.concept-description .concept-detail{font-size:10px}.concept-bottom{gap:15px;flex-wrap:wrap}.concept-card:last-child .concept-description{padding:25px}.concept-card:last-child .concept-title h2{font-size:24px}.concept-card:last-child .concept-description>p{font-size:14px}.concept-card:last-child .concept-description>.concept-detail{font-size:11px}.selection-guide{gap:45px}.selection-guide h2{font-size:50px}}
@media(max-width:600px){.gallery-header,main,.gallery-footer{width:calc(100% - 32px)}.gallery-header{height:76px;gap:15px}.gallery-header>span{display:none}.gallery-header>a:last-child{font-size:10px}.gallery-brand{font-size:16px}.gallery-brand span{font-size:36px}.gallery-intro{grid-template-columns:1fr;padding-block:45px 30px;gap:30px}h1{font-size:65px}.intro-caption{font-size:10px;margin-bottom:20px}.intro-side>p:first-child{font-size:16px}.intro-detail{font-size:12px}.compare-trigger{width:100%;font-size:12px}.gallery-note{padding:16px;font-size:10px;gap:10px;margin-bottom:30px}.concepts{grid-template-columns:1fr;gap:25px}.preview-top{font-size:9px;padding:10px 14px}.concept-title h2{font-size:20px}.concept-description{padding:20px}.concept-description p{font-size:12px}.concept-description .concept-detail{font-size:11px;min-height:0}.concept-bottom{gap:15px;flex-wrap:nowrap}.preview-links{gap:12px;font-size:9px}.palette{gap:4px}.palette span{width:15px;height:15px}.concept-card:last-child{display:block}.concept-card:last-child .concept-description{padding:20px}.concept-card:last-child .concept-title h2{font-size:20px}.concept-card:last-child .concept-description>p{font-size:12px}.concept-card:last-child .concept-description>.concept-detail{font-size:11px}.selection-guide{grid-template-columns:1fr;padding-block:55px;gap:25px}.selection-guide h2{font-size:49px}.selection-guide ol{gap:20px}.selection-guide li strong{font-size:15px}.selection-guide li span{font-size:11px}.gallery-footer{flex-direction:column;gap:15px;font-size:9px}.gallery-footer a{font-size:11px}dialog{width:calc(100% - 16px);max-height:calc(100dvh - 20px);padding:18px}dialog h2{font-size:19px}dialog header p{font-size:10px}.compare-grid{gap:12px}.compare-column select{font-size:10px;padding:9px 4px}.compare-column>a{font-size:10px}.compare-column label{font-size:10px}dialog[data-mode=mobile] .compare-image{height:390px}.compare-mode button{font-size:10px}.open-preview{display:none}}
@media(max-width:360px){h1{font-size:57px}.concept-bottom{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}