/* BYLIZ x NARS masterclass. Ported from the approved Claude Design canvas (desktop 1440 + compact mobile). */

@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/heebo-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/heebo-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/heebo-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/heebo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/heebo-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/heebo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/frank-ruhl-libre-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/frank-ruhl-libre-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/frank-ruhl-libre-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/frank-ruhl-libre-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bebas Neue"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


*, *::before, *::after { box-sizing: border-box; }
:root { --bg: #2C1704; --pink: #F29BB5; --text: #F4E9E6; --muted: #D9C6C2; --muted2: #CDB9B6; --line: rgba(244, 233, 230, .25); --err: #FFB3C7; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Heebo", "Arial Hebrew", system-ui, sans-serif; font-size: 17px; line-height: 1.55; text-align: right; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--pink); }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, .strip:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ltr { direction: ltr; text-align: right; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; top: -64px; z-index: 10; background: var(--pink); color: var(--bg); padding: 12px 18px; border-radius: 2px; }
.skip:focus { top: 12px; color: var(--bg); }

.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 34px; border-radius: 2px; border: 0; background: var(--pink); color: var(--bg); text-decoration: none; font: 700 16px/1 "Heebo", sans-serif; cursor: pointer; }
.pill:hover { color: var(--bg); background: #fff; }
.pill.ghost { background: none; border: 1.5px solid var(--text); color: var(--text); }
.pill.ghost:hover { color: var(--bg); background: var(--text); }
.pill.sm { min-height: 40px; padding: 0 22px; font-size: 14px; }
.pill.lg { min-height: 58px; padding: 0 46px; font-size: 17px; }

.slot { position: relative; overflow: hidden; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tab { display: inline-block; align-self: flex-start; margin: 0; background: var(--pink); color: var(--bg); font: 400 22px/1.3 "Bebas Neue", sans-serif; letter-spacing: .1em; padding: 8px 28px; direction: ltr; }

/* nav */
.nav { max-width: 1360px; margin: 0 auto; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nl, .nr { flex: 1 1 0; display: flex; gap: 26px; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.nr { justify-content: flex-end; }
.nl a { color: var(--text); text-decoration: none; }
.nl a:hover { color: var(--pink); }
.brand { flex: none; font: 400 34px/1 "Bebas Neue", sans-serif; letter-spacing: .14em; color: var(--text); text-decoration: none; direction: ltr; }
.brand:hover { color: var(--text); }

/* hero */
.hero-sec { position: relative; overflow: hidden; }
.hero { max-width: 1360px; margin: 0 auto; padding: 16px 40px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; min-height: 720px; }
.hero .txt { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; padding: 40px 0 40px 40px; position: relative; z-index: 2; animation: rise 1s ease-out both; }
.hero h1 { font: 400 clamp(56px, 7.4vw, 112px)/1 "Bebas Neue", sans-serif; letter-spacing: .02em; text-align: right; }
html.js .hero h1 .w { display: block; }
.hero .lead { max-width: 420px; font: 400 21px/1.6 "Frank Ruhl Libre", serif; color: #E5D3CF; }
.meta { font-size: 18px; letter-spacing: .02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.meta .sl { color: var(--pink); padding: 0 10px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .small { font-size: 16px; color: var(--muted2); }
.hero .pic { position: relative; min-height: 560px; }
.hero .pic .slot { position: absolute; inset: 0; background: #3A1F08; }
.hero .pic .slot img { object-position: 50% 30%; }
.sigbig { position: relative; z-index: 3; max-width: 1360px; margin: -0.28em auto 0; padding: 0 40px; font: 400 clamp(90px, 22vw, 300px)/.95 "Bebas Neue", sans-serif; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px var(--pink); text-align: center; direction: ltr; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; }

/* marquee */
.mq { margin-top: 56px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; direction: ltr; }
.mq-track { display: flex; align-items: center; width: max-content; animation: mq 34s linear infinite; font: 400 26px/1.2 "Bebas Neue", sans-serif; letter-spacing: .12em; white-space: nowrap; }
.mq-track span { padding: 0 24px; }
.mq-track i { font-style: normal; color: var(--pink); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* panels */
.panels { max-width: 1360px; margin: 0 auto; padding: 110px 40px; display: flex; flex-wrap: wrap; gap: 24px; }
.panel { flex: 1 1 480px; min-width: 0; border: 1px solid var(--line); padding: 0 0 40px; display: flex; flex-direction: column; min-height: 600px; }
.panel .tab { align-self: flex-start; }
.pbody { padding: 44px 40px 0; display: flex; flex-direction: column; gap: 30px; flex: 1; }
.plead { font-size: 22px; font-weight: 700; line-height: 1.4; }
.sched { border-top: 1px solid var(--line); }
.sched li { display: flex; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.sched .t { flex: none; min-width: 104px; font: 400 40px/1 "Bebas Neue", sans-serif; color: var(--pink); direction: ltr; text-align: right; }
.sched h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.sched p { margin-top: 4px; font-size: 16px; color: var(--muted); }
.bp { display: flex; align-items: baseline; gap: 14px; direction: ltr; align-self: flex-start; }
.bp .n { font: 400 140px/.95 "Bebas Neue", sans-serif; }
.bp .cur { font: 700 56px/1 "Heebo", sans-serif; color: var(--pink); }
.incl { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.incl li { display: flex; align-items: baseline; gap: 12px; }
.incl li::before { content: "\25CF"; color: var(--pink); font-size: 12px; }

/* what to expect */
.expect { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.expect .photo { flex: 1 1 480px; min-height: 600px; position: relative; }
.expect .photo .slot { position: absolute; inset: 0; background: #3A1F08; }
.expect .photo .slot img { object-position: 50% 40%; }
.expect .list { flex: 1 1 480px; min-width: 0; min-height: 600px; padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 30px; }
.expect h2 { font: 400 clamp(44px, 6vw, 84px)/1 "Bebas Neue", sans-serif; letter-spacing: .02em; direction: ltr; text-align: right; }
.expect ul { display: flex; flex-direction: column; gap: 14px; font-size: 19px; }
.expect li { display: flex; align-items: baseline; gap: 14px; }
.expect li::before { content: "\25CF"; flex: none; color: var(--pink); font-size: 13px; }

/* giveaway */
.giveaway { background: var(--pink); color: var(--bg); padding: 64px 24px; overflow: hidden; text-align: center; }
.giveaway .eb { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.giveaway h2 { font: 400 clamp(60px, 13vw, 190px)/.95 "Bebas Neue", sans-serif; letter-spacing: .02em; direction: ltr; }
.giveaway h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
.giveaway p:last-child { margin: 12px auto 0; max-width: 640px; font-size: 19px; }

/* about */
.artist { max-width: 1100px; margin: 0 auto; padding: 120px 24px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.avatar { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 2px solid var(--pink); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.artist .name { font: 400 clamp(56px, 9vw, 120px)/1 "Bebas Neue", sans-serif; letter-spacing: .06em; direction: ltr; }
.bio { display: flex; flex-direction: column; gap: 24px; margin-top: 12px; max-width: 680px; text-align: center; }
.bio p { min-width: 0; text-wrap: balance; font: 400 18px/1.8 "Heebo", sans-serif; color: #EFE3DF; }

/* tickets */
.tickets { background: var(--bg); border-top: 1px solid var(--line); padding: 100px 24px 72px; }
.tin { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 64px 96px; align-items: flex-start; }
.tl { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.thead { display: flex; flex-direction: column; gap: 14px; }
.thead h2 { font: 700 clamp(40px, 5vw, 64px)/1.05 "Heebo", sans-serif; }
.thead .sub { font-size: 18px; color: var(--muted); }
.gcard { width: 100%; max-width: 460px; aspect-ratio: 1.62; background: var(--text); color: var(--bg); border-radius: 20px; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-2.5deg); box-shadow: 0 36px 56px -30px rgba(0, 0, 0, .7); margin-block: 8px; }
.gcard .top, .gcard .bot { display: flex; justify-content: space-between; gap: 12px; }
.gcard .top { align-items: flex-start; }
.gcard .bot { align-items: flex-end; }
.gcard .gbrand { height: 56px; width: auto; margin: -8px 0 0 0; }
.gcard .kind { font-size: 14px; color: #5A4A4D; }
.gcard .amt { font: 400 clamp(56px, 8vw, 76px)/1 "Bebas Neue", "Heebo", sans-serif; direction: ltr; text-align: right; }
.gcard .l { font-size: 12px; color: #5A4A4D; }
.gcard .nm { font: 400 22px/1.3 "Frank Ruhl Libre", serif; min-height: 1.3em; overflow-wrap: anywhere; }
.gcard .co { font: 400 16px/1 "Bebas Neue", sans-serif; letter-spacing: .14em; color: #A0204A; direction: ltr; white-space: nowrap; }
.notice { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--pink); font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 440px; text-wrap: pretty; }
.notice .nt { font-weight: 700; color: var(--pink); font-size: 14px; }
.reg { flex: 0 1 440px; min-width: min(100%, 320px); display: flex; flex-direction: column; gap: 26px; }
.reg h3 { font-size: 22px; font-weight: 700; }
.badge { font-size: 13px; font-weight: 700; color: var(--pink); border: 1px solid rgba(242, 155, 181, .6); padding: 3px 14px; border-radius: 999px; white-space: nowrap; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
form, .ready { display: flex; flex-direction: column; gap: 26px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 14px; color: var(--muted2); }
input { font: inherit; font-size: 19px; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid rgba(244, 233, 230, .55); border-radius: 0; padding: 8px 0; min-height: 48px; width: 100%; }
input[aria-invalid="true"] { border-bottom-color: var(--err); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--muted2); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; accent-color: var(--pink); }
.err:empty { display: none; }
.err { font-size: 14px; font-weight: 700; color: var(--err); }
.reg .pill { min-height: 58px; font-size: 17px; }
.note2 { font-size: 13px; line-height: 1.55; color: #B9A5A3; }
.note2 a { color: var(--muted2); }
.preview { margin: 0; padding: 16px; border: 1px solid var(--line); font: inherit; font-size: 16px; line-height: 1.6; white-space: pre-line; color: var(--text); }
.again { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted2); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.fallback { max-width: 1120px; margin: 56px auto 0; text-align: center; font-size: 16px; color: var(--muted); }
.fallback .status { min-height: 1.4em; margin-top: 4px; font-size: 14px; }

/* gallery */
.gallery { padding: 110px 0 100px; overflow: hidden; }
.ghead { max-width: 1360px; margin: 0 auto 40px; padding: 0 40px; }
.ghead h2 { font: 400 clamp(44px, 7vw, 96px)/1 "Bebas Neue", sans-serif; letter-spacing: .02em; direction: ltr; text-align: center; }
.strip { display: flex; gap: 16px; padding: 0 40px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pink) transparent; }
.strip .slot { flex: none; width: 360px; aspect-ratio: 3/4; scroll-snap-align: start; background: #3A1F08; }
.strip .slot:nth-child(1) img { object-position: 50% 40%; }
.strip .slot:nth-child(n+2) img { object-position: 50% 35%; }

/* final + footer */
.final-sec { border-top: 1px solid var(--line); }
.final { max-width: 900px; margin: 0 auto; padding: 60px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final h2 { font: 400 clamp(56px, 12vw, 170px)/.95 "Bebas Neue", sans-serif; letter-spacing: .01em; direction: ltr; }
.final h2 span { color: var(--pink); }
.final p { color: #E5D3CF; font-size: 19px; }
.final .pill { margin-top: 6px; }
footer { margin-top: 80px; }
footer .in { max-width: 1280px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted2); }
footer .fl { display: flex; flex-wrap: wrap; gap: 20px; }
footer a { color: var(--muted2); }
footer a:hover { color: #fff; }

/* legal pages */
body.legal { background: var(--bg); color: var(--text); }
.page { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; }
.page h1 { font: 700 clamp(34px, 5vw, 48px)/1.15 "Heebo", sans-serif; margin: 24px 0 8px; }
.page h2 { font: 700 24px/1.3 "Heebo", sans-serif; margin: 36px 0 8px; }
.page p, .page ul { margin: 0 0 1em; color: var(--muted); }
.page ul { list-style: disc; padding-inline-start: 22px; }
.page .muted { color: var(--muted2); }
.page .backlink { font-size: 15px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .txt { padding: 28px 0 32px; }
  .hero .pic { min-height: 0; aspect-ratio: 4/5; }
  .expect .list { padding: 48px 28px; min-height: 0; }
  .expect .photo { flex-basis: 100%; min-height: 0; aspect-ratio: 3/4; max-height: 680px; }
  .expect .photo .slot img { object-position: 50% 30%; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .nav { padding: 14px 16px; }
  .nl { display: none; }
  .nr { flex: none; }
  .brand { font-size: 28px; }
  .hero { padding: 8px 16px 0; }
  .hero .txt { gap: 20px; }
  .hero .lead { font-size: 18px; }
  .meta { font-size: 16px; }
  .hero .btns { gap: 10px; }
  .pill { padding: 0 26px; }
  .sigbig { padding: 0 8px; -webkit-text-stroke-width: 1.5px; }
  .mq { margin-top: 36px; }
  .mq-track { font-size: 20px; }
  .panels { padding: 56px 16px; }
  .panel { min-height: 0; flex-basis: 100%; }
  .pbody { padding: 28px 20px 0; gap: 22px; }
  .plead { font-size: 19px; }
  .sched li { gap: 16px; padding: 18px 0; }
  .sched .t { min-width: 76px; font-size: 32px; }
  .sched h3 { font-size: 19px; }
  .bp .n { font-size: 96px; }
  .bp .cur { font-size: 40px; }
  .expect .photo { flex-basis: 100%; }
  .expect .list { flex-basis: 100%; padding: 40px 20px; gap: 24px; }
  .expect ul { font-size: 17px; }
  .giveaway { padding: 44px 20px; }
  .giveaway p:last-child { font-size: 16px; }
  .artist { padding: 64px 16px; gap: 28px; }
  .avatar { width: 168px; height: 168px; }
  .bio p { font-size: 17px; }
  .tickets { padding: 56px 16px 40px; }
  .tin { gap: 44px; }
  .tl { gap: 24px; }
  .gcard { padding: 22px; border-radius: 18px; transform: rotate(-1.5deg); }
  .gcard .gbrand { height: 46px; }
  .gcard .nm { font-size: 19px; }
  .fallback { margin-top: 36px; font-size: 14px; }
  .gallery { padding: 64px 0 56px; }
  .ghead { padding: 0 16px; margin-bottom: 24px; }
  .strip { padding: 0 16px 12px; }
  .strip .slot { width: 72vw; }
  .final { padding: 40px 16px 0; gap: 18px; }
  .final p { font-size: 16px; }
  footer { margin-top: 48px; }
  footer .in { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .mq-track { animation: none; }
}