/* Masterclass deck · system B (Ellen's own brand). Engine CSS lives inline in index.html. */
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; }
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); font-style: italic; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); font-weight: 500 700; }
:root { --ivory: #f6f0e8; --paper: #fffaf4; --ink: #1f1714; --ink-2: #594b43; --ink-3: #7a6a60; --clay: #974a37; --clay-2: #c27a62; --blush: #f1dcd2; --esp: #18110e; --sage: #dfe6dc; }
body { background: var(--ivory); color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; }
#bar { background: var(--clay); opacity: .8; }
#counter { color: var(--ink-3); font-family: "DM Sans"; }
.slide { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 0%, #f8e4da, transparent 70%), var(--ivory); }
.slide.dark { background: radial-gradient(60% 60% at 50% 40%, #2a1c17, var(--esp)); color: #f6ede4; }
.slide h1, .slide h2 { font-family: "Bodoni Moda", Georgia, serif; font-weight: 400; letter-spacing: -.01em; margin: 0; }
.slide em { font-style: italic; color: var(--clay); }
.dark em { color: #e6b49a; }
.ey { font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .26em; text-transform: uppercase; color: var(--clay); font-weight: 600; margin-bottom: 2.2vh; }
.dark .ey { color: #e6b49a; }
.c { text-align: center; max-width: 78vw; padding: 0 4vw; }
.say h1 { font-size: clamp(30px, 5.2vw, 82px); line-height: 1.08; text-wrap: balance; }
.say p { font-size: clamp(15px, 1.7vw, 26px); color: var(--ink-2); margin: 3vh auto 0; max-width: 46ch; line-height: 1.45; }
.dark .say p, .dark p { color: #cdbdb0; }
.div .num { font-family: "Bodoni Moda"; font-style: italic; font-size: clamp(60px, 12vw, 190px); color: #e6b49a; line-height: 1; opacity: .9; }
.div h1 { font-size: clamp(30px, 5vw, 76px); margin-top: 1vh; }
.div p { font-size: clamp(14px, 1.5vw, 22px); margin-top: 2vh; }
/* photo slides */
.ph { position: absolute; inset: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph .bgb { filter: blur(30px) brightness(.55); transform: scale(1.1); }
.ph .fg { position: absolute; inset: 0; object-fit: contain; }
.cap { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(80vw, 900px); text-align: center; background: rgba(255, 250, 244, .93); border-radius: 18px; padding: 2.2vh 3vw; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.cap p { margin: 0; font-family: "Bodoni Moda"; font-size: clamp(17px, 2.2vw, 34px); line-height: 1.25; color: var(--ink); }
/* split */
.split { position: absolute; inset: 0; display: grid; grid-template-columns: 44% 56%; }
.split .im { position: relative; overflow: hidden; }
.split .im img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.split .tx { display: flex; flex-direction: column; justify-content: center; padding: 0 6vw 0 5vw; }
.split h2 { font-size: clamp(26px, 3.8vw, 60px); line-height: 1.1; }
.split p { font-size: clamp(15px, 1.55vw, 24px); color: var(--ink-2); line-height: 1.5; margin: 2.6vh 0 0; max-width: 40ch; }
/* lists / cards */
.lst h2 { font-size: clamp(26px, 3.8vw, 58px); margin-bottom: 4.5vh; }
.lst ul { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 1.6vh; max-width: 62vw; text-align: left; }
.lst li { background: var(--paper); border: 1px solid rgba(43,28,22,.1); border-radius: 16px; padding: 1.8vh 2vw; font-size: clamp(15px, 1.6vw, 25px); display: flex; gap: 1.2vw; align-items: center; opacity: 0; transform: translateY(14px); animation: up .6s cubic-bezier(.16,1,.3,1) forwards; }
.lst li b { font-family: "Bodoni Moda"; font-style: italic; color: var(--clay); font-weight: 400; min-width: 2.2em; }
.dark .lst li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f6ede4; }
@keyframes up { to { opacity: 1; transform: none; } }
.cards { display: grid; gap: 1.6vw; margin-top: 4vh; }
.card { background: var(--paper); border: 1px solid rgba(43,28,22,.1); border-radius: 20px; padding: 3vh 2vw; text-align: center; opacity: 0; animation: up .7s cubic-bezier(.16,1,.3,1) forwards; }
.card h3 { font-family: "Bodoni Moda"; font-weight: 400; font-size: clamp(18px, 2vw, 32px); margin: 0 0 1vh; }
.card p { margin: 0; color: var(--ink-2); font-size: clamp(13px, 1.25vw, 19px); line-height: 1.45; }
.card .k { font-family: "Bodoni Moda"; font-style: italic; color: var(--clay); font-size: clamp(14px, 1.3vw, 20px); }
/* myth / truth */
.mt { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; width: 80vw; }
.mt > div { border-radius: 24px; padding: 5vh 3vw; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.mt .m { background: #ece4db; color: var(--ink-3); }
.mt .m h2 { text-decoration: line-through; text-decoration-color: rgba(151,74,55,.6); text-decoration-thickness: 2px; }
.mt .t { background: var(--esp); color: #f6ede4; opacity: 0; animation: up .8s .6s cubic-bezier(.16,1,.3,1) forwards; }
.mt h2 { font-size: clamp(20px, 2.6vw, 42px); line-height: 1.18; }
.mt span { font-size: clamp(11px, 1vw, 15px); letter-spacing: .24em; text-transform: uppercase; font-weight: 600; margin-bottom: 2vh; }
.mt .t span { color: #e6b49a; }
/* quiz */
.quiz .opts { display: flex; gap: 1.6vw; justify-content: center; margin-top: 5vh; }
.quiz .o { font-family: "Bodoni Moda"; font-size: clamp(22px, 3vw, 48px); padding: 2vh 4vw; border-radius: 999px; border: 1.5px solid var(--clay); color: var(--clay); }
.quiz .o.ok { background: var(--clay); color: var(--paper); animation: pop .5s 1.4s both; }
.quiz .o.no { animation: fade .5s 1.4s both; }
@keyframes pop { from { transform: scale(1); } 50% { transform: scale(1.12); } to { transform: scale(1.04); } }
@keyframes fade { to { opacity: .3; } }
/* engagement */
.chat { margin: 5vh auto 0; display: inline-flex; align-items: center; gap: 1vw; background: var(--paper); border-radius: 999px; padding: 1.6vh 2.4vw; font-size: clamp(14px, 1.5vw, 22px); box-shadow: 0 20px 40px -26px rgba(31,23,20,.5); color: var(--ink); }
.chat i { width: 10px; height: 10px; border-radius: 50%; background: #3cb371; box-shadow: 0 0 0 4px rgba(60,179,113,.2); }
/* layers demo */
.layers { position: relative; width: min(60vw, 820px); height: 52vh; margin: 4vh auto 0; }
.lay { position: absolute; left: 50%; width: 70%; height: 15vh; border-radius: 22px; transform: translateX(-50%) translateY(30px) skewX(-8deg); opacity: 0; display: grid; place-items: center; animation: lay .8s cubic-bezier(.16,1,.3,1) forwards; box-shadow: 0 30px 50px -30px rgba(31,23,20,.5); }
.lay b { transform: skewX(8deg); font-family: "Bodoni Moda"; font-weight: 400; font-size: clamp(18px, 2.4vw, 38px); }
.lay small { display: block; transform: skewX(8deg); font-size: clamp(11px, 1.1vw, 16px); opacity: .8; margin-top: .5vh; }
.lay.l1 { bottom: 0; background: var(--esp); color: #f6ede4; }
.lay.l2 { bottom: 17vh; background: var(--clay); color: var(--paper); animation-delay: .7s; }
.lay.l3 { bottom: 34vh; background: var(--blush); color: var(--ink); animation-delay: 1.4s; }
@keyframes lay { to { opacity: 1; transform: translateX(-50%) skewX(-8deg); } }
/* face read demo */
.facewrap { display: grid; grid-template-columns: auto 1fr; gap: 4vw; align-items: center; width: 80vw; }
.facewrap svg { height: 66vh; width: auto; }
.zone { fill: rgba(151,74,55,0); stroke: rgba(151,74,55,0); transition: fill .4s, stroke .4s; }
.zone.on { fill: rgba(151,74,55,.18); stroke: var(--clay); }
.zl { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4vh; }
.zl li { font-size: clamp(14px, 1.6vw, 24px); color: var(--ink-3); transition: color .4s; display: flex; gap: 1vw; align-items: baseline; }
.zl li.on { color: var(--ink); }
.zl li b { font-family: "Bodoni Moda"; color: var(--clay); font-weight: 400; font-style: italic; min-width: 4.4em; }
.timer { font-family: "Bodoni Moda"; font-size: clamp(30px, 4vw, 64px); color: var(--clay); margin-bottom: 2vh; font-variant-numeric: tabular-nums; }
/* calendar demo */
.cal12 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1vw; width: 78vw; margin-top: 4vh; }
.mo { background: var(--paper); border: 1px solid rgba(43,28,22,.1); border-radius: 14px; padding: 1.6vh 1vw; min-height: 15vh; opacity: 0; animation: up .5s cubic-bezier(.16,1,.3,1) forwards; text-align: left; }
.mo b { font-family: "Bodoni Moda"; font-weight: 400; font-size: clamp(15px, 1.6vw, 24px); }
.tag { display: block; margin-top: .8vh; border-radius: 6px; padding: .4vh .5vw; font-size: clamp(10px, .95vw, 14px); }
.tag.s { background: #efd8d0; color: #6f3324; } .tag.m { background: #f3e8db; color: #6b4a2a; } .tag.k { background: var(--sage); color: #384a3a; }
/* count-up */
.big { font-family: "Bodoni Moda"; font-size: clamp(60px, 11vw, 180px); line-height: 1; color: var(--clay); font-variant-numeric: tabular-nums; }
.dark .big { color: #e6b49a; }
/* stack reveal */
.stk { width: min(70vw, 980px); display: grid; gap: 1.2vh; margin-top: 3.5vh; text-align: left; }
.si { display: grid; grid-template-columns: 3vw 1fr; gap: 1.2vw; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 1.4vh 1.6vw; font-size: clamp(14px, 1.45vw, 22px); }
.si i { font-style: normal; color: #e6b49a; font-family: "Bodoni Moda"; }
.si.new { animation: glow 1.4s ease; border-color: #e6b49a; }
.si .ua { margin-left: .8vw; font-size: .7em; letter-spacing: .14em; text-transform: uppercase; background: #e6b49a; color: var(--esp); padding: .3vh .6vw; border-radius: 999px; font-weight: 700; }
@keyframes glow { from { background: rgba(230,180,154,.3); } }
.gift { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; width: 80vw; }
.gift img { width: 100%; border-radius: 14px; transform: rotate(-3deg); box-shadow: 0 40px 70px -36px rgba(0,0,0,.6); }
.gift h2 { font-size: clamp(28px, 4vw, 62px); line-height: 1.08; }
.gift p { font-size: clamp(15px, 1.5vw, 23px); line-height: 1.5; }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vw; width: 82vw; margin-top: 4vh; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; width: 78vw; margin-top: 4vh; text-align: left; }
.vs > div { border-radius: 22px; padding: 4vh 2.6vw; }
.vs ul { margin: 2vh 0 0; padding-left: 1.2em; font-size: clamp(14px, 1.45vw, 22px); line-height: 1.6; }
.vs .a { background: #ece4db; color: var(--ink-3); }
.vs .b { background: var(--esp); color: #f6ede4; }
.vs h3 { font-family: "Bodoni Moda"; font-weight: 400; font-size: clamp(20px, 2.4vw, 38px); margin: 0; }
.logo { height: 6vh; margin: 0 auto 4vh; }