:root {
  --page: #fff8f3; --surface: #fff0f5; --ink: #2c2030; --muted: #806b79;
  --line: #e8c8d5; --accent: #e85d9e; --dark: #3a2448;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font: 16px/1.55 "Nunito Sans", sans-serif; }
a { color: inherit; text-decoration: none; } button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip { position: fixed; z-index: 4; top: 12px; left: 12px; padding: 9px 14px; color: #fff; background: var(--dark); transform: translateY(-150%); } .skip:focus { transform: none; }
.site-header, main > section, footer { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.site-header { height: 78px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark, h1, h2, h3, .eyebrow, .filters, .filter-status, .timeline, .detail-title, .next { font-family: Fraunces, serif; }
.wordmark { font-size: 22px; font-weight: 700; } .wordmark span { color: var(--accent); font-size: 13px; margin-left: 7px; text-transform: uppercase; letter-spacing: .12em; }
nav { display: flex; gap: 28px; align-items: center; } nav a { font-size: 14px; } .nav-accent { border-bottom: 2px solid var(--accent); padding-bottom: 5px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { margin: 0; line-height: .96; letter-spacing: -.055em; } h1 { font-size: clamp(56px, 8vw, 100px); } h2 { font-size: clamp(42px, 6vw, 70px); }
.hero { min-height: 720px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; padding-block: 80px 100px; }
.hero-copy > p:not(.eyebrow) { max-width: 430px; margin: 30px 0; color: var(--muted); font-size: 19px; } .text-link { display: inline-block; border-bottom: 2px solid var(--accent); padding-bottom: 6px; font-weight: 600; }
.peach-window { position: relative; height: 570px; overflow: hidden; background: #f8b7cf; border-radius: 48% 48% 8px 8px; }
.sun { position: absolute; top: 12%; right: 13%; width: 112px; height: 112px; border-radius: 50%; background: #ee856f; }.cloud { position: absolute; width: 150px; height: 30px; border-radius: 30px; background: #fff8f3; }.cloud:before { content: ""; position: absolute; left: 30px; bottom: 0; width: 55px; height: 55px; border-radius: 50%; background: inherit; }.cloud-one { top: 25%; left: 8%; }.cloud-two { top: 39%; right: 5%; transform: scale(.7); }
.castle { position: absolute; inset: 24% 15% 0; background: #f6d4dd; border: 12px solid #f49fc1; border-bottom: 0; border-radius: 35px 35px 0 0; }.castle i, .castle b, .castle span { position: absolute; bottom: 0; width: 24%; height: 70%; background: #f49fc1; }.castle i { left: -16%; }.castle b { right: -16%; }.castle span { left: 38%; height: 48%; background: #e85d9e; }
.peach-figure { position: absolute; z-index: 2; bottom: 0; left: 37%; width: 150px; height: 310px; }.hair { position: absolute; top: 5px; left: -22px; width: 194px; height: 175px; border-radius: 50% 50% 45% 45%; background: #f3a16b; }.face { position: absolute; top: 33px; left: 30px; width: 90px; height: 106px; border-radius: 45%; background: #ffd8b5; }.crown { position: absolute; z-index: 3; top: -20px; left: 45px; width: 60px; height: 42px; background: #f7c75d; clip-path: polygon(0 100%, 12% 10%, 45% 62%, 70% 0, 100% 100%); }.dress { position: absolute; bottom: 0; left: -10px; width: 170px; height: 170px; border-radius: 80% 80% 0 0; background: #e85d9e; }.brooch { position: absolute; z-index: 3; bottom: 75px; left: 66px; color: #fff6c9; font-size: 24px; }.peach-window > p { position: absolute; z-index: 4; right: 18px; bottom: 15px; margin: 0; padding: 12px; color: var(--dark); background: #fff8f3; font-size: 12px; }
.notes, .wardrobe, .atlas, .archive { padding-block: 110px; border-top: 1px solid var(--line); }.notes, .archive { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; }.note-copy { color: var(--muted); font-size: 18px; }.fact-row { display: flex; gap: 45px; margin-top: 45px; color: var(--ink); }.fact-row b { display: block; color: var(--accent); font: 20px Fraunces; }.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 55px; }.filters { display: flex; gap: 5px; border-bottom: 1px solid var(--line); }.filters button { min-height: 42px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }.filters .is-active { color: var(--ink); border-color: var(--accent); }
.look-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 24px; }.look-card[hidden] { display: none; }.look-art { position: relative; width: 100%; height: 390px; overflow: hidden; border: 0; cursor: zoom-in; background: var(--surface); }.look-art i { position: absolute; left: 28%; bottom: 0; width: 44%; height: 72%; border-radius: 50% 50% 0 0; background: var(--accent); }.look-art b { position: absolute; left: 38%; top: 17%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #ffd8b5; }.look-pink { background: #f9c4d8; }.look-tennis { background: #d5ebd1; }.look-tennis i { background: #f3f0d0; }.look-tennis:after { content: ""; position: absolute; left: 15%; top: 18%; width: 70%; height: 12px; background: #e85d9e; transform: rotate(-22deg); }.look-travel { background: #c9daf2; }.look-travel i { background: #f2b899; }.look-rally { background: #f7d4b1; }.look-rally i { background: #d878ae; }.look-card h3 { margin: 15px 0 2px; font-size: 22px; }.look-card p, .filter-status { margin: 0; color: var(--muted); font-size: 13px; }.filter-status { margin-top: 28px; }
.atlas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }.scene { position: relative; height: 230px; overflow: hidden; background: #cfe8f1; }.scene i { position: absolute; left: 15%; bottom: 0; width: 70%; height: 62%; border-radius: 50% 50% 0 0; background: #85bf91; }.scene b { position: absolute; right: 16%; top: 20%; width: 55px; height: 55px; border-radius: 50%; background: #f3ae71; }.flower { background: #f8c4d7; }.flower i { background: #f3a06e; }.snow { background: #d6d8ee; }.snow i { background: #fff8f3; }.atlas h3 { margin: 17px 0 5px; font-size: 23px; }.atlas p { margin: 0; color: var(--muted); }
.timeline { border-top: 1px solid var(--line); }.timeline div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }.timeline time { color: var(--accent); }.timeline p { margin: 0; }.archive { margin-bottom: 90px; }.archive h2 { margin-bottom: 30px; } footer { min-height: 125px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.quick-view { width: min(760px, calc(100% - 30px)); padding: 0; border: 0; color: var(--ink); background: var(--page); }.quick-view::backdrop { background: rgb(58 36 72 / 75%); }.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 9px; border: 0; color: #fff; background: var(--dark); cursor: pointer; }.dialog-art { height: 400px; }.dialog-copy { padding: 30px; }.dialog-copy h2 { font-size: 48px; }.dialog-copy p:not(.eyebrow) { color: var(--muted); }
.detail-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; padding-block: 80px 110px; }.detail-art { position: relative; min-height: 650px; }.detail-art i { position: absolute; left: 20%; bottom: 0; width: 55%; height: 70%; border-radius: 50% 50% 0 0; background: var(--accent); }.detail-art b { position: absolute; left: 38%; top: 18%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #ffd8b5; }.detail-title { align-self: end; }.detail-title h1 { font-size: clamp(55px, 7vw, 90px); }.detail-title dl { margin: 45px 0 30px; border-top: 1px solid var(--line); }.detail-title dl div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.detail-title dd { margin: 0; }.detail-title > p:last-child { color: var(--muted); font: 17px/1.6 "Nunito Sans"; }.detail-note { display: grid; grid-template-columns: 220px 1fr; gap: 90px; padding-block: 100px; border-top: 1px solid var(--line); }.detail-note h2 { margin-bottom: 30px; }.detail-note p:last-child { max-width: 600px; color: var(--muted); font-size: 18px; }.swatches { display: flex; gap: 12px; align-items: center; padding-bottom: 100px; }.swatches div { width: 80px; height: 80px; background: var(--accent); }.swatches div:nth-child(2) { background: #ffd8b5; }.swatches div:nth-child(3) { background: #f7c75d; }.swatches p { margin-left: 12px; color: var(--muted); }.next { display: flex; justify-content: space-between; padding-block: 55px; border-block: 1px solid var(--line); }.next a { font-size: 32px; }
@media (max-width: 760px) { .site-header, main > section, footer { width: calc(100% - 32px); } nav a:not(.nav-accent) { display: none; }.hero, .detail-hero, .notes, .archive { grid-template-columns: 1fr; gap: 50px; }.hero { padding-block: 60px 80px; }.peach-window { height: 470px; }.section-head { display: block; }.filters { margin-top: 25px; overflow-x: auto; }.look-grid, .atlas-grid { grid-template-columns: 1fr; }.look-art { height: 360px; }.detail-art { min-height: 500px; }.detail-note { grid-template-columns: 1fr; gap: 25px; }.swatches { padding-bottom: 70px; } footer { grid-template-columns: 1fr auto; } footer p { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }