/* Preview artwork: miniature sites built from HTML and CSS.
   One em is 1% of the frame's width, so a plate scales as a whole. */
.plate { --display: Georgia, "Times New Roman", serif; width: 100%; font-size: 1cqw; line-height: 1.2; transition: transform .6s var(--ease), filter .2s; text-align: left; }
.plate h4, .plate h5, .plate p { margin: 0; font-weight: inherit; }
.plate svg { width: 100%; height: 100%; }

/* Kiln: a ceramics studio */
.plate--kiln { background: #e9651f; color: #1f1610; font-family: var(--text); }
.k-nav { display: flex; gap: 3em; align-items: center; padding: 2.4em 4em; font-size: 1em; }
.k-nav b { font-size: 2.6em; font-family: var(--display); font-weight: 400; margin-right: auto; }
.k-nav span { font-size: 1.5em; }
.k-hero { display: grid; grid-template-columns: 1.9fr 1fr; align-items: end; padding: 2em 4em 0; min-height: 42em; }
.k-hero h4 { font-family: var(--display); font-size: 9.6em; line-height: .92; letter-spacing: -.03em; padding-bottom: .3em; }
.k-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; padding: 1em; background: #1f1610; }
.k-grid i { aspect-ratio: 1; background: var(--c); border-radius: 50% 50% 8% 8% / 62% 62% 8% 8%; }
.k-quote { padding: 6em 4em; background: #efe2cd; font-family: var(--display); font-size: 1em; }
.k-quote { font-size: 5em; padding: 1em; line-height: 1; }
.k-foot { display: flex; justify-content: space-between; padding: 3em 4em; background: #1f1610; color: #efe2cd; font-size: 1.4em; }

/* The Broadsheet: an editorial magazine */
.plate--broadsheet { background: #f4f1e6; color: #14110e; font-family: Georgia, "Times New Roman", serif; padding-bottom: 3em; }
.b-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding: 2.5em 3em 1.5em; }
.b-mast span { font-size: 1.3em; }
.b-mast span:last-child { text-align: right; }
.b-mast b { font-family: var(--display); font-weight: 400; font-size: 7.2em; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.b-nav { display: flex; justify-content: space-between; margin-inline: 3em; padding: .9em 0; border-block: .15em solid #14110e; font-family: var(--text); font-size: 1.3em; }
.b-lead { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.6em; padding: 3em; }
.b-lead h4 { grid-column: 1 / -1; font-family: var(--display); font-size: 8.4em; line-height: .96; letter-spacing: -.028em; }
.b-art { aspect-ratio: 4 / 3; overflow: hidden; }
.b-text u { display: block; height: .55em; margin-bottom: .75em; background: #14110e; opacity: .55; }
.b-text { font-size: 1.1em; }
.b-text u:last-child { width: 60%; }
.b-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; margin-inline: 3em; padding-top: 2em; border-top: .15em solid #14110e; }
.b-row i { display: block; aspect-ratio: 5 / 4; background: var(--c); margin-bottom: 1em; }
.b-row h5 { font-family: var(--display); font-size: 2.5em; line-height: 1.02; }
.b-long { margin: 4em 3em 0; padding: 3em; background: #14110e; color: #f4f1e6; }
.b-long h4 { font-family: var(--display); font-size: 6em; line-height: 1; margin-bottom: .4em; }
.b-long u { background: #f4f1e6; }

/* Aperture: a photographer's portfolio */
.plate--aperture { background: #1a24c9; color: #f6efe2; font-family: var(--text); padding-bottom: 4em; }
.a-nav { display: flex; gap: 3em; padding: 2.4em 4em; }
.a-nav b { margin-right: auto; font-size: 1.8em; font-weight: 600; }
.a-nav span { font-size: 1.5em; }
.a-title { font-family: var(--display); font-size: 17em; line-height: .86; letter-spacing: -.04em; padding: .12em .22em .22em; }
.a-lead { aspect-ratio: 16 / 10; margin-inline: 4em; overflow: hidden; }
.a-pair { display: grid; grid-template-columns: 2fr 3fr; gap: 1.5em; padding: 1.5em 4em; }
.a-pair svg { aspect-ratio: 3 / 4; height: auto; }
.a-index { display: grid; grid-template-columns: 1fr auto; gap: .9em 2em; margin: 2em 4em 0; padding-top: 2em; border-top: .15em solid currentColor; font-size: 1.6em; }

/* Orchard: a seasonal restaurant */
.plate--orchard { background: #0d4a37; color: #f4efe0; font-family: var(--text); }
.o-nav { display: grid; grid-template-columns: 1fr auto 1fr; padding: 2.4em 4em; align-items: center; font-size: 1em; }
.o-nav span { font-size: 1.5em; }
.o-nav span:last-child { text-align: right; }
.o-nav b { font-family: var(--display); font-weight: 400; font-size: 3em; }
.o-title { padding: .3em 0 .1em; font-family: var(--display); font-size: 13em; line-height: .9; letter-spacing: -.035em; text-align: center; color: #ffc400; }
.o-fruit { padding: 2em 7em 0; }
.o-menu { margin-top: 2em; padding: 4em; background: #ff5c93; color: #0d2a20; font-size: 1em; }
.o-menu p { display: flex; align-items: baseline; gap: .6em; padding: .55em 0; font-size: 2em; }
.o-menu p span:first-child { font-family: var(--display); font-size: 1.5em; }
.o-menu u { flex: 1; border-bottom: .08em dotted currentColor; text-decoration: none; }
.o-band { padding: 3em; background: #ffc400; color: #0d2a20; font-family: var(--display); font-size: 1em; }
.o-band { font-size: 6em; padding: .6em; line-height: 1; text-align: center; }

/* Vitrine: a gallery plugin */
.plate--vitrine { display: grid; grid-template-columns: 24% 1fr; height: 100%; min-height: 66em; align-content: stretch; background: #f2eee6; color: #14110e; font-family: var(--text); }
.v-side { display: flex; flex-direction: column; gap: 1em; padding: 3em 2.5em; background: #14110e; color: #f2eee6; }
.v-side b { font-family: var(--display); font-weight: 400; font-size: 3.2em; margin-bottom: .5em; }
.v-side span { font-size: 1.5em; padding: .5em .7em; border-radius: .4em; opacity: .7; }
.v-side .on { background: #2d2823; opacity: 1; }
.v-slider { height: .3em; margin-top: 2.5em; background: #4a4239; border-radius: 1em; position: relative; }
.v-slider i { position: absolute; left: 62%; top: 50%; width: 1.8em; height: 1.8em; margin-top: -.9em; border-radius: 50%; background: #ff7a3d; }
.v-slider--b i { left: 28%; background: #f2d65c; }
.v-stage { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 15em; gap: 1em; padding: 3em; }
.v-stage i { grid-row: span var(--r, 1); background: var(--c); border-radius: .5em; }

/* Signal: a form and routing plugin */
.plate--signal { display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; min-height: 66em; background: #4b23d6; color: #fff; font-family: var(--text); }
.s-form { display: flex; flex-direction: column; gap: 1.5em; padding: 4em; }
.s-form h4 { font-family: var(--display); font-size: 6em; line-height: .96; letter-spacing: -.025em; margin-bottom: .2em; }
.s-field { padding: 1em 1.2em; border: .1em solid rgba(255, 255, 255, .55); border-radius: .5em; font-size: 1.6em; }
.s-field--on { border: .15em solid #d7ff5e; }
.s-chips { display: flex; gap: .8em; font-size: 1.5em; }
.s-chips em { font-style: normal; padding: .5em 1em; border: .1em solid rgba(255, 255, 255, .55); border-radius: 3em; }
.s-chips .on { background: #d7ff5e; border-color: #d7ff5e; color: #1c0f55; }
.s-button { align-self: flex-start; padding: .8em 1.8em; border-radius: 3em; background: #fff; color: #1c0f55; font-size: 1.7em; font-weight: 600; }
.s-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9em; padding: 4em 3em; background: #d7ff5e; color: #1c0f55; }
.s-flow span { font-size: 1.5em; }
.s-flow b { width: 100%; padding: 1em; border-radius: .6em; background: #1c0f55; color: #fff; font-size: 1.5em; font-weight: 500; text-align: center; }
.s-flow .alt { background: #fff; color: #1c0f55; }
.s-flow u { width: .2em; height: 3em; background: #1c0f55; }

/* Elements: the free component collection */
.plate--elements { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.15fr 1fr .8fr; gap: 1em; padding: 1em; height: 100%; min-height: 56em; background: #f1e9da; font-family: var(--text); }
.plate--elements > div { display: grid; place-items: center; border-radius: 1em; overflow: hidden; }
.e-a { grid-column: span 2; background: #ff5c33; }
.e-a i { width: 12em; height: 6em; border-radius: 3em; background: #14110e; position: relative; }
.e-a i::after { content: ""; position: absolute; right: .8em; top: .8em; width: 4.4em; height: 4.4em; border-radius: 50%; background: #f1e9da; }
.e-b { grid-column: span 2; background: #14110e; align-content: center; gap: 1.1em; }
.e-b u { display: block; width: 18em; height: 1em; border-radius: 1em; background: #f1e9da; }
.e-b u:nth-child(2) { width: 12em; background: #2cc4a5; }
.e-b u:nth-child(3) { width: 15em; }
.e-c { grid-column: span 2; background: #2337d9; color: #f1e9da; font-family: var(--display); font-size: 8em; border-radius: .125em !important; }
.e-d { grid-column: span 3; background: #ffd23f; }
.e-d span { width: 22em; height: 8em; border-radius: 1em; background: #14110e; box-shadow: 1em 1em 0 #ff5c33; }
.e-e { grid-column: span 3; background: #0c6b58; grid-auto-flow: column; justify-content: center; gap: .3em; color: #f1e9da; font-size: 1.7em; }
.e-e em { font-style: normal; padding: .6em 1.1em; border-radius: 3em; }
.e-e .on { background: #f1e9da; color: #0c6b58; }
.e-f { grid-column: 1 / -1; background: #d9caf5; grid-auto-flow: column; justify-content: center; gap: 2em; }
.e-f i { width: 6em; height: 6em; border-radius: 50%; background: #2a1469; }
.e-f i:nth-child(2) { border-radius: 1em; background: #ff5c33; }
.e-f i:nth-child(3) { background: #0c6b58; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.e-f i:nth-child(4) { background: #14110e; border-radius: 1em 50%; }