/* Realistic mock-ups: an iPhone showing an Instagram profile, and a browser showing the finished site.
   Everything is sized in em, so one font-size on the root scales the whole device. */

/* ───── iPhone ───── */
.ip { --u: 10px; font-size: var(--u); position: relative; width: 27em; aspect-ratio: 9 / 19.3; padding: .95em; border-radius: 4.5em; background: linear-gradient(145deg, #4a4a52, #16161a 30%, #0c0c0f 70%, #3a3a42); box-shadow: inset 0 0 0 .18em #6d6d78, inset 0 0 0 .34em #0a0a0c, 0 3em 5em -2em rgba(0, 0, 0, .75); }
.ip::before, .ip::after { content: ''; position: absolute; width: .3em; border-radius: .2em; background: #2c2c33; }
.ip::before { left: -.22em; top: 11em; height: 3.2em; box-shadow: 0 4.4em 0 #2c2c33, 0 -4em 0 0 #2c2c33; }
.ip::after { right: -.22em; top: 14em; height: 6em; }
.ip__screen { position: relative; height: 100%; border-radius: 3.6em; overflow: hidden; background: #fff; color: #0f1419; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; line-height: 1.25; -webkit-font-smoothing: antialiased; text-align: left; }
.ip__island { position: absolute; z-index: 5; left: 50%; top: 1.85em; width: 8.2em; height: 2.35em; margin-left: -4.1em; border-radius: 2em; background: #000; }

/* ───── Instagram profile, as its owner sees it ───── */
.ig { display: flex; flex-direction: column; height: 100%; }
.ig svg { width: 1em; height: 1em; flex: none; }
.ig__status { display: flex; justify-content: space-between; align-items: center; padding: 1.5em 2.2em 0 2.6em; height: 4.4em; font-size: 1em; }
.ig__status b { font-size: 1.22em; font-weight: 600; letter-spacing: -.01em; }
.ig__status span { display: flex; align-items: center; gap: .45em; }
.ig__status svg:nth-child(1) { width: 1.55em; height: .95em; fill: currentColor; }
.ig__status svg:nth-child(2) { width: 1.4em; height: 1em; fill: currentColor; }
.ig__status svg:nth-child(3) { width: 2.2em; height: 1.05em; fill: currentColor; color: #0f1419; }
.ig__bar { display: flex; justify-content: space-between; align-items: center; padding: .7em 1.3em .5em; }
.ig__user { display: inline-flex; align-items: center; gap: .15em; font-size: 1.62em; font-weight: 700; letter-spacing: -.02em; }
.ig__user svg { font-size: .85em; }
.ig__acts { display: flex; gap: 1.5em; font-size: 2em; }
.ig__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9em; padding: .7em 1.3em 0; }
.ig__ava { position: relative; width: 6.8em; height: 6.8em; padding: .28em; border-radius: 50%; background: linear-gradient(45deg, #ffb13d, #ff4f6d 45%, #c13ed6 75%, #6a4df5); }
.ig__ava i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: .26em solid #fff; font: 600 2.3em/1 Georgia, 'Times New Roman', serif; font-style: normal; letter-spacing: -.03em; }
.ig__ava i.is-long { font-size: 1.45em; letter-spacing: 0; }
.ig__stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig__stats p { margin: 0; font-size: 1em; white-space: nowrap; }
.ig__stats b { display: block; font-size: 1.45em; font-weight: 700; }
.ig__bio { padding: .9em 1.3em 0; font-size: 1.14em; line-height: 1.32; }
.ig__bio b { display: block; font-weight: 600; }
.ig__bio span { display: block; }
.ig__cat { color: #737b85; }
.ig__link { display: inline-flex; align-items: center; gap: .3em; margin-top: .1em; color: #00376b; font-weight: 600; }
.ig__dash { margin: .9em 1.3em 0; padding: .75em 1em; border-radius: .9em; background: #f0f2f5; font-size: 1.06em; }
.ig__dash b { display: block; font-weight: 600; }
.ig__dash span { color: #737b85; }
.ig__btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5em; padding: .8em 1.3em 0; }
.ig__btns i { display: grid; place-items: center; height: 2.55em; border-radius: .75em; background: #f0f2f5; font-style: normal; font-size: 1.12em; font-weight: 600; }
.ig__btns i:last-child { width: 2.9em; }
.ig__btns i:last-child svg { font-size: 1.25em; }
.ig__hl { display: flex; gap: 1.15em; padding: 1.1em 1.3em .3em; }
.ig__hl p { margin: 0; width: 5.1em; text-align: center; font-size: .98em; }
.ig__hl span { display: block; width: 5.1em; height: 5.1em; margin-bottom: .35em; padding: .22em; border-radius: 50%; box-shadow: inset 0 0 0 .1em #d5d9de; }
.ig__hl img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ig__tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .6em; border-top: .08em solid #e1e4e8; }
.ig__tabs span { display: grid; place-items: center; height: 3.5em; color: #8b939c; }
.ig__tabs span.is-on { color: #0f1419; box-shadow: inset 0 .12em 0 #0f1419; }
.ig__tabs svg { font-size: 1.9em; }
.ig__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .12em; align-content: start; overflow: hidden; }
.ig__grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ig__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 6.4em; padding: 0 1em 2em; background: #fff; border-top: .08em solid #e1e4e8; }
.ig__nav svg { font-size: 2.15em; }
.ig__nav b { width: 2.3em; height: 2.3em; border-radius: 50%; box-shadow: 0 0 0 .14em #0f1419; }
.ig__nav::after { content: ''; position: absolute; left: 50%; bottom: .65em; width: 10.5em; height: .42em; margin-left: -5.25em; border-radius: 1em; background: #0f1419; }

/* ───── Browser window ───── */
.bw { container-type: inline-size; border-radius: clamp(8px, 1.1vw, 14px); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -30px rgba(0, 0, 0, .8); text-align: left; }
.bw, .bw * { box-sizing: border-box; }
.bw__bar { display: flex; align-items: center; gap: 1.6cqw; height: 4.6cqw; padding: 0 1.6cqw; background: #ecebe9; }
.bw__dots { display: flex; gap: .8cqw; }
.bw__dots i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #ff5f57; }
.bw__dots i:nth-child(2) { background: #febc2e; }
.bw__dots i:nth-child(3) { background: #28c840; }
.bw__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: .7cqw; height: 2.9cqw; max-width: 46cqw; margin-inline: auto; border-radius: .8cqw; background: #fff; font: 500 1.5cqw/1 -apple-system, 'Helvetica Neue', Arial, sans-serif; color: #33363b; }
.bw__url svg { width: 1.3cqw; height: 1.3cqw; color: #7a7f87; }
.bw__sp { width: 6cqw; }

/* ───── The finished site (first screen), three art directions ───── */
.site { position: relative; aspect-ratio: 16 / 10; overflow: hidden; -webkit-font-smoothing: antialiased; }
.site p, .site h4 { margin: 0; }
.site__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site__nav { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 4cqw; font-size: 1.45cqw; }
.site__logo { margin-right: auto; font-size: 2.2cqw; }
.site__cta { padding: 1cqw 1.9cqw; border-radius: 99cqw; font-weight: 600; }
.site__body { position: absolute; z-index: 2; left: 4cqw; bottom: 4.4cqw; }
.site__kick { font-size: 1.3cqw; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.6cqw !important; }
.site__h { line-height: .98; letter-spacing: -.02em; }
.site__p { margin-top: 1.8cqw !important; font-size: 1.62cqw; line-height: 1.45; max-width: 36cqw; }
.site__btn { display: inline-block; margin-top: 2.4cqw; padding: 1.35cqw 2.6cqw; border-radius: 99cqw; font-size: 1.55cqw; font-weight: 600; }
.site__meta { display: flex; gap: 2.4cqw; margin-top: 2.2cqw !important; font-size: 1.3cqw; }
.site__thumbs { position: absolute; z-index: 2; display: flex; gap: 1cqw; }
.site__thumbs img { display: block; width: 9cqw; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .9cqw; }

/* Lumen: blush panel, wine serif, photo on the right */
.site--nails { background: #f7e7e1; color: #4c1524; font-family: 'Geologica', sans-serif; }
.site--nails .site__photo { left: 44%; width: 56%; object-position: 62% 50%; }
.site--nails .site__logo { font: italic 400 3cqw/1 'Instrument Serif', serif; }
.site--nails .site__nav span:not(.site__cta) { color: #7b4a54; }
.site--nails .site__nav { color: #4c1524; }
.site--nails .site__cta { background: #4c1524; color: #f7e7e1; }
.site--nails .site__body { width: 37cqw; bottom: 5cqw; }
.site--nails .site__kick { color: #a0606c; }
.site--nails .site__h { font: 400 6.6cqw/.95 'Instrument Serif', serif; font-style: italic; }
.site--nails .site__p { color: #6e3c47; max-width: 32cqw; }
.site--nails .site__btn { background: #4c1524; color: #f7e7e1; }
.site--nails .site__meta { color: #8a5560; }
.site--nails .site__thumbs { right: 3cqw; bottom: 3cqw; }
.site--nails .site__thumbs img { box-shadow: 0 1.4cqw 2.4cqw -1cqw rgba(60, 10, 25, .6); border: .35cqw solid #fff; }

/* Oat & Honey: full-bleed dark, big soft serif */
.site--bakery { background: #252b1d; color: #f3e9d2; font-family: 'Geologica', sans-serif; }
.site--bakery::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(28, 33, 20, .92) 0, rgba(28, 33, 20, .55) 42%, transparent 66%); }
.site--bakery .site__logo { font: 500 2.5cqw/1 'Fraunces', serif; }
.site--bakery .site__cta { background: #f0c45a; color: #252b1d; }
.site--bakery .site__body { width: 47cqw; }
.site--bakery .site__kick { color: #f0c45a; }
.site--bakery .site__h { font: 400 6.1cqw/1 'Fraunces', serif; letter-spacing: -.035em; }
.site--bakery .site__p { color: rgba(243, 233, 210, .78); }
.site--bakery .site__btn { background: #f0c45a; color: #252b1d; }
.site--bakery .site__meta { color: rgba(243, 233, 210, .7); }
.site--bakery .site__thumbs { right: 3cqw; bottom: 3cqw; }
.site--bakery .site__thumbs img { width: 8cqw; border-radius: 50%; aspect-ratio: 1; border: .35cqw solid rgba(243, 233, 210, .9); }

/* Fernhill: sunlit photo, confident grotesk, terracotta */
.site--clay { background: #efe4d3; color: #2b1d14; font-family: 'Bricolage Grotesque', 'Geologica', sans-serif; }
.site--clay::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(240, 229, 212, .97) 0, rgba(240, 229, 212, .9) 36%, rgba(240, 229, 212, 0) 62%); }
.site--clay .site__logo { font-weight: 700; letter-spacing: -.04em; }
.site--clay .site__cta { background: #b5532f; color: #fff6ea; }
.site--clay .site__body { width: 44cqw; }
.site--clay .site__kick { color: #b5532f; }
.site--clay .site__h { font-size: 6cqw; font-weight: 700; letter-spacing: -.05em; line-height: .94; }
.site--clay .site__p { color: #5c4637; max-width: 34cqw; }
.site--clay .site__btn { background: #2b1d14; color: #fff6ea; }
.site--clay .site__meta { color: #7a5f4c; }
.site--clay .site__meta span { padding: .7cqw 1.4cqw; border-radius: 99cqw; background: rgba(181, 83, 47, .14); color: #8f3f20; font-weight: 600; }
.site--clay .site__meta { gap: 1cqw; }
.site--clay .site__thumbs { right: 3cqw; top: 9cqw; flex-direction: column; }
.site--clay .site__thumbs img { width: 7.4cqw; aspect-ratio: 1; border: .35cqw solid #fff6ea; }

/* ───── The same site on a phone ───── */
.msite { height: 100%; display: flex; flex-direction: column; background: #f7e7e1; color: #4c1524; font-family: 'Geologica', sans-serif; }
.msite__bar { display: flex; align-items: center; justify-content: space-between; padding: 5.4em 1.6em 1em; }
.msite__bar b { font: italic 400 2.5em/1 'Instrument Serif', serif; }
.msite__bar i { padding: .7em 1.2em; border-radius: 9em; background: #4c1524; color: #f7e7e1; font-style: normal; font-size: 1.05em; font-weight: 600; }
.msite__photo { margin: 0 1.2em; height: 17em; border-radius: 1.6em; object-fit: cover; object-position: 60% 50%; width: calc(100% - 2.4em); }
.msite h5 { margin: .34em .46em 0; font: italic 400 3.5em/.95 'Instrument Serif', serif; }
.msite p { margin: 1em 1.6em 0; font-size: 1.12em; line-height: 1.4; color: #6e3c47; }
.msite__btn { margin: 1.3em 1.6em 0; padding: 1.1em; border-radius: 9em; background: #4c1524; color: #f7e7e1; text-align: center; font-size: 1.2em; font-weight: 600; }
.msite__row { display: flex; gap: .7em; margin: 1.4em 1.2em 0; }
.msite__row img { flex: 1; min-width: 0; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1.1em; }