/* SIX по мотивам fridaflower.ru: олива, крем, терракота, узкая антиква, моно, рваная бумага, круглые кнопки */
:root { --olive: #4B5524; --cream: #F4ECCF; --rust: #A84A23; --ink: #3A3317; --s: 'Oranienbaum', 'Times New Roman', serif; --m: 'IBM Plex Mono', ui-monospace, monospace; --pad: clamp(16px, 2vw, 30px); --ease: cubic-bezier(.16, 1, .3, 1) }
* { box-sizing: border-box; margin: 0; padding: 0 }
body { background: var(--cream); color: var(--ink); font: 400 13px/1.55 var(--m); -webkit-font-smoothing: antialiased; overflow-x: clip }
img { display: block; width: 100%; height: 100%; object-fit: cover }
a { color: inherit }
.mono { font: 400 12px/1.6 var(--m) } .up { text-transform: uppercase; letter-spacing: .16em } .dim { opacity: .6 } .center { text-align: center; max-width: 46ch; margin: 0 auto }
.ttl { font: 400 clamp(40px, 4.6vw, 76px)/.98 var(--s); text-transform: uppercase; text-align: center; letter-spacing: .01em }
.ttl-l { text-align: left } .ttl-s { font-size: clamp(26px, 2.5vw, 40px) }
.logo-big { font: 400 clamp(110px, 13vw, 230px)/.82 var(--s); letter-spacing: .02em }
.circle { display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: var(--rust); color: var(--cream); font: 400 12px var(--m); text-decoration: none; transition: transform .6s var(--ease) }
.circle:hover { transform: scale(1.08) rotate(-8deg) } .circle-cream { background: var(--cream); color: var(--olive) }
.pill { background: var(--rust); color: var(--cream); padding: 4px 10px; border-radius: 3px; font: 400 11px var(--m); text-decoration: none }
.obtn { display: block; text-align: center; padding: 9px; background: var(--olive); color: var(--cream); text-decoration: none; transition: background .3s } .obtn:hover { background: var(--rust) }
.torn { display: block; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(22px, 3vw, 46px); fill: var(--cream); z-index: 3 }

.ticker { background: var(--rust); color: var(--cream); overflow: hidden; padding: 5px 0 } .ticker p { white-space: nowrap; width: max-content; font: 400 11px var(--m); animation: run 50s linear infinite } @keyframes run { to { transform: translateX(-50%) } }
.hd { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--pad); background: var(--olive); color: var(--cream) }
.hd-nav { display: flex; gap: clamp(12px, 3vw, 46px); font: 400 11px var(--m) } .hd-nav a { text-decoration: none } .hd-nav a:hover { text-decoration: underline }

/* 01 */
.s1 { position: relative; display: grid; min-height: calc(100svh - 70px); background: var(--olive); color: var(--cream) }
.s1-l { display: grid; align-content: center; justify-items: center; gap: 22px; text-align: center; padding: 60px var(--pad) 120px }
.s1-l .mono:last-child { max-width: 30ch }
.s1-p { overflow: hidden; min-height: 50vh } .s1-p img { transform: scale(1.06); will-change: transform }
.s1-c { position: absolute; left: 16%; bottom: 2%; z-index: 4 }
@media (min-width: 900px) { .s1 { grid-template-columns: 1.25fr 1fr 1fr } .s1-c { left: 13% } }
@media (max-width: 899px) { .s1-p { min-height: 46vh } .p2 { display: none } .s1-c { left: auto; right: 20px; bottom: 30px } }

/* 02 */
.s2 { padding: clamp(60px, 8vw, 110px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; overflow: hidden }
.s2 .ttl, .s2 .mono { padding: 0 } .reel { justify-self: start }
.sprig { width: 40px; height: 80px; color: var(--olive); margin-bottom: 6px }
.reel { display: flex; gap: 10px; width: max-content; padding: 20px var(--pad) 0; will-change: transform }
.reel figure { position: relative; width: clamp(140px, 15vw, 230px); aspect-ratio: 3 / 4; overflow: hidden }
.reel span { position: absolute; left: 8px; top: 8px; z-index: 1; background: var(--cream); padding: 0 6px }
.reel img { transition: transform 1s var(--ease) } .reel figure:hover img { transform: scale(1.07) }

/* 03 */
.s3 { padding: clamp(50px, 7vw, 100px) var(--pad) }
.s3-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 34px } .s3-head a { text-decoration: underline }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.card figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 10px } .card img { transition: transform 1.2s var(--ease) } .card:hover img { transform: scale(1.06) }
.card p { text-align: center } .price { margin: 2px 0 10px }
.heart { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--cream); color: var(--rust); font-size: 16px; cursor: pointer; transition: transform .3s } .heart.on { background: var(--rust); color: var(--cream); transform: scale(1.12) }
.note { margin-top: 20px }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, 1fr) } }

/* 04 */
.s4 { display: grid; min-height: 100svh }
.s4-big { overflow: hidden; min-height: 50vh }
.s4-panel { background: var(--rust); color: var(--cream); display: grid; align-content: center; justify-items: center; gap: 26px; padding: 60px var(--pad); text-align: center; perspective: 900px }
.s4-inset { width: min(260px, 60vw); aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgba(244, 236, 207, .4); padding: 10px; transform: rotateY(-25deg) rotateZ(3deg); will-change: transform }
.s4-panel .mono { max-width: 36ch }
@media (min-width: 900px) { .s4 { grid-template-columns: 1fr 1fr } }

/* 05 */
.s5 { padding: clamp(60px, 8vw, 110px) var(--pad); display: grid; gap: 34px }
.world { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px } .world > * { overflow: hidden; min-height: 200px } @media (max-width: 899px) { .w5, .w6 { display: none } }
.w4 { background: var(--rust); color: var(--cream); display: grid; place-items: center; padding: 20px; text-align: center }
@media (min-width: 900px) { .world { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; grid-template-rows: 300px 300px } .w1 { grid-row: span 2 } .w6 { grid-row: span 2 } }

/* 06 */
.ft { position: relative; background: var(--olive); color: var(--cream); padding: clamp(70px, 8vw, 120px) var(--pad) 24px }
.torn-top { top: -1px; bottom: auto; fill: var(--cream) }
.ft-in { display: grid; gap: 34px; align-items: end }
.ft-col { display: grid; gap: 4px } .ft-col a { text-decoration: none } .ft-col a:hover { text-decoration: underline }
.legal { margin-top: 40px; font-size: 10px }
@media (min-width: 900px) { .ft-in { grid-template-columns: 1.4fr 1fr 1fr auto } }
.badge { position: fixed; right: 12px; bottom: 12px; z-index: 60; background: var(--cream); color: var(--ink); border: 1px solid var(--olive); padding: 6px 10px; font-size: 10px; text-decoration: none }
[data-up] { opacity: 0; transform: translateY(30px); transition: opacity 1s, transform 1.1s var(--ease) } [data-up].is-in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { [data-up] { opacity: 1; transform: none } .ticker p { animation: none } }