:root{
  --ink:#1a1a1a;
  --paper:#ffffff;
  --rose:#c27b8c;          /* the "Osc Collection" mauve */
  --rose-deep:#a45f70;
  --line:#e7e2e4;
  --mono:'Courier Prime','Courier New',monospace;
  --script:'Petit Formal Script',cursive;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --disc-r:48px;           /* spotlight radius — matches experience-i-am; mask radius MUST equal it */

  /* descent state — JS drives --t 0(white)..1(black); bg/fg lerp off it */
  --t:0;
  --bg:#ffffff;
  --fg:#1a1a1a;
  --soft:#3a3a3a;          /* softened body ink, recomputed by JS on descent */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{background:var(--bg);}
body{
  margin:0;
  color:var(--fg);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.65;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .12s linear;
}

#stage{
  position:relative;
  min-height:100%;
  isolation:isolate;          /* keep blend modes contained to the stage */
}

/* ---- ambient pollen (three.js) ---- */
#pollen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
#pollen.on{opacity:1;}

/* ---- hidden eggs revealed by the spotlight (margins only) ---- */
#eggLayer{
  position:absolute;
  inset:0;
  z-index:5;                     /* BELOW the disc, so the difference lens inverts what it reveals */
  pointer-events:none;
  color:#fff;                    /* white lyrics on black -> the disc inverts them to black-on-white */
  font-family:var(--serif);
  font-style:italic;
  -webkit-mask:radial-gradient(circle var(--disc-r) at var(--sx,-999px) var(--sy,-999px), #000 72%, transparent 100%);
          mask:radial-gradient(circle var(--disc-r) at var(--sx,-999px) var(--sy,-999px), #000 72%, transparent 100%);
}
#eggLayer .egg{
  position:absolute;
  white-space:nowrap;
  font-size:16px;
  letter-spacing:.4px;
  opacity:.72;
  transform:translate(-50%,-50%);
  user-select:none;
}
#eggLayer .egg.egg-dark{ color:#fff; opacity:1; }   /* full white so the disc inverts to crisp black text */

/* ---- spotlight inversion lens ---- */
#spot{                            /* the exact experience-i-am spotlight: solid white difference disc */
  position:absolute;
  left:var(--sx,-999px);
  top:var(--sy,-999px);
  width:calc(var(--disc-r) * 2);
  height:calc(var(--disc-r) * 2);
  border-radius:50%;
  background:#fff;
  mix-blend-mode:difference;      /* inverts whatever sits beneath */
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity .45s ease;
  will-change:left,top;
}
body.spot-dark #spot.on{opacity:1;}   /* only in the black descent, where the search happens */

.wrap{
  position:relative;
  z-index:2;                     /* content above pollen + eggs, below the lens */
  max-width:1040px;
  margin:0 auto;
  padding:64px 32px 104px;
}

/* ---- intro ---- */
.intro{max-width:760px;margin:0 auto;font-size:19px;line-height:1.7;}
.intro p{margin:0;}
.intro p + p{margin-top:1.4em;}
.intro .signature{
  margin-top:2.2em;font-size:14px;letter-spacing:.6px;
  color:color-mix(in srgb, var(--fg) 62%, var(--bg));
}
.intro .signature .sep{color:var(--rose);margin:0 .55em;}
.intro .signature .ck{font-weight:700;color:var(--fg);}
.accent{color:var(--rose);}
.wave{
  font-family:var(--script);
  font-size:1.5em;
  color:var(--rose-deep);
  line-height:1;
  letter-spacing:0;
  cursor:text;              /* it's a word in a sentence, not a link — no pointer hand */
  white-space:nowrap;
}
.wave .wl{display:inline-block;will-change:transform;}

/* ---- playable "pretty wave" divider ---- */
.wavewrap{
  position:relative;
  max-width:760px;
  margin:52px auto 8px;
  touch-action:none;            /* let us pluck without the page scrolling */
}
#wave{
  display:block;
  width:100%;
  height:78px;
  cursor:crosshair;
}
.wavehint{
  display:block;
  margin-top:2px;
  font-size:12px;
  letter-spacing:1px;
  color:color-mix(in srgb, var(--fg) 40%, var(--bg));
  transition:opacity .5s ease;
}
.wavehint.gone{opacity:0;}

/* ---- bios ---- */
.bios{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px 64px;
  margin-top:44px;
}
.bio{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:28px;
  align-items:start;
  transition:opacity .45s ease;
}
.bios.hovering .bio:not(.lit){opacity:.42;}   /* the other one recedes */
.photo{
  position:relative;
  width:132px;height:132px;
  border-radius:50%;
  overflow:hidden;
  border:0;padding:0;-webkit-appearance:none;appearance:none;   /* it's a <button> */
  cursor:zoom-in;                                                /* click to enlarge */
  background:radial-gradient(120% 120% at 30% 20%, #f4e9ec 0%, #e7d3d9 45%, #d8b9c3 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.04);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, filter .5s ease;
  will-change:transform;
}
.photo:focus-visible{outline:2px solid var(--rose);outline-offset:4px;}
.photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}
.photo::after{                 /* fresnel-ish rim that lights up on hover */
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(194,123,140,0), inset 0 0 22px rgba(194,123,140,0);
  transition:box-shadow .5s ease;
  pointer-events:none;
}
.bio.lit .photo{
  transform:scale(1.055);
  box-shadow:0 10px 34px rgba(164,95,112,.34), 0 0 46px rgba(194,123,140,.30);
  filter:saturate(1.08) brightness(1.03);
}
.bio.lit .photo::after{
  box-shadow:inset 0 0 0 2px rgba(194,123,140,.55), inset 0 0 26px rgba(232,190,202,.6);
}
.bio .name{
  font-weight:700;font-size:20px;letter-spacing:.5px;margin:2px 0 14px;
  transition:color .4s ease;
}
.bio.lit .name{color:var(--rose-deep);}
.bio .name .pro{font-weight:400;color:color-mix(in srgb,var(--fg) 58%,var(--bg));font-size:.8em;letter-spacing:0;}
.bio p{margin:0;font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--fg) 78%,var(--bg));}

/* ---- inscription below the bios (hover / tap to reveal the translation) ---- */
.inscription{
  margin:70px auto 0;
  text-align:center;
}
.mystery{
  display:grid;justify-items:center;max-width:720px;margin:0 auto;
  cursor:default;font-family:var(--serif);   /* reveal-on-hover, not a link — no pointer hand */
  font-size:clamp(21px,3.2vw,29px);line-height:1.4;letter-spacing:.3px;
  -webkit-tap-highlight-color:transparent;
}

/* ---- I am doorway (the descent) — a full-screen black album panel, spotlit ---- */
.doorway{
  margin-top:56px;
  padding:220px 22px 220px;      /* even top + bottom so the "i am" moment reads balanced */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.doorway-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  opacity:calc(var(--t) * 1.35);   /* the whole "i am" moment fades up as you descend */
}
.iam-logo{
  width:clamp(180px,34vw,320px);      /* vector SVG — crisp at any size */
  height:auto;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.16));
  user-select:none;
  -webkit-user-drag:none;
}
.mystery > span{grid-area:1 / 1;transition:opacity .65s ease;text-align:center;white-space:nowrap;}
.m-greek{color:var(--fg);opacity:1;}
.m-trans{color:var(--rose-deep);opacity:0;font-style:italic;}
.mystery:hover .m-greek,.mystery:focus-visible .m-greek,.mystery.revealed .m-greek{opacity:0;}
.mystery:hover .m-trans,.mystery:focus-visible .m-trans,.mystery.revealed .m-trans{opacity:1;}
.mystery:focus-visible{outline:none;}

/* the home-page "[ experience i am ]" button, adapted to sit on the black */
.mark-btn{
  display:inline-block;
  pointer-events:auto;
  font-family:var(--mono);
  font-size:clamp(13px,1.5vw,15px);
  letter-spacing:.18em;
  text-transform:lowercase;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.72);
  padding:.85em 1.7em;
  background:transparent;
  transition:background .14s ease, color .14s ease, transform .12s ease, border-color .14s ease;
}
.mark-btn:hover,.mark-btn:focus-visible{ background:#fff; color:#111; border-color:#fff; outline:none; }
.mark-btn:active{ transform:scale(.97); }

/* ---- photo lightbox (no position:fixed — banned inside the WP iframe) ---- */
#lightbox{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:rgba(7,6,9,.9);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:opacity .28s ease, visibility 0s linear .28s;
  cursor:zoom-out;
}
#lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease; }
#lightboxImg{
  position:absolute;
  left:50%;
  top:var(--ly,50%);
  transform:translate(-50%,-50%) scale(.96);
  max-width:min(84vw,430px);
  max-height:calc(var(--lvh,640px) * 0.82);
  width:auto;height:auto;
  border:6px solid #fff;
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
#lightbox.open #lightboxImg{ transform:translate(-50%,-50%) scale(1); opacity:1; }

/* ---- responsive ---- */
@media (max-width:820px){
  .wrap{padding:44px 22px 84px;}
  .intro{font-size:17px;}
  .bios{grid-template-columns:1fr;gap:44px;margin-top:36px;}
  .bio{grid-template-columns:96px 1fr;gap:20px;}
  .photo{width:96px;height:96px;}
  .wavewrap{margin:44px 0 6px;}
  #wave{height:64px;}
}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .intro,.bio,.wavewrap,.doorway{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .bio:nth-child(2){animation-delay:.08s;}
  .wavewrap{animation-delay:.05s;}
  @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}
@media (prefers-reduced-motion:reduce){
  #pollen{display:none;}
  body{transition:none;}
}