:root{
  --bg:#F7F5F1; --bg-2:#EFEBE4; --ink:#1A1A18;
  --ink-soft: rgba(26,26,24,0.55);
  --ink-faint: rgba(26,26,24,0.3);
  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, sans-serif;
  /* Sampled directly from the supplied reference image's own
     background — the transformation section uses THIS, not the
     general OMONYMA cream, so the raster images' own background can
     disappear into it with zero visible seam. */
  --canvas: #EEE8E0;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--ink); color:var(--bg); }
a, button{ font-family:inherit; }
@media (prefers-reduced-motion: reduce){ .stage img{ transition:none !important; } }

/* ============ TEAM INTRO ============ */
#team-intro{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8vh 6vw; text-align:center; }
.eyebrow{ font-size:0.72rem; letter-spacing:0.28em; color:var(--ink-soft); margin:0 0 2.2rem; }
.member-card{ background:none; border:none; cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; max-width:360px; }
.member-portrait{ width:min(46vw,340px); aspect-ratio:3/4; background:var(--canvas); border-radius:2px; overflow:hidden; margin-bottom:1.6rem; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.member-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-card:hover .member-portrait,.member-card:focus-visible .member-portrait{ transform:scale(1.015); }
.member-name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0 0 .35rem; }
.member-role{ font-size:0.82rem; color:var(--ink-soft); }
.member-card:focus-visible{ outline:1px solid var(--ink); outline-offset:10px; }

/* ============ PROFILE EXPERIENCE ============ */
/* The whole section uses the sampled canvas tone, not the site's
   general cream — this is what lets the images' own background
   vanish into the page with zero visible boundary. */
#profile-experience{
  display:none;
  background: var(--canvas);
  position:relative;
}
#profile-experience.is-active{ display:block; }
#team-intro.is-hidden{ display:none; }

/* Extremely faint grain, matching the soft paper-like texture of
   the supplied artwork — a tiny inline SVG turbulence pattern, not
   an image file, so it costs nothing to load and stays invisible
   until you look for it. */
#profile-experience::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0.035; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.back-link{ position:fixed; top:2.4rem; left:2.4rem; z-index:50; background:none; border:none; font-size:0.75rem; letter-spacing:0.08em; color:var(--ink-soft); cursor:pointer; transition:color .25s ease; text-decoration:none; }
.back-link:hover,.back-link:focus-visible{ color:var(--ink); }

.scroll-spacer{ height:600vh; position:relative; z-index:1; }
.pinned-stage{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }

/* ---- Visual: large, borderless, no background of its own — the
   camera sits inside the artwork, the viewport is the crop window.
   Desktop: generous, right-of-centre, plenty of negative space.
   ---- */
.visual-anchor{
  position:absolute; inset:0;
  width:100vw; height:100svh;
  z-index:5; overflow:visible;
}
.stage{
  position:absolute; overflow:visible; will-change:opacity,clip-path,transform;
}
.stage picture, .stage img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Stage 1 — the single hero image, kept static per direction: no
   drift, no mask, no hole. It stays exactly as supplied until the
   very end, where the whole thing fades out (see script.js) to
   leave only the closing text. */
.stage-01{ inset:0; z-index:5; }
.stage-01 img{ object-position: 68% 38%; }

.thread-lines{ position:absolute; inset:-20% -20%; width:140%; height:140%; z-index:10; pointer-events:none; opacity:0; }
.thread-lines-2{ z-index:12; }

/* Covers roughly the person's own silhouette (face, cap, shirt) with
   the page's own canvas tone — NOT the whole hero — so the
   surrounding leaves stay visible on either side, giving the
   illusion that only the botanical form remains. Soft elliptical
   mask so its own edges fade faintly rather than cutting cleanly. */
.person-cover{
  position:absolute; z-index:11; pointer-events:none; opacity:0;
  background:var(--canvas);
  left:68%; top:-14%; width:145vw; max-width:none; height:250vh;
  transform:translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 56% 53% at 50% 43%,
    black 33%,
    rgba(0,0,0,0.8) 49%,
    rgba(0,0,0,0.52) 64%,
    rgba(0,0,0,0.24) 79%,
    rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 56% 53% at 50% 43%,
    black 33%,
    rgba(0,0,0,0.8) 49%,
    rgba(0,0,0,0.52) 64%,
    rgba(0,0,0,0.24) 79%,
    rgba(0,0,0,0) 100%);
  overflow:hidden;
}
.person-cover::after{
  content:'';
  position:absolute; inset:-30%;
  opacity:0.05; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: grain-drift 22s linear infinite;
}
@keyframes grain-drift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-140px,-100px); }
}
@media (prefers-reduced-motion: reduce){
  .person-cover::after{ animation:none; }
}

/* ---- Typography streams — all in front of the visual now ---- */
.type-layer{ position:absolute; inset:0; z-index:20; }
.stream{ position:absolute; will-change:transform; }
.stream .eyebrow-line{ font-size:0.7rem; letter-spacing:0.14em; color:var(--ink-soft); margin:0 0 .4rem; }
.stream h1,.stream h2,.stream h3{ font-family:var(--serif); font-weight:500; margin:0; }
.stream p,.stream li{ font-family:var(--sans); margin:0; }
.stream ul{ list-style:none; margin:0; padding:0; }

.s-name{ top:44%; left:8vw; }
.s-name h1{ font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.05; }
.s-name p{ font-size:0.85rem; color:var(--ink-soft); margin-top:.5rem; max-width:260px; }

.s-years{ top:50%; left:6vw; text-align:left; }
.s-years .big{ font-family:var(--serif); font-size:clamp(3rem,7vw,5.5rem); line-height:0.9; display:block; }
.s-years .small{ font-size:0.78rem; letter-spacing:0.1em; color:var(--ink-soft); }

.s-movement{ top:40%; left:0; width:100vw; text-align:center; }
.s-movement h2{ font-size:clamp(4rem,14vw,11rem); letter-spacing:-0.01em; color:var(--ink); opacity:0.9; }
.s-movement-sub{ margin-top:0.6rem; font-size:clamp(0.9rem,1.4vw,1.15rem); letter-spacing:0.08em; color:var(--ink-soft); }

.s-beyond{ top:44%; left:7vw; }
.s-beyond h3{ font-size:clamp(2rem,3.8vw,3rem); margin-bottom:1rem; }
.s-beyond ul{ font-size:1.05rem; line-height:2.1; color:var(--ink-soft); }

.s-creating{ top:40%; left:0; width:100vw; text-align:center; }
.s-creating h2{ font-size:clamp(3.4rem,11vw,9rem); line-height:0.95; }

.s-creating-sub{ top:82%; left:0; width:100vw; text-align:center; }
.s-creating-sub p{ font-size:1rem; font-style:italic; font-family:var(--serif); color:var(--ink); max-width:360px; margin:0 auto; }

.s-products{ top:74%; left:0; width:100vw; text-align:center; padding:0 8vw; }
.s-products p{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.3rem); line-height:1.3;
  letter-spacing:0.005em; color:var(--ink);
}

.s-beyond-body{ top:46%; left:0; width:100vw; text-align:center; }
.s-beyond-body h3{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:0.01em; margin-bottom:0.9rem;
}
.s-beyond-body p{ font-size:0.85rem; letter-spacing:0.12em; color:var(--ink-soft); }

.s-final{ top:50%; left:0; width:100vw; text-align:center; }
.s-final h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:0.6rem; }
.s-final p{ font-size:0.8rem; letter-spacing:0.2em; color:var(--ink-soft); }


/* ============ MOBILE — immersive, near-fullscreen visual ============ */
@media (max-width:860px){
  .scroll-spacer{ height:620vh; }
  .stage-01 img{ object-position: 42% 40%; }
  .person-cover{ left:42%; top:-8%; width:88vw; height:96vh; }

  /* Safety net — the left-aligned streams can never push text past
     the screen edge, no matter how long the content in wp-admin is.
     (Full-width centred titles like MOVEMENT/CREATING already stay
     within the viewport by design, so they're untouched here.) */
  .s-name,.s-years,.s-beyond{ max-width:88vw; box-sizing:border-box; }
  .stream h1,.stream h2,.stream h3,.stream p,.stream li{ overflow-wrap:break-word; word-break:break-word; }

  .s-movement h2{ font-size:clamp(3rem,20vw,5rem); }
  .s-creating h2{ font-size:clamp(2.4rem,16vw,4rem); }
  .s-name,.s-years,.s-beyond{ left:6vw; }

  /* Lower than desktop's 44%, sitting below the face against the
     body/leaves — clearer than either the face overlap or the very
     bottom edge. */
  .s-name{ top:58%; }
  .s-name p{ max-width:70vw; }
}