/* Biblioteca da Beca — site styles. Fonts are self-hosted (no requests to Google). */
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-n4.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka-n7.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-n4.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-n7.woff2') format('woff2'); font-weight: 700 1000; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-i4.woff2') format('woff2'); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-i7.woff2') format('woff2'); font-weight: 700 1000; font-style: italic; font-display: swap; }

:root {
  --violet: #49087c; --violet-deep: #2b0754; --violet-2: #62109b;
  --magenta: #c10dd6; --magenta-hot: #ed30d6; --lilac: #c664ef;
  --lavender: #f3e8ff; --cream: #fff4e6; --cream2: #fcf8fb;
  --ink: #35164f; --muted: #6b5779; --white: #fff;
  --radius: 26px; --radius-lg: 40px; --max: 1240px;
  --shadow: 0 18px 50px rgba(64, 9, 97, .12);
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream2); color: var(--ink); font-family: 'Nunito', system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
body.modal-open { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #7aa9f9; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: clamp(3.1rem, 5.8vw, 5.8rem); }
h2 { font-size: clamp(2.25rem, 4.2vw, 3.7rem); }
h3 { font-size: 1.55rem; }
.wrap { width: min(calc(100% - 52px), var(--max)); margin: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: #fff; color: var(--violet); padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.skip-link:focus { top: 12px; }
.eyebrow { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 900; color: #e5bbff; }
.eyebrow.dark { color: #9843b6; }
.section { padding: 100px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin-bottom: 35px; }
.section-head p { max-width: 410px; color: var(--muted); margin: 0; }
.section-head h2 { margin-bottom: 0; }
.muted { color: var(--muted); }
.shine { color: #ff8a8a; }   /* the peach of "Beca" in the logo (Josip, 20 Oct 2026) */
.accent { color: var(--magenta); }
.small { font-size: .89rem; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; padding: 8px 16px; color: #fff; font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 13px 25px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; font-size: .98rem; line-height: 1.15; font-weight: 900; transition: transform .2s, background .2s, box-shadow .2s; text-align: center; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--magenta); color: #fff; box-shadow: 0 9px 0 rgba(42, 3, 78, .22); }
.btn-primary:hover { background: #db19db; }
.btn-outline { color: #fff; border-color: rgba(255, 255, 255, .66); background: rgba(43, 7, 84, .25); }
.btn-outline:hover { background: rgba(255, 255, 255, .17); }
.btn-outline-dark { border-color: #cda5d8; color: var(--violet); background: transparent; }
.btn-outline-dark:hover { background: #f1e6f9; }
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 32px; }
.arrow { font-weight: 900; font-size: 1.25rem; line-height: 1; }

/* Header */
.site-header { position: relative; z-index: 30; background: var(--violet-deep); color: #fff; }
.nav { min-height: 94px; display: flex; align-items: center; gap: 28px; }
.brand { flex-shrink: 0; display: block; padding: 6px 0; position: relative; z-index: 2; }   /* above the open phone menu */
/* The cloud logo from the footer, hanging below the bar (no sticker outline: Josip, 20 Oct 2026) */
.brand img { height: 118px; width: auto; margin: 10px 0 -46px; filter: drop-shadow(0 5px 10px rgba(10, 0, 30, .35)); transition: transform .2s; }
.brand:hover img { transform: rotate(-2deg) scale(1.03); }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.1vw, 30px); margin-left: auto; }
.nav-links a { font-weight: 800; font-size: .94rem; text-decoration: none; color: #edd8fa; white-space: nowrap; padding: 8px 0; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: #fff; }
.nav-links a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--magenta-hot); }
.socials { display: flex; gap: 8px; align-items: center; }
.socials a { height: 36px; width: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #9165b0; background: rgba(255, 255, 255, .07); transition: transform .2s, background .2s; color: #fff; }
.socials a:hover { transform: translateY(-3px); background: var(--magenta); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.menu-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid #8b5ca9; border-radius: 14px; color: #fff; font-size: 24px; line-height: 1; padding: 9px 14px; }

/* Home hero: night sky and cast from the YouTube banner master (YTBanner-03.psd) */
.hero { position: relative; overflow: hidden; color: #fff; background: #3d0a78; }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(43, 7, 84, .72) 0%, rgba(43, 7, 84, .35) 45%, rgba(43, 7, 84, 0) 70%); }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 620px; align-items: end; gap: 18px; }
.hero-copy { padding: 86px 0 120px; align-self: center; }
.hero h1 { margin: 26px 0 24px; max-width: 670px; text-shadow: 0 3px 18px rgba(30, 0, 60, .35); }
.hero-copy p { max-width: 530px; color: #f1e4fb; font-size: 1.2rem; line-height: 1.6; }
.hero-art { display: flex; justify-content: center; align-items: end; padding-top: 40px; }
/* Beca's photo ends in a straight line at her knees: push it below the hero's bottom edge, which crops it (overflow: hidden).
   Scaled 1.11x and turned 6deg back upright (the banner PSD tilts her 13deg) around her face, so the face stays put and
   the skirt goes further down: about 50% more of it is hidden (Josip, 24 Oct 2026). */
.hero-art img { width: min(100%, 460px); transform-origin: 47.4% 16.8%; transform: translateY(14%) rotate(6deg) scale(1.11); }
.hero-bottom { position: absolute; bottom: -1px; left: 0; right: 0; z-index: 3; height: 45px; background: var(--cream2); clip-path: polygon(0 46%, 8% 59%, 19% 45%, 31% 65%, 44% 43%, 59% 65%, 73% 47%, 87% 65%, 100% 47%, 100% 100%, 0 100%); }

/* Playlist cards (covers are the team's playlist covers, 9:16) */
.featured { background: var(--cream2); }
.playlist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.playlist-grid.featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.playlist-card { min-width: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #efe2f6; overflow: hidden; transition: transform .22s, box-shadow .22s; }
.playlist-card[hidden] { display: none; }
.playlist-card:hover { transform: translateY(-7px); box-shadow: 0 24px 50px rgba(64, 9, 97, .2); }
.playlist-card button { display: block; border: 0; background: transparent; text-align: left; width: 100%; padding: 0; color: inherit; }
.thumb { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: linear-gradient(160deg, #bd73ef, #641a9b); }
.featured-grid .thumb { aspect-ratio: 4 / 5; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .35s; }
.playlist-card:hover .thumb img { transform: scale(1.04); }
.play-dot { position: absolute; z-index: 1; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; place-items: center; background: var(--magenta); color: #fff; width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 20px rgba(33, 0, 54, .35); font-size: 22px; padding-left: 3px; transition: transform .2s; }
.playlist-card:hover .play-dot { transform: translateX(-50%) scale(1.08); }
.playlist-info { padding: 21px 21px 24px; }
.playlist-info h3 { font-size: 1.32rem; margin-bottom: 7px; min-height: 2.64em; }
.playlist-info span { color: #824b99; font-weight: 800; font-size: .88rem; }
.section-action { text-align: center; margin-top: 39px; }
.player-note { margin-top: 30px; }

/* About blocks */
.about-band { background: var(--lavender); position: relative; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); align-items: center; gap: 50px; }
.avatar-wrap { position: relative; min-height: 455px; display: grid; place-items: center; }
.avatar-wrap::before { content: ''; position: absolute; inset: 10% 14%; background: #ffdce9; border-radius: 48% 52% 41% 59%; transform: rotate(11deg); box-shadow: 0 18px 0 #e7cbf8; }
.avatar-wrap img { width: min(100%, 450px); position: relative; z-index: 1; filter: drop-shadow(0 21px 18px rgba(81, 18, 122, .17)); }
/* Home: Beca pops out of a starry card; the photo's waist cut sits on the card's bottom edge */
.portal { position: relative; width: min(100%, 470px); margin: 0 auto; }
.portal::before { content: ''; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; border-radius: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Cpath opacity='.55' d='M40 18l4 12 12 4-12 4-4 12-4-12-12-4 12-4z'/%3E%3Cpath opacity='.35' d='M170 60l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath opacity='.45' d='M120 160l5 14 14 5-14 5-5 14-5-14-14-5 14-5z'/%3E%3Ccircle opacity='.5' cx='190' cy='150' r='3'/%3E%3Ccircle opacity='.4' cx='70' cy='120' r='2.5'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 50% 30%, #ffe1f1 0%, #f6a9d6 45%, #b467e8 100%); box-shadow: 0 16px 0 #e2c6f6; }
.portal img { position: relative; z-index: 1; width: 100%; border-radius: 0 0 40px 40px; filter: drop-shadow(0 10px 14px rgba(81, 18, 122, .18)); }
.about-band p { max-width: 580px; color: #634571; font-size: 1.12rem; }
.about-grid h2 { max-width: 590px; }
.about-page .about-grid { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); }
.about-page .avatar-wrap::before { background: #f9d5ea; }
.about-page .about-grid p { font-size: 1.06rem; }
.friends { background: var(--cream); }
.friends-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.friend { background: #fff; border-radius: var(--radius); padding: 30px 34px 34px; box-shadow: var(--shadow); text-align: center; }
/* Each puppet stands in a tall card of one strong colour from its own world, lighter behind it, with a soft floor
   shadow, like the character cards on Danny Go!'s About page (Josip, 24 Oct 2026). Sizes are set so each puppet fills
   about the same area of its card (Alfaberta's books not counted), checked by eye: --h is the picture's height in the card. */
.friend { --glow: #b98cf7; --mid: #8445e0; --deep: #4a1495; --h: 89%; --floor: 0%; --shadow-w: 70%; }      /* Alfaberta: purple (Josip, 24 Oct 2026) */
.friend-ratoffee { --glow: #ff9ad6; --mid: #f0489f; --deep: #b5146e; --h: 77%; --floor: 5%; --shadow-w: 62%; }   /* Ratoffee: pink */
.friend-samba { --glow: #fff28a; --mid: #ffd21f; --deep: #e39a00; --shadow-w: 48%; }                             /* Samba: yellow */
.friend .stage { position: relative; aspect-ratio: 4 / 5; margin: 0 0 20px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--glow) 0%, var(--mid) 46%, var(--deep) 100%); }
.friend .stage::after { content: ''; position: absolute; left: 50%; bottom: 3%; width: var(--shadow-w); height: 9%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(25, 0, 40, .34), rgba(25, 0, 40, 0)); }
.friend .stage img { position: absolute; z-index: 1; left: 50%; bottom: var(--floor); transform: translateX(-50%); height: var(--h); width: auto; max-width: 96%; object-fit: contain; }
.friend-samba .stage img { height: auto; width: 88%; bottom: 20%; }   /* he flies: up off the floor, his shadow below */
.friend p { color: var(--muted); margin: 0 auto; max-width: 420px; }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.value { background: #fff; padding: 34px; border-radius: 26px; box-shadow: var(--shadow); }
.value .icon { font-size: 39px; margin-bottom: 12px; }
.value h3 { font-size: 1.45rem; }
.value p { color: var(--muted); margin: 0; }

/* Shop */
.shop-preview { background: var(--cream); position: relative; }
.shop-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; border-radius: var(--radius-lg); padding: 45px 50px; background: #fff; box-shadow: var(--shadow); border: 2px dashed #dfc4ed; }
.shop-banner h2 { font-size: clamp(2rem, 3.3vw, 3.1rem); margin: 10px 0 12px; }
.shop-banner p { max-width: 680px; margin: 0; color: var(--muted); }
.shop-art { width: 190px; transform: rotate(6deg); filter: drop-shadow(0 14px 18px rgba(81, 18, 122, .22)); }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-tease { background: #fff; border: 1px solid #f0e1ef; border-radius: 27px; padding: 31px; box-shadow: var(--shadow); }
.product-icon { height: 74px; width: 74px; border-radius: 22px; display: grid; place-items: center; background: #f9e0fa; font-size: 37px; margin-bottom: 21px; }
.product-tease h3 { font-size: 1.6rem; }
.product-tease p { color: var(--muted); margin: 0; }
/* Atividades: a card per printable (build.py activity_card) */
.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.activity-card { background: #fff; border: 1px solid #f0e1ef; border-radius: 27px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.activity-card img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 849; object-fit: cover; border-bottom: 1px solid #f0e1ef; }
.activity-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 26px; }
.activity-info h3 { font-size: 1.35rem; margin-bottom: 8px; }
.activity-info p { color: var(--muted); margin: 0 0 16px; }
.activity-info .btn { margin-top: auto; }
.tag { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: #963bb0; font-weight: 900; background: #f5e5fb; border-radius: 99px; padding: 6px 10px; display: inline-block; margin-bottom: 12px; }

/* Inner page hero */
.page-hero { background: radial-gradient(ellipse at 76% 34%, #872bca 0%, #4a087d 58%, #2b0754 100%); color: #fff; padding: 82px 0 89px; position: relative; overflow: hidden; }
.page-hero::before { content: '✦'; position: absolute; right: 8%; top: 18%; color: #c881f3; font-size: 140px; opacity: .3; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { margin: 17px 0 20px; font-size: clamp(3.5rem, 6vw, 6rem); }
/* Titles drawn in Peachy Keen JF (render_titles.py); each image's width in em is set by build.py */
.title-art { display: block; max-width: 100%; height: auto; }
.page-hero p { font-size: 1.16rem; color: #efdffc; max-width: 720px; }
.list-tools { display: flex; justify-content: space-between; gap: 22px; align-items: center; margin-bottom: 24px; }
.list-tools h2 { font-size: 1.45rem; margin: 0; }
.list-tools .search { border: 2px solid #e3d1ed; border-radius: 999px; background: #fff; padding: 12px 17px; font-size: 1rem; color: var(--ink); min-width: 275px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: stretch; }
.contact-card { background: #fff; border-radius: 30px; padding: 43px; box-shadow: var(--shadow); }
.contact-card h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.contact-card p { color: var(--muted); max-width: 650px; }
.contact-note { margin-top: 24px; }
.contact-email { display: inline-block; margin: 4px 0 26px; padding: 14px 22px; border-radius: 17px; background: var(--lavender); color: var(--violet); font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: clamp(1.05rem, 3.6vw, 1.35rem); text-decoration: none; overflow-wrap: anywhere; }
.contact-email:hover { background: #ead7fb; }
.social-list { display: flex; flex-direction: column; gap: 11px; margin-top: 30px; }
.social-list a { border: 1px solid #ebd5ee; text-decoration: none; border-radius: 17px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 900; transition: background .2s; }
.social-list a:hover { background: #f8ebff; }
.contact-avatar { background: radial-gradient(circle at 60% 35%, #f7b4d6, #da9df4 65%, #7841ba); border-radius: 30px; display: grid; place-items: center; min-height: 440px; padding: 30px; }
.contact-avatar img { width: min(100%, 380px); filter: drop-shadow(0 16px 22px rgba(85, 39, 117, .35)); }

/* Legal + 404 */
.legal { max-width: 760px; display: grid; gap: 14px; }
.legal h2 { font-size: 1.55rem; margin-top: 18px; }
.legal h3 { font-size: 1.15rem; margin-top: 8px; }
.legal p, .legal li { color: #4b3360; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal-summary { background: var(--lavender); border-radius: 22px; padding: 22px 26px; }
.legal-summary h2 { margin-top: 0; margin-bottom: 8px; }
.legal details.lang { border-top: 2px solid #ecdcf3; margin-top: 24px; padding-top: 18px; }
.legal details.lang summary { cursor: pointer; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--violet); }
.legal details.lang[open] { display: grid; gap: 14px; }
mark.todo { background: #fff1a8; color: #5a3b00; padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.draft-banner { background: #fff1a8; color: #5a3b00; text-align: center; padding: 12px 20px; font-size: .95rem; }
.not-found { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: center; }
.not-found h2 { margin-bottom: 0; }

/* Footer */
.site-footer { background: var(--violet-deep); color: #f8ebff; padding: 62px 0 24px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }
.footer-brand img { width: 230px; margin-bottom: 14px; }
.footer-grid p { max-width: 320px; color: #d4bcdf; }
.footer-grid h3 { font-size: 1.12rem; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { text-decoration: none; color: #e8d2f2; font-weight: 700; }
.footer-links a:hover { text-decoration: underline; }
.foot-bottom { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid #74418b; margin-top: 44px; padding-top: 19px; color: #cbb3d7; font-size: .85rem; }
.foot-bottom a { color: inherit; display: inline-block; padding: 6px 2px; }

/* Video modal */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(18, 2, 31, .91); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.modal[hidden] { display: none; }
.modal-inner { display: grid; grid-template-columns: minmax(0, 420px) minmax(180px, 270px); gap: 26px; align-items: center; max-width: 750px; width: 100%; }
.modal-player { aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #18052c; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); max-height: calc(100vh - 96px); }
.modal-player iframe { border: 0; height: 100%; width: 100%; }
/* No autoplay (YouTube counts only plays from its own button): the hand points at that button until the video plays */
.modal-player { position: relative; }
.modal-hand { position: absolute; left: 50%; top: calc(50% + 50px); margin-left: -18px; width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 32px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transition: opacity .3s; }
.modal.is-ready:not(.is-playing) .modal-hand { opacity: 1; animation: tap 1s ease-in-out infinite; }
@keyframes tap { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4px, -12px) scale(1.1); } }
.modal-copy .modal-hint { color: #fff; font-weight: 800; font-size: 1.05rem; }
.modal.is-playing .modal-hint { display: none; }
.modal-copy { color: #fff; }
.modal-copy h2 { font-size: 2rem; }
.modal-copy p { color: #d7c5e0; font-size: .98rem; }
.modal-copy a { color: #fff; font-weight: 800; }
.modal-close { position: fixed; z-index: 205; top: 20px; right: 22px; background: #fff; border: 0; border-radius: 50%; height: 44px; width: 44px; font-size: 27px; line-height: 1; color: var(--violet); }

/* Responsive */
@media (max-width: 1090px) {
  .nav { gap: 18px; }
  .brand img { height: 104px; margin: 8px 0 -42px; }
  .socials { gap: 4px; }
  .socials a { width: 31px; height: 31px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .84rem; }
  .playlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .nav { min-height: 82px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 82px; left: 0; right: 0; background: var(--violet-deep); padding: 44px 26px 24px; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; box-shadow: 0 14px 18px #1b022644; }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 1.08rem; padding: 9px 0; }
  .nav .socials { display: none; }
  .hero::before { background: linear-gradient(180deg, rgba(43, 7, 84, .65) 0%, rgba(43, 7, 84, .25) 55%, rgba(43, 7, 84, 0) 80%); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding: 64px 0 0; }
  .hero h1 { font-size: clamp(3rem, 9vw, 4.5rem); }
  .hero-art { padding: 10px 0 20px; }
  .hero-art img { width: min(80%, 400px); }
  .section { padding: 75px 0; }
  .section-head { align-items: start; flex-direction: column; gap: 11px; }
  .playlist-grid, .playlist-grid.featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .about-grid, .about-page .about-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .avatar-wrap { min-height: 350px; max-width: 450px; margin: auto; }
  .about-copy { padding-bottom: 15px; }
  .shop-banner { grid-template-columns: minmax(0, 1fr); padding: 35px; }
  .shop-art { display: none; }
  .products-grid, .values-grid, .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friends-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-avatar { min-height: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .modal-inner { grid-template-columns: minmax(0, 360px) minmax(140px, 200px); }
}
@media (max-width: 540px) {
  .wrap { width: min(calc(100% - 32px), var(--max)); }
  .brand img { height: 92px; margin: 6px 0 -34px; }
  .section { padding: 60px 0; }
  .hero-copy { padding-top: 52px; }
  .hero-copy p { font-size: 1.08rem; }
  .hero h1 { margin: 22px 0; font-size: clamp(2.6rem, 11.5vw, 4rem); }
  .btn-row .btn { flex: 1; }
  .playlist-grid, .playlist-grid.featured-grid { gap: 12px; }
  .featured-grid .thumb { aspect-ratio: 9 / 16; }
  .playlist-info { padding: 14px; }
  .playlist-info h3 { font-size: 1.06rem; min-height: 3.05em; }
  .playlist-info span { font-size: .78rem; }
  .play-dot { width: 49px; height: 49px; font-size: 19px; bottom: 12px; }
  .page-hero { padding: 57px 0 61px; }
  .page-hero h1 { font-size: clamp(2.6rem, 13vw, 3.5rem); }
  .list-tools { flex-direction: column; align-items: stretch; }
  .list-tools .search { width: 100%; min-width: 0; }
  .products-grid, .values-grid, .friends-grid, .activity-grid { grid-template-columns: minmax(0, 1fr); }
  .avatar-wrap { min-height: 310px; }
  .contact-card { padding: 29px; }
  .not-found { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .not-found img { width: 200px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  .footer-grid > div:first-child { grid-column: auto; }
  .foot-bottom { flex-direction: column; gap: 6px; }
  .modal { padding: 66px 13px 15px; align-items: flex-start; overflow-y: auto; }
  .modal-inner { display: flex; flex-direction: column; gap: 10px; width: min(100%, 380px); }
  .modal-player { height: min(68vh, 610px); width: auto; max-width: 100%; }
  .modal-copy { text-align: center; }
  .modal-copy h2 { font-size: 1.3rem; margin: 10px 0; }
  .modal-copy p { display: none; }
  .modal-copy .modal-hint { display: block; margin: 0 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Title images (build.py title_css) */
.title-art.t-home { width: 10.65em; }
.title-art.t-videos { width: 8.86em; }
.title-art.t-activities { width: 8.325em; }
.title-art.t-about { width: 6.83em; }
.title-art.t-contact { width: 5.61em; }
.title-art.t-privacy { width: 6.15em; }
.title-art.t-not_found { width: 5.895em; }