/* Hem: a magazine cover in hot pink, with a masthead that does not fit. */
body { --bg: #ff2d87; --fg: #2a0512; --display: "Bodoni Moda", serif; --display-w: 500; --body: Karla, system-ui, sans-serif; --strip-bg: #2a0512; --strip-fg: #fbe3e6; --why-bg: #fbe3e6; }
.buy { background: #2a0512; border: 0; color: #fff; font-weight: 700; padding: 0.7rem 1.2rem; }
.ctl { background: none; border: 0; border-block-end: 2px solid; color: inherit; font-weight: 700; padding: 0.35rem 0.1rem; }
.f-hero { display: grid; gap: 0 var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); height: calc(100svh - 1.8rem); min-height: 42rem; overflow: clip; padding: 0 var(--gutter); position: relative; }
.f-mast { font-family: "Bodoni Moda", serif; font-size: min(46vw, 90svh); font-style: italic; font-weight: 800; inset: -0.17em 0 auto auto; line-height: 0.8; margin: 0; pointer-events: none; position: absolute; color: #2a0512; z-index: 0; }
.f-cover { align-self: end; aspect-ratio: 1; grid-column: 2; height: 94%; justify-self: center; max-width: 100%; position: relative; z-index: 1; }
.f-copy { align-self: end; grid-column: 1; grid-row: 1; padding-block-end: 1.25rem; position: relative; z-index: 3; }
.shopname { font-weight: 700; }
.f-copy h1 { font-family: "Bodoni Moda", serif; font-size: clamp(1.8rem, 3.6vw, 3.8rem); font-style: italic; font-weight: 500; line-height: 1.02; margin: 0.25rem 0 1rem; max-width: 18ch; }
.f-look { font-size: 1.25rem; margin: 0 0 0.75rem; }
.f-look i { font-family: "Bodoni Moda", serif; font-size: 1.8rem; }
.f-ctl { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 0.75rem; }
.cartline { font-size: 0.85rem; margin: 0.6rem 0 0; }
.f-rail { background: #fbe3e6; overflow: clip; padding: clamp(3rem, 7vw, 6rem) 0; }
.f-rail h2 { font-family: "Bodoni Moda", serif; font-size: clamp(2.6rem, 8vw, 8rem); font-style: italic; font-weight: 500; line-height: 0.95; margin: 0 0 2rem; padding-inline: var(--gutter); }
.f-rail .row-demo img { aspect-ratio: 1; }
.f-rail .row-demo { --gap: 14px; }
@media (max-width: 800px) {
	.f-hero { grid-template-columns: minmax(0, 1fr); height: auto; padding-block-start: 16vw; }
	.f-mast { font-size: 44vw; inset: -0.1em 0 auto auto; }
	.f-cover { grid-column: 1; grid-row: 1; height: auto; width: 100%; }
	.f-copy { grid-row: 2; padding-block-start: 1rem; }
}
.f-hero { height: auto; min-height: calc(100svh - 1.8rem); }
.f-cover { --sq: min(100svh - 4rem, 50vw); align-self: center; height: var(--sq); width: var(--sq); }
@media (max-width: 800px) { .f-cover { height: auto; width: 100%; } }
.f-cover .gs, .f-cover .gs-track, .f-cover .gs-slide { height: 100%; }
.f-cover { aspect-ratio: 1; }
.f-cover { --sq: min(100svh - 4rem, 46vw); max-width: none; }