/* Four real HTML page designs, each with its own composition and generated photo. */
#website-color-showcase .color-site {
--color-design-ready:1; position:relative; width:100%; aspect-ratio:1047 / 1503;
container-type:inline-size; overflow:hidden; background:var(--color-paper);color:var(--color-ink);
font-family:"Noto Sans JP",sans-serif;font-size:1.7cqw;line-height:1.8;letter-spacing:.04em;text-align:left;
}
#website-color-showcase .color-site :where(p,h4,div,span,img) {margin:0;box-sizing:border-box;min-width:0;min-height:0;}
#website-color-showcase .color-site h4 {font-family:"Shippori Mincho B1",serif;font-size:3.8cqw;font-weight:400;line-height:1.7;letter-spacing:.08em;}
#website-color-showcase .color-site p {font-size:1.7cqw;line-height:1.9;font-weight:400;}
#website-color-showcase .color-site img {display:block;width:100%;height:100%;object-fit:cover;object-position:70% center;border:0;border-radius:0;}
#website-color-showcase .color-site .color-site-eyebrow {font:500 1.14cqw/1.5 "Noto Sans JP",sans-serif;letter-spacing:.16em;}
#website-color-showcase .color-site-nav {height:10cqw;padding:0 5.5cqw;display:flex;align-items:center;gap:2.5cqw;background:var(--color-paper);font-size:.96cqw;line-height:1.4;letter-spacing:.12em;}
#website-color-showcase .color-site-logo {font:400 6.3cqw/1 "Cormorant Garamond",serif;letter-spacing:-.035em;}
#website-color-showcase .color-site-nav__links {margin-left:auto!important;font-size:1cqw;letter-spacing:.035em;}
#website-color-showcase .color-site-link {display:inline-block;margin-top:3.4cqw!important;padding-bottom:1cqw;border-bottom:.12cqw solid currentColor;font-size:1.12cqw;line-height:1.2;letter-spacing:.12em;}
#website-color-showcase .color-site-hero {position:relative;height:65cqw;isolation:isolate;}
#website-color-showcase .color-site-hero::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(255 253 248 / 40%),transparent 70%);z-index:0;}
#website-color-showcase .color-site-hero-copy {position:absolute;left:6cqw;top:17cqw;z-index:1;}
#website-color-showcase .color-site-hero-copy h4 {font-size:5.3cqw;line-height:1.55;margin:3cqw 0 2cqw;}
#website-color-showcase .color-site-hero-copy > p:not(.color-site-eyebrow) {font-family:"Cormorant Garamond",serif;font-size:2.6cqw;letter-spacing:.01em;}
#website-color-showcase .color-site-intro {height:21cqw;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.4cqw;text-align:center;}
#website-color-showcase .color-site-intro h4 {font-size:3.2cqw;}
#website-color-showcase .color-site-ecru-feature {display:grid;grid-template-columns:47% 53%;height:34cqw;margin:0 6cqw;background:var(--color-bg);}
#website-color-showcase .color-site-ecru-feature img {object-position:90% center;}
#website-color-showcase .color-site-ecru-feature > div {padding:3.7cqw 4.4cqw;}
#website-color-showcase .color-site-ecru-feature h4 {font-size:3.1cqw;line-height:1.65;margin:1.7cqw 0;}
#website-color-showcase .color-site-ecru-feature p:not(.color-site-eyebrow) {font-size:1.35cqw;}
#website-color-showcase .color-site-ecru-feature .color-site-link {margin-top:2cqw!important;}
#website-color-showcase .color-site-footer {height:13.5cqw;padding:0 6cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw;}
#website-color-showcase .color-site-footer > span:first-child {font-family:"Cormorant Garamond",serif;font-size:4.5cqw;letter-spacing:-.03em;}
#website-color-showcase .color-site-footer > p {font-family:"Cormorant Garamond",serif;font-size:1.8cqw;letter-spacing:.03em;}
#website-color-showcase .color-site-footer > span:last-child:not(:first-child) {font-size:1cqw;}
/* Ocean: oversize editorial title, curved photograph and a blue footer. */
#website-color-showcase .color-site--ocean .color-site-logo {font-size:7.5cqw;}
#website-color-showcase .color-site-ocean-title {height:33cqw;padding:5cqw 7cqw 0;}
#website-color-showcase .color-site-ocean-title h4 {margin-top:2.3cqw;font-family:"Cormorant Garamond",serif;font-size:11cqw;line-height:.83;letter-spacing:-.045em;}
#website-color-showcase .color-site-ocean-title em {font-weight:400;font-style:italic;}
#website-color-showcase .color-site-ocean-photo {height:57cqw;margin:0 4cqw 0 7cqw;position:relative;overflow:hidden;border-radius:0 0 0 18cqw;}
#website-color-showcase .color-site-ocean-photo img {object-position:center;}
#website-color-showcase .color-site-ocean-photo > p {position:absolute;left:6cqw;top:20cqw;font-family:"Shippori Mincho B1",serif;font-size:3.6cqw;line-height:1.7;letter-spacing:.12em;}
#website-color-showcase .color-site-ocean-photo > span {position:absolute;bottom:4cqw;right:4cqw;font-size:1.1cqw;letter-spacing:.13em;}
#website-color-showcase .color-site-ocean-bottom {display:grid;grid-template-columns:58% 42%;height:43.5cqw;}
#website-color-showcase .color-site-ocean-bottom > div:first-child {padding:7cqw;}
#website-color-showcase .color-site-ocean-bottom h4 {font-size:3.9cqw;margin:3cqw 0 0;}
#website-color-showcase .color-site-ocean-bottom > div:last-child {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3cqw;background:linear-gradient(135deg,var(--color-accent),var(--color-ink));color:white;}
#website-color-showcase .color-site-ocean-circle {display:grid;place-items:center;width:13cqw;height:13cqw;border:.1cqw solid currentColor;border-radius:50%;font:400 8cqw/1 "Cormorant Garamond",serif;}
#website-color-showcase .color-site-ocean-bottom > div:last-child p {font-family:"Cormorant Garamond",serif;font-size:2.9cqw;line-height:1.15;text-align:center;letter-spacing:.04em;}
/* Green: asymmetric arch portrait, botanical ribbon and split editorial cards. */
#website-color-showcase .color-site--green {background:#f8faf2;}
#website-color-showcase .color-site--green .color-site-nav {background:transparent;}
#website-color-showcase .color-site-green-hero {display:grid;grid-template-columns:47% 53%;height:62cqw;padding:3cqw 5cqw 5cqw;gap:1cqw;}
#website-color-showcase .color-site-green-hero > div:first-child {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
#website-color-showcase .color-site-green-hero h4 {font-family:"Cormorant Garamond",serif;font-size:9.3cqw;line-height:.95;letter-spacing:-.035em;margin:4cqw 0 3cqw;}
#website-color-showcase .color-site-green-hero h4 em {font-weight:400;}
#website-color-showcase .color-site-green-hero p:not(.color-site-eyebrow) {font-family:"Shippori Mincho B1",serif;font-size:2.7cqw;line-height:1.8;}
#website-color-showcase .color-site-green-arch {height:54cqw;overflow:hidden;border-radius:24cqw 24cqw 0 0;}
#website-color-showcase .color-site-green-arch img {object-position:75% center;}
#website-color-showcase .color-site-green-strip {height:6cqw;display:flex;align-items:center;justify-content:center;background:var(--color-ink);color:#fff;font-size:1.3cqw;letter-spacing:.14em;}
#website-color-showcase .color-site--green .color-site-intro {height:21cqw;}
#website-color-showcase .color-site-green-cards {height:33cqw;display:grid;grid-template-columns:46% 54%;gap:5cqw;margin:0 7cqw;}
#website-color-showcase .color-site-green-cards > div:first-child img {height:20cqw;object-position:60% 70%;}
#website-color-showcase .color-site-green-cards > div:first-child p {font-size:1cqw;margin-top:1.4cqw;}
#website-color-showcase .color-site-green-cards > div:first-child h4 {font-size:2.5cqw;margin-top:.8cqw;}
#website-color-showcase .color-site-green-cards > div:last-child h4 {font-family:"Cormorant Garamond",serif;font-size:6.2cqw;line-height:.95;letter-spacing:-.02em;margin:2cqw 0;}
#website-color-showcase .color-site-green-cards > div:last-child p:not(.color-site-eyebrow) {font-size:1.5cqw;}
#website-color-showcase .color-site-green-cards .color-site-link {margin-top:1.5cqw!important;}
#website-color-showcase .color-site--green .color-site-footer {height:11.5cqw;}
/* Pearl: centered Japanese typography, framed photograph and pill invitation. */
#website-color-showcase .color-site--pearl .color-site-nav {height:10cqw;}
#website-color-showcase .color-site--pearl .color-site-logo {font-style:italic;font-size:6cqw;}
#website-color-showcase .color-site-pearl-title {height:32cqw;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2cqw;text-align:center;}
#website-color-showcase .color-site-pearl-title h4 {font-size:4.7cqw;line-height:1.5;letter-spacing:.17em;}
#website-color-showcase .color-site-pearl-title > p:last-child {font:italic 2.8cqw/1 "Cormorant Garamond",serif;letter-spacing:.015em;}
#website-color-showcase .color-site-pearl-photo {height:55cqw;margin:0 6cqw;position:relative;border-radius:45cqw 45cqw 0 0;overflow:hidden;}
#website-color-showcase .color-site-pearl-photo img {object-position:center;}
#website-color-showcase .color-site-pearl-photo > span {position:absolute;left:5cqw;bottom:4cqw;font-size:1.05cqw;letter-spacing:.17em;}
#website-color-showcase .color-site-pearl-bottom {height:35cqw;padding:5cqw 8cqw;display:grid;grid-template-columns:42% 58%;gap:3cqw;background:var(--color-bg);}
#website-color-showcase .color-site-pearl-bottom > div:first-child h4 {font-family:"Cormorant Garamond",serif;font-size:6.3cqw;line-height:.95;letter-spacing:-.03em;margin-top:2cqw;}
#website-color-showcase .color-site-pearl-bottom > div:first-child h4 em {font-weight:400;}
#website-color-showcase .color-site-pearl-bottom > div:last-child h4 {font-size:3.2cqw;line-height:1.7;margin-bottom:2cqw;}
#website-color-showcase .color-site-pearl-bottom > div:last-child p {font-size:1.45cqw;}
#website-color-showcase .color-site-pearl-button {display:inline-block;margin-top:2.5cqw!important;padding:1.5cqw 3cqw;border-radius:8cqw;background:var(--color-ink);color:#fff;font-size:1.1cqw;letter-spacing:.08em;}
#website-color-showcase .color-site--pearl .color-site-footer {height:11.5cqw;}