/* Six Basis designs: one shared layout, individual stationery and colour. */
body.theme-winter{--ink:#29473f;--paper:#fcfaf4;--soft:#edf0e9;--line:#c2cabb;--accent:#7b3944}
body.theme-elegance{--ink:#62564b;--paper:#fffdf7;--soft:#f4efe5;--line:#d6c8af;--accent:#87704f}
body.theme-summer{--ink:#294e70;--paper:#fffaf3;--soft:#f8eee5;--line:#dacbbf;--accent:#ae513d}
.theme-winter .button{background:var(--accent);border-color:var(--accent)}
.theme-elegance .demo-bar{background:#eee7d9;color:var(--ink)}
.theme-summer .demo-bar{background:#f1ded0;color:var(--ink)}
.theme-summer .button{background:#315c85;border-color:#315c85}
.basis-date-card--winter{aspect-ratio:3/2;color:#29473f}
.basis-date-card--winter .basis-date-copy{inset:27% 14% auto 22%}
.basis-date-card--winter time{font-size:10.5cqi}
.basis-date-card--elegance{aspect-ratio:2/3;color:#6c5944}
.basis-date-card--elegance .basis-date-copy{inset:31% 13% auto}
.basis-date-card--elegance .basis-date-kicker{font-size:6cqi;margin-bottom:3cqi}
.basis-date-card--elegance time{font-size:14cqi}
.basis-date-card--elegance time>span:last-child{font-size:11cqi}
.basis-date-card--summer{aspect-ratio:1;color:#315c85}
.basis-date-card--summer .basis-date-copy{inset:36% 18% auto 26%}
.basis-date-card--summer time{font-size:12cqi}
.hero-art .basis-date-card--elegance{max-width:335px}
.hero-art .basis-date-card--summer{max-width:490px}
.basis-preview.basis-winter{--basis-ink:#29473f;--basis-paper:#fcfaf4;--basis-soft:#edf0e9;--basis-accent:#7b3944;--basis-line:#c2cabb}
.basis-preview.basis-elegance{--basis-ink:#62564b;--basis-paper:#fffdf7;--basis-soft:#f4efe5;--basis-accent:#87704f;--basis-line:#d6c8af}
.basis-preview.basis-summer{--basis-ink:#294e70;--basis-paper:#fffaf3;--basis-soft:#f8eee5;--basis-accent:#ae513d;--basis-line:#dacbbf}
.basis-preview.basis-winter .basis-mini-button{background:var(--basis-accent)}
.basis-mini-hero>.basis-date-card--elegance{width:63%;justify-self:center}
.basis-mini-hero>.basis-date-card--summer{width:90%;justify-self:center}
.six-basis-designs{row-gap:48px}
@media(min-width:721px) and (max-width:1000px){.refined-styles .six-basis-designs .design-card:last-child{grid-column:auto;width:auto;justify-self:stretch}}
@media(max-width:700px){.hero-art .basis-date-card--elegance{width:76%;max-width:290px}.hero-art .basis-date-card--summer{max-width:400px}}