/* For Magicians page (Oct 2026): a director's notebook. Red pencil, a fanned deck, lecture credits. */
:root{--pencil:#C8434F;--hand:'Caveat','Segoe Print','Bradley Hand',cursive}

/* ---------- Hero ---------- */
.mg-hero{position:relative;padding:168px 0 112px;overflow:hidden;
  background:radial-gradient(ellipse 55% 65% at 76% 50%,rgba(140,36,48,.26),rgba(15,13,12,0) 70%),var(--ground)}
.mg-hero .pb-split{align-items:center}
.mg-hero h1{margin:0;font-size:clamp(3.1rem,6vw,5.4rem);line-height:.98}
.mg-hero h1 .mo-line{display:block;overflow:hidden;padding:0 .2em .3em .12em;margin:0 -.2em -.3em -.12em}
.mg-hero h1 .mo-line>*{display:inline-block;position:relative}
.mg-lede{margin:30px 0 0;max-width:540px;font-size:19px;line-height:1.65;color:var(--bone-2)}
.mg-hero .pb-actions{margin-top:36px}
.mo-js .mg-hero h1 .mo-line>*{transform:translateY(108%);transition:transform 1.25s var(--mo-ease)}
.mo-js .mg-hero h1 .mo-line:nth-child(2)>*{transition-delay:.16s}
.mo-ready .mg-hero h1 .mo-line>*{transform:none}
.mo-js .mg-hero .pb-eyebrow,.mo-js .mg-lede,.mo-js .mg-hero .pb-actions{opacity:0;transform:translateY(18px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-js .mg-lede{transition-delay:.45s}
.mo-js .mg-hero .pb-actions{transition-delay:.65s}
.mo-ready .mg-hero .pb-eyebrow,.mo-ready .mg-lede,.mo-ready .mg-hero .pb-actions{opacity:1;transform:none}

/* Red-pencil underline under "only you" */
.mg-mark{position:absolute;left:-2%;width:58%;bottom:-.12em;height:.32em;overflow:visible;pointer-events:none}
.mg-mark path{fill:none;stroke:var(--pencil);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420}
.mo-ready .mg-mark path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1) 1.5s}
.mg-mark path+path{stroke-width:2;opacity:.75}
.mo-ready .mg-mark path+path{transition-delay:1.95s}

/* Photo with a deck of cards fanning out behind it */
.mg-stage{position:relative;max-width:520px;justify-self:end;width:100%}
.mg-stage .sv-frame img{aspect-ratio:1/1}
.mg-fan{position:absolute;left:-46px;bottom:-30px;width:150px;height:210px;z-index:0}
.mg-fan i{position:absolute;inset:0;border-radius:10px;border:1px solid rgba(194,155,95,.6);box-shadow:0 10px 24px rgba(0,0,0,.55);
  background:
    radial-gradient(circle at 50% 50%,rgba(194,155,95,.55) 0 7px,rgba(0,0,0,0) 8px),
    repeating-linear-gradient(45deg,rgba(194,155,95,.18) 0 2px,rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(-45deg,rgba(194,155,95,.18) 0 2px,rgba(0,0,0,0) 2px 9px),
    #5A1520;
  outline:6px solid #F1E7D3;outline-offset:-12px;transform-origin:50% 100%;transition:transform 1.3s cubic-bezier(.2,1.2,.3,1)}
.mg-fan i:nth-child(1){--r:-34deg}.mg-fan i:nth-child(2){--r:-22deg}.mg-fan i:nth-child(3){--r:-10deg}.mg-fan i:nth-child(4){--r:2deg}
.mg-fan i{transform:rotate(-6deg)}
.mg-stage.is-in .mg-fan i{transform:rotate(var(--r))}
.mg-fan i:nth-child(2){transition-delay:.06s}.mg-fan i:nth-child(3){transition-delay:.12s}.mg-fan i:nth-child(4){transition-delay:.18s}
.mg-stage .sv-frame{z-index:1}
.mg-stage:hover .mg-fan i{transform:rotate(calc(var(--r) * 1.25))}

/* ---------- Credentials strip ---------- */
.mg-creds{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);background:var(--panel)}
.mg-creds .pb-wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.mg-cred{padding:34px 22px 32px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.mg-cred:first-child{border-left:0;padding-left:0}
.mg-cred b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.08;color:var(--bone)}
.mg-cred b.mg-big{font-size:clamp(2.6rem,4vw,3.6rem);line-height:.9;color:var(--brass)}
.mg-cred small{font:500 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Lesson plan with margin notes ---------- */
.mg-lessons{border-top:1px solid var(--rule)}
.mg-lesson{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) 260px;gap:28px;align-items:start;padding:40px 0 42px}
.mg-lesson:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:left}
.mo-js .mg-lesson:after{transform:scaleX(0);transition:transform 1.4s var(--mo-ease);transition-delay:calc(var(--mo-d,0s) + .2s)}
.mo-js .mg-lesson.is-in:after{transform:scaleX(1)}
.mg-lesson .pb-num{font-size:26px;padding-top:4px}
.mg-lesson h3{margin:0 0 12px;font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.08}
.mg-lesson p{margin:0;max-width:600px;font-size:17px;line-height:1.7;color:var(--muted)}
.mg-note{position:relative;justify-self:start;align-self:center;font-family:var(--hand);font-weight:600;font-size:30px;line-height:1.05;color:var(--pencil);transform:rotate(-4deg);padding:4px 6px 14px}
.mg-note:before{content:"\2190";margin-right:8px}
.mg-note svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:12px;overflow:visible}
.mg-note svg path{fill:none;stroke:var(--pencil);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:0}
.mo-js .mg-note{clip-path:inset(-20% 100% -20% 0)}
.mo-js .mg-lesson.is-in .mg-note{clip-path:inset(-20% -5% -20% 0);transition:clip-path 1.3s steps(14,end);transition-delay:calc(var(--mo-d,0s) + .7s)}
.mo-js .mg-note svg path{stroke-dashoffset:320}
.mo-js .mg-lesson.is-in .mg-note svg path{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease;transition-delay:calc(var(--mo-d,0s) + 2s)}
.mg-lesson:nth-child(even) .mg-note{transform:rotate(3deg)}

/* Who it's for */
.mg-who{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.mg-who span{border:1px solid var(--rule);padding:12px 18px;font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}

@media (max-width:1000px){
  .mg-creds .pb-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-cred,.mg-cred:first-child{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .mg-cred:nth-child(-n+2){border-top:0}
  .mg-cred:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .mg-hero{padding:128px 0 84px}
  .mg-stage{justify-self:stretch;max-width:none;margin:0 12px 0 34px;width:auto}
  .mg-fan{left:-30px;width:110px;height:154px}
  .mg-lesson{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .mg-note{grid-column:2;font-size:26px;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .mo-js .mg-hero h1 .mo-line>*,.mo-js .mg-hero .pb-eyebrow,.mo-js .mg-lede,.mo-js .mg-hero .pb-actions{opacity:1!important;transform:none!important;transition:none!important}
  .mg-mark path,.mo-js .mg-note svg path{stroke-dashoffset:0!important;transition:none!important}
  .mo-js .mg-note{clip-path:none!important;transition:none!important}
  .mo-js .mg-lesson:after{transform:none!important}
  .mg-fan i{transition:none!important;transform:rotate(var(--r))!important}
}