/* the teacher's own page (teacher.template.html). Builds on tokens, layout, nav, hero (.btn), about (.frame) and gallery (lightbox) */
.teacher-page a:focus-visible,.teacher-page button:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.t-narrow{max-width:820px}

/* top: name and role beside her portrait, then the facts in one row */
.t-hero{position:relative;overflow:hidden;padding:150px 0 96px;
  background:radial-gradient(ellipse 70% 60% at 78% 35%,rgba(74,29,122,.45),transparent 70%),var(--bg)}
.t-hero-in{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;list-style:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:30px}
.crumbs a{color:var(--gold);transition:.3s}
.crumbs a:hover{color:var(--gold2)}
.crumbs li+li::before{content:"/";margin:0 12px;color:rgba(217,164,65,.5)}
.t-hero h1{font-size:clamp(54px,8vw,112px);line-height:.95;letter-spacing:.01em;text-wrap:balance;max-width:9.5em}
.t-role{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.3vw,27px);line-height:1.35;color:var(--gold2);margin:26px 0 18px;max-width:30em}
.t-intro{color:var(--mute);max-width:52ch}
.t-actions{margin-top:34px}
.t-portrait{position:relative}
.t-portrait .mandala{top:46%;left:50%;width:150%;opacity:.16;z-index:0}
.t-portrait .mandala.b{width:105%;opacity:.22}
.t-portrait .frame{z-index:1}
.t-portrait img{cursor:zoom-in}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin-top:88px;border-top:1px solid rgba(217,164,65,.3)}
.facts div{padding-top:22px}
.facts dt{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.facts dd{font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink)}

/* about: her story beside the teaching photo; the first paragraph reads as the lede */
.t-about{display:grid;grid-template-columns:6fr 5fr;gap:80px;align-items:center}
.t-about p{color:var(--mute);margin-bottom:18px;max-width:60ch}
.t-about .divider+p{font-family:var(--serif);font-size:clamp(22px,2.2vw,26px);line-height:1.5;color:var(--ink);margin-bottom:24px}
.t-about .frame{margin:0 18px 18px 0}
.t-lede{font-family:var(--serif);font-size:clamp(21px,2.1vw,25px);line-height:1.5;color:var(--ink);max-width:36em}

/* her gurus: a gold thread drawn down the list as it scrolls past (js/thread.js); each knot lights as the thread reaches it.
   Without the script, or with reduce motion, the thread is drawn and every knot is lit. */
.thread{list-style:none;position:relative;margin-top:56px;padding-left:52px;--p:1}
.thread::before,.thread::after{content:"";position:absolute;left:11px;top:16px;width:1px;height:var(--len,calc(100% - 80px))}
.thread::before{background:rgba(217,164,65,.2)}
.thread::after{background:linear-gradient(var(--gold2),var(--gold));transform-origin:top;transform:scaleY(var(--p))}
.knot{position:relative;padding-bottom:56px;transition:opacity .7s ease}
.knot::before{content:"";position:absolute;left:-46px;top:11px;width:11px;height:11px;rotate:45deg;border:1px solid var(--gold);background:var(--bg);transition:background .5s,box-shadow .5s}
.knot h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,32px);line-height:1.2;color:var(--ink)}
.knot p{color:var(--mute);margin-top:6px;max-width:58ch}
.knot .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 26px;margin-top:16px}
.who span{width:100%;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.who b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.2vw,26px);color:var(--gold2)}
.knot.end{padding-bottom:0}
.knot.end::before{left:-49px;top:12px;width:17px;height:17px}
.knot.end h3{color:var(--gold2);font-size:clamp(30px,3.2vw,40px)}
.thread.armed .knot:not(.lit){opacity:.72}   /* dim, but still readable (passes contrast) */
.knot.lit::before,.thread:not(.armed) .knot::before{background:var(--gold);box-shadow:0 0 0 6px rgba(217,164,65,.12)}

/* honours: a small gold award cup above each title. As the page scrolls a glint sweeps across the gold and the cup
   turns a little, brightest mid-screen (js/trophies.js sets --s and --glow). The values below are the still pose,
   used with reduce motion. Shape: assets/brand/trophy.svg, used as a mask */
.t-honours{text-align:center;background:radial-gradient(ellipse 55% 45% at 50% 60%,rgba(217,164,65,.08),transparent 70%),var(--bg2)}
.t-honours .divider{margin:0 auto 34px}
.honours{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:52px 20px;margin-top:40px}
.honour{display:flex;flex-direction:column;align-items:center;--s:.3;--glow:.35}
.trophy{--t:88px;position:relative;width:calc(var(--t) * 100 / 120);height:var(--t);margin-bottom:22px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.trophy::before{content:"";position:absolute;inset:-25%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,226,150,calc(.03 + var(--glow) * .16)),transparent)}
.cup{position:absolute;inset:0;transform:perspective(400px) rotateY(calc(var(--s) * 20deg));
  -webkit-mask:url(../assets/brand/trophy.svg) center/contain no-repeat;mask:url(../assets/brand/trophy.svg) center/contain no-repeat;
  background:linear-gradient(100deg,transparent 36%,#fff 50%,transparent 64%) calc(50% + var(--s) * 50%) 0/220% 100%,
    linear-gradient(90deg,rgba(90,50,0,.3),transparent 30% 70%,rgba(90,50,0,.34)),linear-gradient(#fff3cc,#f3cd72 30%,#d9a441 58%,#a8721f 85%,#e2b862)}
.honour .name{font-family:var(--serif);font-size:clamp(23px,2.3vw,29px);line-height:1.2;color:var(--ink);max-width:11em;text-wrap:balance}
.t-note{margin-top:48px;font-family:var(--serif);font-style:italic;font-size:21px;color:var(--mute)}

/* on stage: venues set like a programme, then productions, then her jury and tourism work */
.t-stage{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center}
.t-stage .frame{margin:0 18px 18px 0}
.t-stage p{color:var(--mute);max-width:56ch}
.venues{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:26px 0 34px;font-family:var(--serif);font-size:clamp(21px,2vw,24px);line-height:1.3;color:var(--ink)}
.venues li{padding:12px 0;border-bottom:1px solid rgba(217,164,65,.2)}
.prods{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 22px}
.prods span{width:100%;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.prods i{font-family:var(--serif);font-size:clamp(22px,2.2vw,26px);color:var(--gold2)}
.service{list-style:none;margin-top:30px;padding-top:24px;border-top:1px solid rgba(217,164,65,.2)}
.service li{position:relative;padding-left:24px;color:var(--mute);margin-bottom:10px;max-width:56ch}
.service li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;rotate:45deg;background:var(--gold)}

/* research: the paper titles, cited */
.papers{list-style:none}
.papers li{border-left:1px solid var(--gold);padding:4px 0 4px 30px;margin-bottom:44px}
.papers li:last-child{margin-bottom:0}
.papers cite{display:block;font-family:var(--serif);font-size:clamp(25px,2.8vw,32px);line-height:1.3;color:var(--ink)}
.papers cite::before{content:"\201C"}
.papers cite::after{content:"\201D"}
.papers .where{margin-top:12px;color:var(--gold2)}
.papers p{color:var(--mute);margin-top:6px;max-width:58ch}

/* learn: the way in */
.t-learn{text-align:center;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(74,29,122,.5),transparent 70%),var(--bg)}
.t-learn .t-narrow{max-width:680px}
.t-learn p{color:var(--mute);margin:0 auto 14px;max-width:52ch}
.t-learn .wa-cta{margin:20px 8px 0}
.t-learn .btn{margin:20px 8px 0;padding:15px 30px}

@media(max-width:899px){
  .t-hero{padding:108px 0 72px}
  .t-hero-in{grid-template-columns:1fr;gap:56px}
  .t-portrait{max-width:440px;margin-right:18px}
  .t-hero .btn{padding:13px 18px;font-size:11px;letter-spacing:.14em;margin:0 6px 10px 0}
  .facts{grid-template-columns:1fr 1fr;gap:0 20px;margin-top:64px}
  .facts div{padding:18px 0}
  .facts dd{font-size:20px}
  .t-about,.t-stage{grid-template-columns:1fr;gap:52px}
  .t-stage .frame{order:2}
  .thread{padding-left:42px}
  .knot::before{left:-36px}
  .knot.end::before{left:-39px}
  .honours{grid-template-columns:1fr 1fr;gap:52px 14px}
  .trophy{--t:72px;margin-bottom:16px}
  .honour .name{font-size:21px}
  .venues{grid-template-columns:1fr}
  .t-learn .wa-cta,.t-learn .btn{display:block;margin:16px auto 0;max-width:340px}
}