Fix and correct content

html/css/new-year.css

@@ -1,25 +1,847 @@
 /* Seasonal campaign: isolated styles preserve the studio's existing pages. */
-:root{--ny-ink:#102d37;--ny-gold:#f3d398;--ny-red:#ad302e;--ny-paper:#fbf7ee}
+:root {
-.ny-nav{color:#9a302c;font-weight:700}.nav{gap:22px}.ny-home,.ny-page{background:var(--ny-paper)}
+    --ny-ink: #102d37;
-.ny-hero{background:var(--ny-ink);color:#fff6e5;position:relative;overflow:hidden;padding:70px 0 64px}.ny-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;align-items:center;position:relative;z-index:1}.ny-eyebrow{display:block;font-size:11px;letter-spacing:2px;font-weight:700;line-height:1.8}.ny-intro .ny-eyebrow{color:var(--ny-gold)}.ny-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.3vw,66px);font-weight:400;line-height:1.05;letter-spacing:-1.8px;margin:24px 0}.ny-intro h1 em{color:var(--ny-gold);font-weight:400}.ny-intro p{font-size:16px;max-width:440px;color:#e0e5df}.ny-actions{display:flex;flex-direction:column;align-items:flex-start;gap:19px;margin-top:28px}.ny-gold{background:var(--ny-gold);color:#19313a;gap:20px;border-radius:7px}.ny-gold:hover{background:#ffe8bb;transform:translateY(-2px)}.ny-text-link{font-size:13px;text-underline-offset:5px;text-decoration:underline}.ny-caption{font-size:10px;letter-spacing:.8px;color:#b3c4c7;margin-top:34px;max-width:350px}.ny-art{position:relative;margin:0}.ny-art img{border-radius:140px 140px 12px 12px;border:1px solid #d8b46d66;box-shadow:0 25px 80px #0005;width:100%;aspect-ratio:1.35;object-fit:cover}.ny-star{position:absolute;color:var(--ny-gold);animation:ny-twinkle 4s ease-in-out infinite;pointer-events:none}.star-one{left:48%;top:22px;font-size:46px}.star-two{left:42%;bottom:24px;font-size:30px;animation-delay:-2s}
+    --ny-gold: #f3d398;
-.ny-selection{padding-top:72px;padding-bottom:70px;scroll-margin-top:100px}.ny-heading{text-align:center;margin-bottom:34px}.ny-heading .ny-eyebrow{color:#8c6540}.ny-heading h2,.ny-terms h2,.ny-offer h2,.ny-closing h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,3vw,43px);line-height:1.16;color:var(--ny-ink);margin:14px 0 22px}.ny-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ny-card{border:1px solid #ddcfb9;border-radius:12px;overflow:hidden;background:#fffdf8;display:flex;flex-direction:column}.ny-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #28373214}.ny-card-picture{position:relative;overflow:hidden}.ny-card-picture img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}.ny-card:hover img{transform:scale(1.035)}.ny-card-picture span{position:absolute;bottom:14px;left:16px;background:#fff6e5;color:#702721;border-radius:4px;padding:5px 11px;font-size:13px;font-weight:700}.ny-card-body{padding:24px;flex:1;display:flex;flex-direction:column}.ny-card-body small{font-size:9px;letter-spacing:1.8px;color:#82684c}.ny-card h3{font-family:Georgia,serif;color:var(--ny-ink);font-size:26px;line-height:1.2;margin:12px 0}.ny-card p{font-size:13px;color:#655f56;margin-bottom:22px}.ny-card b{font-size:12px;color:#9c302e;display:flex;justify-content:space-between;margin-top:auto}
+    --ny-red: #ad302e;
-.ny-special{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;background:#efe6d6;border-radius:16px;padding:48px;margin-bottom:70px;scroll-margin-top:110px}.ny-discount{border:1px solid #b89b65;border-radius:160px 160px 12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:330px;text-align:center;padding:25px;color:#862e2b}.ny-discount>span{font-size:10px;letter-spacing:2px;max-width:200px}.ny-discount strong{font-family:Georgia,serif;font-size:105px;font-weight:400;line-height:1.5;white-space:nowrap}.ny-discount small{font-size:60px}.ny-terms .ny-eyebrow{color:#8d342f}.ny-terms h2{margin-top:12px;font-size:36px}.ny-terms p,.ny-terms li{font-size:13px;line-height:1.8}.ny-terms ul{margin:16px 0}.ny-terms li{padding-left:24px;position:relative;margin-bottom:9px}.ny-terms li:before{content:'✦';position:absolute;left:0;color:#9c6632}.ny-exclusion{border-top:1px solid #cfbea4;padding-top:16px;color:#744832}
+    --ny-paper: #fbf7ee
-.ny-details{padding-bottom:20px}.ny-offer{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:50px 0 70px;border-top:1px solid #dfd4c2;scroll-margin-top:95px;align-items:start}.ny-offer:nth-child(2) .ny-offer-visual{order:2}.ny-offer-visual{position:sticky;top:115px}.ny-offer-visual img{width:100%;border-radius:12px;aspect-ratio:4/3;object-fit:cover}.ny-offer-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d6c6ac;padding:16px 0;font-size:10px;letter-spacing:2px;color:#967446}.ny-offer-label span{font-size:24px}.ny-offer-copy .ny-eyebrow{color:#9c302e}.ny-offer h2{font-size:36px}.ny-offer p{font-size:14px;line-height:1.85;margin-bottom:16px;color:#554f47}.ny-offer h4{font-size:15px;color:var(--ny-ink);margin:24px 0 9px}.ny-price{border-left:3px solid #bb914e;background:#f0e8da;padding:17px 19px;font-size:14px;font-weight:600;margin:23px 0 17px}.ny-offer .ny-note{font-size:12px;color:#736557}.ny-red{background:var(--ny-red);color:white;white-space:normal;border-radius:7px;font-size:13px;gap:15px;margin-top:9px}.ny-red:hover{background:#842724;transform:translateY(-2px)}.ny-channel{display:block;font-size:10px;color:#766f65;margin-top:10px}.ny-closing{background:var(--ny-ink);color:#f8efdc;text-align:center;padding:70px 20px}.ny-closing h2{color:var(--ny-gold);font-size:48px}.ny-closing p{max-width:620px;margin:0 auto 28px}.ny-closing .ny-text-link{display:block;margin-top:20px}.ny-closing .ny-eyebrow{color:#c8b68f}.ny-page .privacy-settings{padding-top:22px}.ny-home .benefits{border-top:1px solid #ded2be}.ny-home .btn-primary{background:var(--ny-red)}
+}
-.ny-weather{position:fixed;inset:0;pointer-events:none;z-index:101;overflow:hidden}.ny-flake{position:absolute;top:-30px;left:var(--x);color:#fff;opacity:0;text-shadow:0 1px 4px #15364466;font-size:var(--size);animation:ny-fall var(--duration) linear var(--delay) infinite;will-change:transform}.ny-flake.ny-spark{color:#e7bc65}.ny-motion{position:fixed;right:16px;bottom:18px;z-index:110;background:#18343bea;border:1px solid #d4b884;color:#fff4dc;padding:9px 13px;border-radius:30px;font-size:11px;box-shadow:0 3px 16px #0002}.ny-paused .ny-flake,.ny-paused .ny-star{animation-play-state:paused}.ny-paused .ny-weather{visibility:hidden}.ny-motion:focus-visible,.ny-page a:focus-visible,.ny-home a:focus-visible{outline:3px solid #b68c40;outline-offset:4px}
+
-@keyframes ny-fall{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:0}8%{opacity:.65}92%{opacity:.65}100%{transform:translate3d(60px,105vh,0) rotate(160deg);opacity:0}}
+.ny-nav {
-@keyframes ny-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
+    color: #9a302c;
-@media(min-width:769px) and (max-width:1050px){.nav{gap:12px}.nav-link{font-size:12px}.header-inner{gap:12px}.ny-hero-grid{gap:20px}.ny-special{gap:30px}.ny-discount strong{font-size:80px}}
+    font-weight: 700
-@media(max-width:768px){.ny-hero{padding:36px 0 38px}.ny-hero-grid{grid-template-columns:1fr;gap:30px}.ny-intro h1{font-size:48px}.ny-intro p{font-size:14px}.ny-art img{aspect-ratio:16/9;border-radius:35px 35px 8px 8px}.ny-caption{margin-top:22px}.ny-selection{padding-top:44px;padding-bottom:40px}.ny-heading h2{font-size:32px}.ny-cards{grid-template-columns:1fr;gap:20px}.ny-card-picture img{aspect-ratio:16/9}.ny-card-body{padding:22px}.ny-special{grid-template-columns:1fr;gap:26px;padding:25px;margin:0 20px 35px}.ny-discount{min-height:180px;border-radius:90px 90px 8px 8px}.ny-discount strong{font-size:75px;line-height:1.2}.ny-discount small{font-size:40px}.ny-terms h2{font-size:30px}.ny-offer{grid-template-columns:1fr;gap:25px;padding:32px 0 40px}.ny-offer:nth-child(2) .ny-offer-visual{order:0}.ny-offer-visual{position:static}.ny-offer-visual img{aspect-ratio:16/10}.ny-offer h2{font-size:32px}.ny-closing{padding:45px 5px}.ny-closing h2{font-size:37px}.ny-closing p{font-size:14px}.ny-red{padding:14px 17px}.ny-motion{bottom:12px;right:10px}.ny-flake:nth-child(n+19){display:none}.star-one{left:85%;top:25px}.star-two{display:none}}
+}
-@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ny-flake,.ny-star{animation:none!important}.ny-weather{display:none}.ny-card,.ny-card img,.ny-gold,.ny-red{transition:none;transform:none!important}}
+
+.nav {
+    gap: 22px
+}
+
+.ny-home,
+.ny-page {
+    background: var(--ny-paper)
+}
+
+.ny-hero {
+    background: var(--ny-ink);
+    color: #fff6e5;
+    position: relative;
+    overflow: hidden;
+    padding: 70px 0 64px
+}
+
+.ny-hero-grid {
+    display: grid;
+    grid-template-columns: .85fr 1.15fr;
+    gap: 38px;
+    align-items: center;
+    position: relative;
+    z-index: 1
+}
+
+.ny-eyebrow {
+    display: block;
+    font-size: 11px;
+    letter-spacing: 2px;
+    font-weight: 700;
+    line-height: 1.8
+}
+
+.ny-intro .ny-eyebrow {
+    color: var(--ny-gold)
+}
+
+.ny-intro h1 {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: clamp(42px, 4.3vw, 66px);
+    font-weight: 400;
+    line-height: 1.05;
+    letter-spacing: -1.8px;
+    margin: 24px 0
+}
+
+.ny-intro h1 em {
+    color: var(--ny-gold);
+    font-weight: 400
+}
+
+.ny-intro p {
+    font-size: 16px;
+    max-width: 440px;
+    color: #e0e5df
+}
+
+.ny-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 19px;
+    margin-top: 28px
+}
+
+.ny-gold {
+    background: var(--ny-gold);
+    color: #19313a;
+    gap: 20px;
+    border-radius: 7px
+}
+
+.ny-gold:hover {
+    background: #ffe8bb;
+    transform: translateY(-2px)
+}
+
+.ny-text-link {
+    font-size: 13px;
+    text-underline-offset: 5px;
+    text-decoration: underline
+}
+
+.ny-caption {
+    font-size: 10px;
+    letter-spacing: .8px;
+    color: #b3c4c7;
+    margin-top: 34px;
+    max-width: 350px
+}
+
+.ny-art {
+    position: relative;
+    margin: 0
+}
+
+.ny-art img {
+    border-radius: 140px 140px 12px 12px;
+    border: 1px solid #d8b46d66;
+    box-shadow: 0 25px 80px #0005;
+    width: 100%;
+    aspect-ratio: 1.35;
+    object-fit: cover
+}
+
+.ny-star {
+    position: absolute;
+    color: var(--ny-gold);
+    animation: ny-twinkle 4s ease-in-out infinite;
+    pointer-events: none
+}
+
+.star-one {
+    left: 48%;
+    top: 22px;
+    font-size: 46px
+}
+
+.star-two {
+    left: 42%;
+    bottom: 24px;
+    font-size: 30px;
+    animation-delay: -2s
+}
+
+.ny-selection {
+    padding-top: 72px;
+    padding-bottom: 70px;
+    scroll-margin-top: 100px
+}
+
+.ny-heading {
+    text-align: center;
+    margin-bottom: 34px
+}
+
+.ny-heading .ny-eyebrow {
+    color: #8c6540
+}
+
+.ny-heading h2,
+.ny-terms h2,
+.ny-offer h2,
+.ny-closing h2 {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-weight: 400;
+    font-size: clamp(30px, 3vw, 43px);
+    line-height: 1.16;
+    color: var(--ny-ink);
+    margin: 14px 0 22px
+}
+
+.ny-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 22px
+}
+
+.ny-card {
+    border: 1px solid #ddcfb9;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fffdf8;
+    display: flex;
+    flex-direction: column
+}
+
+.ny-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 16px 35px #28373214
+}
+
+.ny-card-picture {
+    position: relative;
+    overflow: hidden
+}
+
+.ny-card-picture img {
+    width: 100%;
+    aspect-ratio: 16/10;
+    object-fit: cover;
+    transition: transform .4s
+}
+
+.ny-card:hover img {
+    transform: scale(1.035)
+}
+
+.ny-card-picture span {
+    position: absolute;
+    bottom: 14px;
+    left: 16px;
+    background: #fff6e5;
+    color: #702721;
+    border-radius: 4px;
+    padding: 5px 11px;
+    font-size: 13px;
+    font-weight: 700
+}
+
+.ny-card-body {
+    padding: 24px;
+    flex: 1;
+    display: flex;
+    flex-direction: column
+}
+
+.ny-card-body small {
+    font-size: 9px;
+    letter-spacing: 1.8px;
+    color: #82684c
+}
+
+.ny-card h3 {
+    font-family: Georgia, serif;
+    color: var(--ny-ink);
+    font-size: 26px;
+    line-height: 1.2;
+    margin: 12px 0
+}
+
+.ny-card p {
+    font-size: 13px;
+    color: #655f56;
+    margin-bottom: 22px
+}
+
+.ny-card b {
+    font-size: 12px;
+    color: #9c302e;
+    display: flex;
+    justify-content: space-between;
+    margin-top: auto
+}
+
+.ny-special {
+    display: grid;
+    grid-template-columns: .7fr 1.3fr;
+    gap: 60px;
+    background: #efe6d6;
+    border-radius: 16px;
+    padding: 48px;
+    margin-bottom: 70px;
+    scroll-margin-top: 110px
+}
+
+.ny-discount {
+    border: 1px solid #b89b65;
+    border-radius: 160px 160px 12px 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 330px;
+    text-align: center;
+    padding: 25px;
+    color: #862e2b
+}
+
+.ny-discount>span {
+    font-size: 10px;
+    letter-spacing: 2px;
+    max-width: 200px
+}
+
+.ny-discount strong {
+    font-family: Georgia, serif;
+    font-size: 105px;
+    font-weight: 400;
+    line-height: 1.5;
+    white-space: nowrap
+}
+
+.ny-discount small {
+    font-size: 60px
+}
+
+.ny-terms .ny-eyebrow {
+    color: #8d342f
+}
+
+.ny-terms h2 {
+    margin-top: 12px;
+    font-size: 36px
+}
+
+.ny-terms p,
+.ny-terms li {
+    font-size: 13px;
+    line-height: 1.8
+}
+
+.ny-terms ul {
+    margin: 16px 0
+}
+
+.ny-terms li {
+    padding-left: 24px;
+    position: relative;
+    margin-bottom: 9px
+}
+
+.ny-terms li:before {
+    content: '✦';
+    position: absolute;
+    left: 0;
+    color: #9c6632
+}
+
+.ny-exclusion {
+    border-top: 1px solid #cfbea4;
+    padding-top: 16px;
+    color: #744832
+}
+
+.ny-details {
+    padding-bottom: 20px
+}
+
+.ny-offer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 55px;
+    padding: 50px 0 70px;
+    border-top: 1px solid #dfd4c2;
+    scroll-margin-top: 95px;
+    align-items: start
+}
+
+.ny-offer:nth-child(2) .ny-offer-visual {
+    order: 2
+}
+
+.ny-offer-visual {
+    position: sticky;
+    top: 115px
+}
+
+.ny-offer-visual img {
+    width: 100%;
+    border-radius: 12px;
+    aspect-ratio: 4/3;
+    object-fit: cover
+}
+
+.ny-offer-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #d6c6ac;
+    padding: 16px 0;
+    font-size: 10px;
+    letter-spacing: 2px;
+    color: #967446
+}
+
+.ny-offer-label span {
+    font-size: 24px
+}
+
+.ny-offer-copy .ny-eyebrow {
+    color: #9c302e
+}
+
+.ny-offer h2 {
+    font-size: 36px
+}
+
+.ny-offer p {
+    font-size: 14px;
+    line-height: 1.85;
+    margin-bottom: 16px;
+    color: #554f47
+}
+
+.ny-offer h4 {
+    font-size: 15px;
+    color: var(--ny-ink);
+    margin: 24px 0 9px
+}
+
+.ny-price {
+    border-left: 3px solid #bb914e;
+    background: #f0e8da;
+    padding: 17px 19px;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 23px 0 17px
+}
+
+.ny-offer .ny-note {
+    font-size: 12px;
+    color: #736557
+}
+
+.ny-red {
+    background: var(--ny-red);
+    color: white;
+    white-space: normal;
+    border-radius: 7px;
+    font-size: 13px;
+    gap: 15px;
+    margin-top: 9px
+}
+
+.ny-red:hover {
+    background: #842724;
+    transform: translateY(-2px)
+}
+
+.ny-channel {
+    display: block;
+    font-size: 10px;
+    color: #766f65;
+    margin-top: 10px
+}
+
+.ny-closing {
+    background: var(--ny-ink);
+    color: #f8efdc;
+    text-align: center;
+    padding: 70px 20px
+}
+
+.ny-closing h2 {
+    color: var(--ny-gold);
+    font-size: 48px
+}
+
+.ny-closing p {
+    max-width: 620px;
+    margin: 0 auto 28px
+}
+
+.ny-closing .ny-text-link {
+    display: block;
+    margin-top: 20px
+}
+
+.ny-closing .ny-eyebrow {
+    color: #c8b68f
+}
+
+.ny-page .privacy-settings {
+    padding-top: 22px
+}
+
+.ny-home .benefits {
+    border-top: 1px solid #ded2be
+}
+
+.ny-home .btn-primary {
+    background: var(--ny-red)
+}
+
+.ny-weather {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 101;
+    overflow: hidden
+}
+
+.ny-flake {
+    position: absolute;
+    top: -30px;
+    left: var(--x);
+    color: #fff;
+    opacity: 0;
+    text-shadow: 0 1px 4px #15364466;
+    font-size: var(--size);
+    animation: ny-fall var(--duration) linear var(--delay) infinite;
+    will-change: transform
+}
+
+.ny-flake.ny-spark {
+    color: #e7bc65
+}
+
+.ny-motion {
+    position: fixed;
+    right: 16px;
+    bottom: 18px;
+    z-index: 110;
+    background: #18343bea;
+    border: 1px solid #d4b884;
+    color: #fff4dc;
+    padding: 9px 13px;
+    border-radius: 30px;
+    font-size: 11px;
+    box-shadow: 0 3px 16px #0002
+}
+
+.ny-paused .ny-flake,
+.ny-paused .ny-star {
+    animation-play-state: paused
+}
+
+.ny-paused .ny-weather {
+    visibility: hidden
+}
+
+.ny-motion:focus-visible,
+.ny-page a:focus-visible,
+.ny-home a:focus-visible {
+    outline: 3px solid #b68c40;
+    outline-offset: 4px
+}
+
+@keyframes ny-fall {
+    0% {
+        transform: translate3d(0, -30px, 0) rotate(0);
+        opacity: 0
+    }
+
+    8% {
+        opacity: .65
+    }
+
+    92% {
+        opacity: .65
+    }
+
+    100% {
+        transform: translate3d(60px, 105vh, 0) rotate(160deg);
+        opacity: 0
+    }
+}
+
+@keyframes ny-twinkle {
+
+    0%,
+    100% {
+        opacity: .35;
+        transform: scale(.8)
+    }
+
+    50% {
+        opacity: 1;
+        transform: scale(1.1)
+    }
+}
+
+@media(min-width:769px) and (max-width:1050px) {
+    .nav {
+        gap: 12px
+    }
+
+    .nav-link {
+        font-size: 12px
+    }
+
+    .header-inner {
+        gap: 12px
+    }
+
+    .ny-hero-grid {
+        gap: 20px
+    }
+
+    .ny-special {
+        gap: 30px
+    }
+
+    .ny-discount strong {
+        font-size: 80px
+    }
+}
+
+@media(max-width:768px) {
+    .ny-hero {
+        padding: 36px 0 38px
+    }
+
+    .ny-hero-grid {
+        grid-template-columns: 1fr;
+        gap: 30px
+    }
+
+    .ny-intro h1 {
+        font-size: 48px
+    }
+
+    .ny-intro p {
+        font-size: 14px
+    }
+
+    .ny-art img {
+        aspect-ratio: 16/9;
+        border-radius: 35px 35px 8px 8px
+    }
+
+    .ny-caption {
+        margin-top: 22px
+    }
+
+    .ny-selection {
+        padding-top: 44px;
+        padding-bottom: 40px
+    }
+
+    .ny-heading h2 {
+        font-size: 32px
+    }
+
+    .ny-cards {
+        grid-template-columns: 1fr;
+        gap: 20px
+    }
+
+    .ny-card-picture img {
+        aspect-ratio: 16/9
+    }
+
+    .ny-card-body {
+        padding: 22px
+    }
+
+    .ny-special {
+        grid-template-columns: 1fr;
+        gap: 26px;
+        padding: 25px;
+        margin: 0 20px 35px
+    }
+
+    .ny-discount {
+        min-height: 180px;
+        border-radius: 90px 90px 8px 8px
+    }
+
+    .ny-discount strong {
+        font-size: 75px;
+        line-height: 1.2
+    }
+
+    .ny-discount small {
+        font-size: 40px
+    }
+
+    .ny-terms h2 {
+        font-size: 30px
+    }
+
+    .ny-offer {
+        grid-template-columns: 1fr;
+        gap: 25px;
+        padding: 32px 0 40px
+    }
+
+    .ny-offer:nth-child(2) .ny-offer-visual {
+        order: 0
+    }
+
+    .ny-offer-visual {
+        position: static
+    }
+
+    .ny-offer-visual img {
+        aspect-ratio: 16/10
+    }
+
+    .ny-offer h2 {
+        font-size: 32px
+    }
+
+    .ny-closing {
+        padding: 45px 5px
+    }
+
+    .ny-closing h2 {
+        font-size: 37px
+    }
+
+    .ny-closing p {
+        font-size: 14px
+    }
+
+    .ny-red {
+        padding: 14px 17px
+    }
+
+    .ny-motion {
+        bottom: 12px;
+        right: 10px
+    }
+
+    .ny-flake:nth-child(n+19) {
+        display: none
+    }
+
+    .star-one {
+        left: 85%;
+        top: 25px
+    }
+
+    .star-two {
+        display: none
+    }
+}
+
+@media(prefers-reduced-motion:reduce) {
+    html {
+        scroll-behavior: auto
+    }
+
+    .ny-flake,
+    .ny-star {
+        animation: none !important
+    }
+
+    .ny-weather {
+        display: none
+    }
+
+    .ny-card,
+    .ny-card img,
+    .ny-gold,
+    .ny-red {
+        transition: none;
+        transform: none !important
+    }
+}
+
 /* Keep the supplied artwork's lettering fully visible at every width. */
-.ny-art img{aspect-ratio:1672/941;object-fit:contain;border-radius:55px 55px 10px 10px}
+.ny-art img {
-@media(max-width:768px){.ny-art img{border-radius:30px 30px 8px 8px}}
+    aspect-ratio: 1672/941;
+    object-fit: contain;
+    border-radius: 55px 55px 10px 10px
+}
+
+@media(max-width:768px) {
+    .ny-art img {
+        border-radius: 30px 30px 8px 8px
+    }
+}
+
 /* Keep the closing order button distinct from the red CTA panel. */
-.ny-home .cta-box .btn-primary{background:#fff8e9;color:#842724;border:2px solid #fff8e9;box-shadow:0 5px 18px #65100f22}
+.ny-home .cta-box .btn-primary {
-.ny-home .cta-box .btn-primary:hover{background:#f3d398;color:#57201d;border-color:#f3d398}
+    background: #fff8e9;
-.ny-home .ny-intro h1{font-size:clamp(30px,3.1vw,46px);letter-spacing:-1.2px;line-height:1.15}
+    color: #842724;
-.ny-hero{scroll-margin-top:90px}
+    border: 2px solid #fff8e9;
-@media(max-width:768px){.ny-home .ny-intro h1{font-size:clamp(27px,7.5vw,42px);letter-spacing:-.8px}}
+    box-shadow: 0 5px 18px #65100f22
-@media(max-width:480px){.ny-home .btn{max-width:100%;white-space:normal;text-align:center}.ny-home .for-whom-card .btn{padding-left:18px;padding-right:18px}}
+}
-.ny-video-section{padding-top:10px;padding-bottom:65px;scroll-margin-top:100px}.ny-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ny-video-section .ny-heading p{color:#655f56;font-size:14px}.ny-work .work-video-preview{object-fit:contain;background:#10252e}.ny-work .work-info h3{font-family:Georgia,serif;font-size:26px;color:var(--ny-ink)}.ny-work .work-info p{margin-bottom:0}.ny-all-works{text-align:center;margin-top:26px}.ny-video-section .work-tag{background:#efe6d6;color:#842724}.ny-work{scroll-margin-top:110px}
+
-@media(max-width:768px){.ny-video-grid{grid-template-columns:1fr}.ny-video-section{padding-bottom:40px}}
+.ny-home .cta-box .btn-primary:hover {
+    background: #f3d398;
+    color: #57201d;
+    border-color: #f3d398
+}
+
+.ny-home .ny-intro h1 {
+    font-size: clamp(30px, 3.1vw, 46px);
+    letter-spacing: -1.2px;
+    line-height: 1.15
+}
+
+.ny-hero {
+    scroll-margin-top: 90px
+}
+
+@media(max-width:768px) {
+    .ny-home .ny-intro h1 {
+        font-size: clamp(27px, 7.5vw, 42px);
+        letter-spacing: -.8px
+    }
+}
+
+@media(max-width:480px) {
+    .ny-home .btn {
+        max-width: 100%;
+        white-space: normal;
+        text-align: center
+    }
+
+    .ny-home .for-whom-card .btn {
+        padding-left: 18px;
+        padding-right: 18px
+    }
+}
+
+.ny-video-section {
+    padding-top: 10px;
+    padding-bottom: 65px;
+    scroll-margin-top: 100px
+}
+
+.ny-video-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+}
+
+.ny-video-section .ny-heading p {
+    color: #655f56;
+    font-size: 14px
+}
+
+.ny-work .work-video-preview {
+    object-fit: contain;
+    background: #10252e
+}
+
+.ny-work .work-info h3 {
+    font-family: Georgia, serif;
+    font-size: 26px;
+    color: var(--ny-ink)
+}
+
+.ny-work .work-info p {
+    margin-bottom: 0
+}
+
+.ny-all-works {
+    text-align: center;
+    margin-top: 26px
+}
+
+.ny-video-section .work-tag {
+    background: #efe6d6;
+    color: #842724
+}
+
+.ny-work {
+    scroll-margin-top: 110px
+}
+
+@media(max-width:768px) {
+    .ny-video-grid {
+        grid-template-columns: 1fr
+    }
+
+    .ny-video-section {
+        padding-bottom: 40px
+    }
+}

html/index.html

@@ -290,10 +290,11 @@
                                         <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
                                     </svg></span><span class="work-video-label">Волшебная снежинка ·
                                     1:18</span></button></div>
-                        <div class="work-info"><span class="work-tag">Новогоднее поздравление</span>
+                        <div class="work-info"><span class="work-tag">🌲 Новогоднее поздравление</span>
                             <h3>Новогодний экспресс</h3>
-                            <p>Готовая новогодняя история с персонализацией для ребёнка. Посмотрите пример
+                            <p>Короткий мультфильм-поздравление для ребенка с его персонажем. Создает ощущение
-                                мультпоздравления.</p>
+                                уникальности и волшебства в реальной жизни: именно за ним следит Дедушка Мороз, именно
+                                его выбрала волшебная снежинка, в его квартире спрятан настоящий подарок.</p>
                         </div>
                         <noscript>
                             <p><a href="/video/video-8.webm">Смотреть «Новогодний экспресс»</a></p>
@@ -308,11 +309,13 @@
                                 <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
                                         height="28">
                                         <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
-                                    </svg></span><span class="work-video-label">Сказка о маминой любви ·
+                                    </svg></span><span class="work-video-label">Два зайчика маминой любви. ·
                                     2:45</span></button></div>
-                        <div class="work-info"><span class="work-tag">Базовый пакет</span>
+                        <div class="work-info"><span class="work-tag">🐇 Новогодняя сказка</span>
                             <h3>Новогодняя сказка</h3>
-                            <p>Свежий пример ролика базового пакета «Новогодняя сказка».</p>
+                            <p>Сюрприз для двух маленьких деток, маме которых пришлось уехать от них. Мультфильм
+                                помогает донести детям, что мама их любит и добавляет волшебство в новогодний подарок-
+                                зайчиков.</p>
                         </div>
                         <noscript>
                             <p><a href="/video/video-7.webm">Смотреть «Новогодняя сказка»</a></p>

html/portfolio.html

@@ -204,7 +204,7 @@
             <div class="container">
                 <h2 class="section-title">Мультфильмы и рекламные ролики</h2>
                 <div class="portfolio-grid">
-                    <article class="work-card ny-work" id="work-8">
+                    <article class="work-card" id="work-8">
                         <div class="work-media"><button class="work-video" type="button"
                                 data-video="/video/video-8.webm" data-title="Новогодний экспресс" data-goal="video_open"
                                 aria-label="Смотреть видео: Новогодний экспресс">
@@ -213,18 +213,24 @@
                                 <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
                                         height="28">
                                         <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
-                                    </svg></span><span class="work-video-label">Смотреть пример · 1:18</span></button>
+                                    </svg></span><span class="work-video-label">Волшебная снежинка</span></button>
                         </div>
-                        <div class="work-info"><span class="work-tag">🌲 Новогоднее поздравление</span>
+                        <div class="work-info">
+                            <span class="work-tag">🌲 Новогоднее поздравление</span>
                             <h3>Новогодний экспресс</h3>
-                            <p>Готовая новогодняя история с персонализацией для ребёнка. Посмотрите пример
+                            <p>Короткий мультфильм-поздравление для ребенка с его персонажем. Создает ощущение
-                                мультпоздравления.</p>
+                                уникальности и волшебства в реальной жизни: именно за ним следит Дедушка Мороз, именно
+                                его выбрала волшебная снежинка, в его квартире спрятан настоящий подарок.</p>
+                            <div class="work-meta">
+                                <span>Тариф: «Новогодний экспресс»</span>
+                                <span>499 ₽</span>
+                            </div>
                         </div>
                         <noscript>
                             <p><a href="/video/video-8.webm">Смотреть «Новогодний экспресс»</a></p>
                         </noscript>
                     </article>
-                    <article class="work-card ny-work" id="work-7">
+                    <article class="work-card" id="work-7">
                         <div class="work-media"><button class="work-video" type="button"
                                 data-video="/video/video-7.webm" data-title="Новогодняя сказка" data-goal="video_open"
                                 aria-label="Смотреть видео: Новогодняя сказка">
@@ -233,11 +239,19 @@
                                 <span class="work-play" aria-hidden="true"><svg viewBox="0 0 24 24" width="28"
                                         height="28">
                                         <path d="M8 5.5v13l10-6.5z" fill="currentColor"></path>
-                                    </svg></span><span class="work-video-label">Смотреть пример · 2:45</span></button>
+                                    </svg></span><span class="work-video-label">Два зайчика маминой
+                                    любви</span></button>
                         </div>
-                        <div class="work-info"><span class="work-tag">🐇 Детская сказка</span>
+                        <div class="work-info">
+                            <span class="work-tag">🐇 Новогодняя сказка</span>
                             <h3>Новогодняя сказка</h3>
-                            <p>Свежий пример ролика базового пакета «Новогодняя сказка».</p>
+                            <p>Сюрприз для двух маленьких деток, маме которых пришлось уехать от них. Мультфильм
+                                помогает донести детям, что мама их любит и добавляет волшебство в новогодний подарок-
+                                зайчиков.</p>
+                            <div class="work-meta">
+                                <span>Тариф: «Сказка»</span>
+                                <span>12 000 ₽</span>
+                            </div>
                         </div>
                         <noscript>
                             <p><a href="/video/video-7.webm">Смотреть «Новогодняя сказка»</a></p>