:root{color-scheme:dark;--gold:#e2c17b;--light:#f4dca2;--muted:#ae9564;--line:rgba(226,193,123,.25);--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{background:#000;scroll-behavior:smooth}body{margin:0;background:#000;color:var(--gold);font-family:var(--sans);min-width:300px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--light);outline-offset:7px}::selection{background:#e2c17b;color:#000}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-70px;z-index:200;background:var(--gold);color:#000;padding:14px}.skip-link:focus{top:15px}
.site-header{height:90px;margin:0 4.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.monogram{font-family:var(--serif);font-size:27px;letter-spacing:-2px}.monogram-dot{color:var(--muted);margin-left:3px}.site-header nav{display:flex;gap:33px;align-items:center}.site-header nav a{font-size:13px;letter-spacing:.055em;position:relative;transition:color .25s}.site-header nav a:after{content:'';position:absolute;bottom:-12px;height:1px;left:0;right:100%;background:var(--gold);transition:right .25s}.site-header nav a:hover:after,.site-header nav a.active:after{right:0}.site-header nav a:hover{color:var(--light)}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:43px 20px 5px;position:relative;z-index:2}.portrait-frame{width:132px;height:158px;border:1px solid rgba(226,193,123,.5);padding:5px;position:relative;margin-bottom:24px;box-shadow:0 0 28px rgba(208,156,59,.035)}.portrait{width:100%;height:100%;background-image:url('assets/portrait-reference.png');background-size:961% auto;background-position:50% 16.6%;background-repeat:no-repeat;background-color:#16120a;filter:saturate(.72)}.portrait-corner{position:absolute;width:16px;height:16px;border-color:var(--light);border-style:solid}.corner-tl{top:-3px;left:-3px;border-width:1px 0 0 1px}.corner-br{bottom:-3px;right:-3px;border-width:0 1px 1px 0}.eyebrow{font-size:9px;font-weight:400;letter-spacing:.29em;color:var(--muted);margin:0 0 12px}h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,4vw,62px);letter-spacing:-.04em;line-height:1.1;margin:0 0 14px;color:var(--light)}.position{font-size:15px;font-weight:400;margin:0 0 9px;letter-spacing:.035em}.affiliation{font-size:12px;margin:0;letter-spacing:.015em;color:var(--muted)}.hero-actions{display:flex;gap:14px;margin-top:23px}.outlined-link{border:1px solid rgba(226,193,123,.4);padding:9px 22px;font-size:11px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:24px;transition:border-color .2s,background .2s}.outlined-link:hover{border-color:var(--gold);background:rgba(226,193,123,.06)}.outlined-link span{font-size:15px;line-height:1}
.explore{position:relative;margin:23px auto 0;max-width:1800px}.explore-label{display:flex;align-items:center;justify-content:center;gap:16px}.explore-label h2{font-family:var(--sans);font-size:8px;letter-spacing:.28em;font-weight:400;color:#8c774e;margin:0}.small-rule{width:24px;height:1px;background:#57492d}.film-stage{height:310px;position:relative;width:100%;overflow:hidden;touch-action:pan-y;cursor:grab;isolation:isolate}.film-stage.dragging{cursor:grabbing}.film-stage:before{content:'';position:absolute;left:5%;right:5%;bottom:8px;height:140px;background:radial-gradient(ellipse,rgba(158,111,28,.085),transparent 65%);pointer-events:none;z-index:-1}.film-stage canvas{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.film-cards{position:absolute;inset:0}.film-card{position:absolute;width:244px;height:132px;display:flex;align-items:center;text-align:left;gap:17px;border:1px solid rgba(224,188,111,.62);border-radius:3px;background:linear-gradient(125deg,rgba(226,193,123,.017),rgba(0,0,0,.12));padding:20px;transform-origin:center;will-change:transform,opacity;box-shadow:inset 0 0 20px rgba(211,169,80,.02),0 0 10px rgba(228,188,103,.04);color:var(--gold);cursor:pointer;user-select:none;transition:border-color .2s,background .2s}.film-card:hover,.film-card:focus-visible{border-color:var(--light);background:rgba(226,193,123,.06)}.film-card svg{width:52px;height:62px;flex-shrink:0;stroke:currentColor;stroke-width:1.1;fill:none;filter:drop-shadow(0 0 4px rgba(226,193,123,.16))}.film-card .card-text{flex:1}.film-card .card-number{display:block;font-size:7px;letter-spacing:.18em;color:var(--muted);margin-bottom:8px}.film-card .card-title{font-family:var(--serif);display:block;font-size:21px;line-height:1.12;font-weight:400;letter-spacing:-.01em}.film-card .card-arrow{display:block;margin-top:10px;text-align:right;font-size:22px;line-height:.8;color:var(--light);font-weight:100}.film-controls{display:flex;justify-content:center;align-items:center;gap:19px;margin-top:-9px;position:relative;z-index:30}.circle-control{width:32px;height:32px;background:transparent;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;cursor:pointer;transition:background .2s,border-color .2s}.circle-control:hover{background:rgba(226,193,123,.08);border-color:var(--gold)}.circle-control svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.2}.pause-control{width:39px;height:39px;border-color:rgba(226,193,123,.65);box-shadow:0 0 16px rgba(226,193,123,.05)}.pause-control[aria-pressed=true]{background:rgba(226,193,123,.08)}.interaction-hint{text-align:center;font-size:9px;letter-spacing:.08em;color:#8f7b52;margin:15px 12px 32px}.interaction-hint span{margin:0 7px}.site-footer{margin:0 4.2%;padding:19px 0 22px;border-top:1px solid rgba(226,193,123,.12);display:flex;justify-content:space-between;color:#8d7953;font-size:8px;letter-spacing:.15em}.site-footer span:nth-child(2){font-family:var(--serif);font-style:italic;letter-spacing:.04em;font-size:11px}
dialog{padding:0;border:1px solid rgba(226,193,123,.45);background:#090806;color:var(--gold);width:min(600px,calc(100% - 40px));max-height:80vh;overflow:auto;border-radius:4px;box-shadow:0 0 80px rgba(226,193,123,.09)}dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(7px)}.dialog-inner{padding:45px 42px 38px;position:relative}.close-control{position:absolute;top:15px;right:15px;font-size:22px}.dialog-inner h2{font-family:var(--serif);font-weight:400;color:var(--light);font-size:36px;letter-spacing:-.025em;margin:12px 0 22px}.dialog-inner p:not(.eyebrow){font-size:14px;line-height:1.85;color:#c4b38f}.dialog-inner ul{padding-left:20px;font-size:14px;line-height:1.85;color:#c4b38f}.detail-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.noscript-message{text-align:center;max-width:600px;padding:40px;margin:auto;line-height:1.8}
@media(min-width:1500px){.site-header{height:100px}.hero{padding-top:50px}.portrait-frame{width:152px;height:181px}.explore{margin-top:32px}.film-stage{height:340px}.film-card{width:270px;height:144px}.film-card .card-title{font-size:24px}.position{font-size:17px}.affiliation{font-size:14px}.site-header nav a{font-size:15px}}
@media(max-width:760px){.site-header{height:78px;margin:0 6%;gap:20px}.site-header nav{gap:17px}.site-header nav a{font-size:11px;letter-spacing:0}.monogram{font-size:24px}.hero{padding-top:37px}.portrait-frame{width:115px;height:137px;margin-bottom:25px}.position{font-size:13px}.affiliation{font-size:11px;max-width:285px;line-height:1.6}.explore{margin-top:35px}.film-stage{height:202px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#5d4c2b transparent;scroll-snap-type:x mandatory;padding:25px 0;touch-action:pan-x pan-y;cursor:auto}.film-stage canvas{display:none}.film-cards{position:relative;display:flex;gap:17px;width:max-content;padding:0 6vw}.film-card{position:relative;left:auto!important;top:auto!important;transform:none!important;opacity:1!important;width:240px;height:132px;scroll-snap-align:center;will-change:auto;border-color:rgba(226,193,123,.4)}.film-controls{margin-top:6px}.interaction-hint{font-size:9px;margin-bottom:30px}.site-footer{margin:0 6%;gap:10px;flex-wrap:wrap}.site-footer span:nth-child(2){display:none}.film-controls .pause-control{display:none}.dialog-inner{padding:40px 26px 28px}}
@media(max-width:760px){.site-header nav a:first-child,.site-header nav a:last-child{display:none}}
@media(max-width:400px){.site-header nav{gap:12px}.site-header nav a{font-size:10px}.site-header{gap:12px}.hero .eyebrow{font-size:7px}.site-header .monogram{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.film-card{will-change:auto}}

/* Inset, rounded windows in one glossy film sleeve. */
.film-card{border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(100,82,44,.5),rgba(18,16,11,.5) 38%,rgba(61,49,28,.5) 72%,rgba(15,14,10,.5));box-shadow:inset 0 1px 1px rgba(255,232,180,.24),inset 0 -1px 8px rgba(226,193,123,.08);transition:background .2s,border-color .2s,box-shadow .2s}
.film-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 18%,rgba(255,239,198,.1) 38%,transparent 55%);pointer-events:none}
.film-card:hover,.film-card:focus-visible{background:linear-gradient(135deg,#4b3d23,#17140e 45%,#342b1b);border-color:var(--light);box-shadow:inset 0 1px 2px rgba(255,232,180,.45),inset 0 0 24px rgba(226,193,123,.1);opacity:1!important}
.card-text,.film-card>svg{position:relative}
@media(min-width:761px){
 body{min-height:100svh;display:flex;flex-direction:column}
 .site-header{height:clamp(52px,9svh,90px);flex-shrink:0}
 main{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
 .hero{padding-top:clamp(12px,3svh,43px);padding-bottom:0}
 .portrait-frame{width:clamp(75px,13svh,132px);height:clamp(90px,15.8svh,158px);margin-bottom:clamp(10px,2svh,24px)}
 h1{font-size:clamp(34px,6svh,62px);margin-bottom:clamp(6px,1.4svh,14px)}
 .hero .eyebrow{margin-bottom:clamp(6px,1.2svh,12px)}
 .position{font-size:clamp(12px,1.6svh,17px);margin-bottom:6px}
 .affiliation{font-size:clamp(10px,1.3svh,14px)}
 .hero-actions{margin-top:clamp(10px,2svh,23px)}
 .outlined-link{padding:7px 20px}
 .explore{margin-top:clamp(12px,2.5svh,32px);width:100%}
 .film-stage{height:clamp(180px,31svh,340px)}
 .film-card{height:clamp(105px,16svh,170px);padding:clamp(10px,2svh,20px);gap:12px}
 .film-card svg{width:clamp(30px,5.2svh,52px);height:clamp(35px,6svh,62px)}
 .film-card .card-title{font-size:clamp(15px,2.1svh,24px)}
 .film-card .card-number{margin-bottom:5px}
 .film-card .card-arrow{margin-top:6px;font-size:18px}
 .film-controls{margin-top:0}
 .interaction-hint{margin:10px 12px clamp(12px,2svh,32px)}
 .site-footer{padding:clamp(10px,1.9svh,19px) 0;flex-shrink:0}
}

/* Desktop frame artwork is drawn on the curved film; DOM buttons only handle input. */
@media(min-width:761px){
 .film-card,.film-card:hover,.film-card:focus-visible{background:transparent;border-color:transparent;box-shadow:none;color:transparent;opacity:1!important}
 .film-card::before,.film-card>svg,.film-card .card-text{visibility:hidden}
 .film-card:focus-visible{outline:none}
}

/* Keep the same curved sleeve on phones, with compact labels and touch controls. */
@media(max-width:760px){
 .explore{width:100%;margin-top:22px}
 .film-stage{height:240px;overflow:hidden;padding:0;scroll-snap-type:none;touch-action:pan-y;cursor:grab}
 .film-stage canvas{display:block}
 .film-cards{position:absolute;inset:0;display:block;width:auto;padding:0}
 .film-card{position:absolute;left:var(--frame-x)!important;top:var(--frame-y)!important;transform:var(--frame-transform)!important;height:120px;min-height:0;padding:0;will-change:transform}
 .film-card,.film-card:hover,.film-card:focus-visible{background:transparent;border-color:transparent;box-shadow:none;color:transparent;opacity:1!important;outline:none}
 .film-card::before,.film-card>svg,.film-card .card-text{visibility:hidden}
 .film-controls .pause-control{display:inline-flex}
 .film-controls{margin-top:0}
 .circle-control,.pause-control{width:44px;height:44px}
}

/* Optional metal previews preserve the original portrait colors. */
:root[data-metal="silver"]{--metal-filter:grayscale(1) brightness(1.12)}
:root[data-metal="platinum"]{--metal-filter:grayscale(1) sepia(.12) saturate(.5) brightness(1.25)}
:root[data-metal] .site-header,
:root[data-metal] .hero>:not(.portrait-frame),
:root[data-metal] .portrait-corner,
:root[data-metal] .explore,
:root[data-metal] .site-footer,
:root[data-metal] dialog{filter:var(--metal-filter)}
:root[data-metal] .portrait-frame{border-color:rgba(210,213,218,.5)}
.element-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
:root[data-element]:not([data-element="Au"]) .site-header,
:root[data-element]:not([data-element="Au"]) .hero>:not(.portrait-frame),
:root[data-element]:not([data-element="Au"]) .portrait-corner,
:root[data-element]:not([data-element="Au"]) .explore,
:root[data-element]:not([data-element="Au"]) .site-footer,
:root[data-element]:not([data-element="Au"]) #detail-dialog{filter:url(#element-tint)}
:root[data-element]:not([data-element="Au"]) .portrait-frame{border-color:rgba(210,213,218,.5)}
.element-picker-toggle{position:fixed;right:16px;bottom:12px;z-index:40;display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 11px;border:1px solid rgba(218,209,186,.35);border-radius:9px;background:rgba(16,15,13,.94);color:#e9e3d6;cursor:pointer;font-size:12px;box-shadow:0 2px 18px #000}
.element-picker-toggle>span:first-child{font-size:23px;line-height:1}
#element-picker{position:fixed;inset:auto 16px 62px auto;margin:0;width:min(620px,calc(100vw - 24px));max-height:calc(100svh - 90px);overflow:auto;padding:18px;border:1px solid #514b40;border-radius:14px;background:#0e0e0e;color:#e8e4dc;box-shadow:0 12px 55px #000;font-family:Arial,Helvetica,sans-serif}
#element-picker::backdrop{background:transparent}
#element-picker header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px}
#element-picker h2{font:18px Georgia,serif;margin:0 0 6px}
#element-picker header p{font-size:11px;color:#a9a59b;margin:0;line-height:1.5}
#element-picker header button{border:0;border-radius:6px;background:transparent;color:inherit;font-size:25px;min-width:40px;min-height:40px;cursor:pointer}
.periodic-table-scroll{overflow-x:auto;padding:3px;scrollbar-width:thin}
.periodic-table{display:grid;grid-template-columns:repeat(18,minmax(26px,1fr));grid-template-rows:repeat(9,38px);gap:3px;min-width:520px}
.periodic-table button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:1px solid color-mix(in srgb,var(--element-color) 35%,transparent);border-radius:4px;background:color-mix(in srgb,var(--element-color) 9%,#101010);color:var(--element-color);cursor:pointer}
.periodic-table button small{font-size:7px;line-height:1}
.periodic-table button span{font-size:11px}
.periodic-table button:hover,.periodic-table button[aria-pressed="true"]{background:color-mix(in srgb,var(--element-color) 30%,#101010);border-color:var(--element-color)}
.periodic-table>span{font-size:7px;align-self:center;text-align:center;color:#aba69a}
#element-selection{margin:14px 0 0;font-size:12px;color:#c8c2b6}
.site-footer{padding-right:58px}
@media(max-width:760px){#element-picker{right:12px;padding:12px}.periodic-table{grid-template-rows:repeat(9,44px);min-width:680px}.periodic-table button small{font-size:8px}.periodic-table button span{font-size:13px}.element-picker-toggle{right:12px;bottom:10px}}

/* Canvas artwork uses the chosen palette directly rather than an SVG filter. */
:root[data-element]:not([data-element="Au"]) .explore{filter:none}

:root[data-element] .explore{--gold:var(--element-accent);--light:var(--element-accent);--line:color-mix(in srgb,var(--element-accent) 25%,transparent);color:var(--element-accent)}
:root[data-element] .explore-label h2,:root[data-element] .interaction-hint{color:color-mix(in srgb,var(--element-accent) 65%,#000)}
:root[data-element] .small-rule{background:color-mix(in srgb,var(--element-accent) 40%,#000)}
:root[data-element] .pause-control{border-color:color-mix(in srgb,var(--element-accent) 65%,transparent)}

/* Element choices recolor accents; readable typography keeps its neutral tone. */
:root[data-element]:not([data-element="Au"]) .site-header,
:root[data-element]:not([data-element="Au"]) .hero>:not(.portrait-frame),
:root[data-element]:not([data-element="Au"]) .portrait-corner,
:root[data-element]:not([data-element="Au"]) .site-footer,
:root[data-element]:not([data-element="Au"]) #detail-dialog{filter:none}
:root[data-element]{--gold:var(--element-accent)}

/* Keep the supplied portrait in its natural colors. */
.portrait{filter:none}

/* Warm-white typography with the metallic palette reserved for structure and accents. */
:root{--text:#f2eee5;--body-text:#c9c5bc}
body{color:var(--text)}
.monogram{color:var(--gold)}
.site-header nav a{color:var(--text)}
.site-header nav a:hover,.site-header nav a.active{color:var(--gold)}
h1,.position{color:var(--text)}
.affiliation{color:var(--body-text)}
.site-footer{color:#aaa59c}


/* Contemporary asymmetric researcher profile. */
@media(min-width:761px){
 .hero{
  width:min(calc(100% - 48px),880px);
  margin:0 auto;
  display:grid;
  grid-template-columns:clamp(135px,16vw,180px) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto;
  column-gap:clamp(36px,6vw,72px);
  align-items:center;
  justify-items:start;
  text-align:left;
  padding-left:0;
  padding-right:0;
 }
 .portrait-frame{
  grid-column:1;
  grid-row:1 / 6;
  align-self:center;
  width:clamp(135px,16vw,180px);
  height:clamp(150px,18vw,202px);
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(226,193,123,.34);
  border-radius:18px;
  background:#0a0907;
  box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 30px rgba(226,193,123,.035);
 }
 .portrait{border-radius:17px;background-size:cover;background-position:center 24%}
 .portrait-corner{display:none}
 .hero>.eyebrow,.hero>h1,.hero>.position,.hero>.affiliation,.hero>.hero-actions{grid-column:2}
 .hero>.eyebrow{align-self:end;margin-bottom:10px}
 .hero>h1{font-size:clamp(42px,5.2vw,58px);line-height:1;margin-bottom:14px}
 .hero>.position{max-width:520px;margin:0 0 10px;color:var(--light);font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.35;letter-spacing:0}
 .hero>.affiliation{line-height:1.55}
 .hero>.hero-actions{margin-top:18px}
}
@media(max-width:760px){
 .hero{align-items:flex-start;text-align:left;padding-left:6%;padding-right:6%}
 .portrait-frame{width:124px;height:139px;padding:0;margin-bottom:24px;overflow:hidden;border-radius:14px;border-color:rgba(226,193,123,.34);box-shadow:0 14px 40px rgba(0,0,0,.55)}
 .portrait{border-radius:13px;background-size:cover;background-position:center 24%}
 .portrait-corner{display:none}
 .hero h1{font-size:clamp(40px,13vw,54px)}
 .hero .position{max-width:330px;color:var(--light);font-family:var(--serif);font-size:17px;line-height:1.4;letter-spacing:0}
 .hero .affiliation{max-width:330px}
}

/* One consistent header width across the entire site. */
.site-header{width:min(91.6%,1800px);margin-left:auto;margin-right:auto}
@media(max-width:760px){.site-header{width:88%;margin-left:auto;margin-right:auto}}

/* Match the shared header dimensions on every desktop size. */
.site-header{height:90px;min-height:90px}
@media(max-width:760px){.site-header{height:78px;min-height:78px}}