/*
 * FULL BLEED — INK CHAPTERS.
 * One uninterrupted viewport canvas and a pinned editorial narrative.
 * Styling is scoped to the experience; Work, Journal, Lab remain unchanged.
 */
:root {--ink-progress:0;--ink-pointer-x:0;--ink-pointer-y:0}
body > .dark{
  position:absolute;
  top:0;left:0;right:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(12,27,29,.9) 0%,rgba(12,27,29,.74) 53%,
                             rgba(12,27,29,.03) 100%);
  background-image:linear-gradient(180deg,rgba(12,27,29,.9) 0%,rgba(12,27,29,.74) 53%,
                             rgba(12,27,29,.03) 100%);
}
body > .dark .topline{background:transparent;border-color:rgba(255,255,255,.12)}
body > .dark .nav{
  border-color:rgba(255,255,255,.13);
  background:transparent;
  backdrop-filter:none;
}
.ink-experience{
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  min-height:0;
  height:315svh;
  margin:0;
  padding:0;
  isolation:isolate;
}
.ink-sticky-stage{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  height:100dvh;
  min-height:550px;
  overflow:hidden;
  background:#f5efe3;
  isolation:isolate;
}
.ink-experience .ink-art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  cursor:default;
  --ink-scroll-depth:0;
  --ink-pointer-x:0;
  --ink-pointer-y:0;
}
.ink-experience .ink-art:hover{border:0}
.ink-experience .ink-art::before{
  opacity:.24;
  background:repeating-linear-gradient(95deg,rgba(61,48,42,.021) 0 1px,transparent 1px 5px);
}
.ink-experience .ink-fallback{
  width:100%;height:100%;
  transform-origin:56% 58%;
  transform:scale(calc(1.045 + var(--ink-scroll-depth) * .11))
    translateY(calc(var(--ink-scroll-depth) * -1.4%));
  transition:none!important;
}
.ink-experience .ink-motion-overlay{
  transform-origin:56% 58%;
  transform:scale(calc(1.045 + var(--ink-scroll-depth) * .09))
    translateY(calc(var(--ink-scroll-depth) * -1.2%));
}
.ink-experience .ink-canvas{
  transform-origin:56% 58%;
  transition:opacity .6s ease;
}
.ink-experience .ink-poem{
  right:clamp(32px,6.6vw,115px);
  top:clamp(200px,28vh,330px);
  font-size:clamp(15px,1.4vw,19px);
  color:rgba(32,45,44,.63);
}
.ink-story-shade{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(9,22,25,.98) 0%,rgba(13,29,31,.93) 19%,
      rgba(13,29,31,.63) 37%,
      rgba(13,29,31,.12) 61%,
      transparent 84%),
    linear-gradient(0deg,rgba(9,22,25,.52),transparent 34%);
  opacity:calc(.96 - var(--ink-progress) * .12);
}
.ink-experience .hero-copy{
  position:absolute;
  z-index:12;
  left:max(6vw,calc((100vw - 1280px) / 2));
  top:clamp(175px,27vh,310px);
  width:min(590px,42vw);
  max-width:none;
  padding:0 14px 0 0;
  margin:0;
  opacity:1;
  pointer-events:auto;
}
.ink-experience .hero-copy h1{
  font-size:clamp(64px,6vw,118px);
  line-height:.91;
  letter-spacing:-.054em;
  color:#f6f0e7;
  text-shadow:0 5px 34px rgba(4,14,15,.19);
}
.ink-experience .hero-copy h1 em{color:#D5AE7A}
.ink-experience .hero-copy .hero-lead{
  max-width:420px;
  color:#c6d4cb;
  font-size:15px;
  line-height:1.9;
}
.ink-scroll-chapters{
  position:absolute;
  inset:0;
  z-index:11;
  pointer-events:none;
}
.ink-chapter{
  position:absolute;
  left:max(6vw,calc((100vw - 1280px) / 2));
  bottom:clamp(95px,18vh,225px);
  width:min(570px,70vw);
  color:#f8f3eb;
  opacity:0;
  transform:translate3d(0,30px,0);
  will-change:opacity,transform;
}
.ink-chapter-index{
  font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.26em;
  color:#d3b994;
}
.ink-chapter h2{
  font:500 clamp(40px,5vw,72px)/1.18 "STKaiti","KaiTi",Georgia,serif;
  letter-spacing:.09em;
  margin:18px 0 10px;
}
.ink-chapter p{
  margin:0;
  font:italic 17px/1.5 Georgia,serif;
  letter-spacing:.01em;
  color:#d9e2d9;
}
.ink-scroll-cue{
  z-index:13;
  position:absolute;
  bottom:clamp(25px,5vh,60px);
  right:max(5vw,calc((100vw - 1280px) / 2));
  color:#4c605d;
  font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  display:flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  opacity:1;
}
.ink-scroll-line{width:38px;height:1px;background:#77918c}
.ink-experience + .pillars{
  min-height:95px;
  position:relative;
  z-index:4;
}
#work{scroll-margin-top:0}
@media(max-width:900px){
  .ink-experience{height:260svh}
  .ink-story-shade{
    background:linear-gradient(90deg,rgba(8,24,27,.95),rgba(8,24,27,.70) 38%,transparent 91%),
               linear-gradient(0deg,rgba(8,24,27,.34),transparent 43%);
  }
  .ink-experience .hero-copy{width:min(540px,62vw);left:5vw;top:27vh}
  .ink-experience .hero-copy h1{font-size:clamp(57px,8vw,93px)}
  .ink-chapter{left:5vw}
}
@media(max-width:720px){
  body > .dark .topline .container span:last-child{display:none}
  .ink-experience{height:260svh}
  .ink-sticky-stage{min-height:0}
  .ink-experience .ink-art{margin:0;max-width:none;min-height:0;aspect-ratio:auto}
  .ink-experience .ink-fallback{
    transform-origin:60% 50%;
    transform:scale(calc(1.10 + var(--ink-scroll-depth) * .11));
  }
  .ink-experience .ink-motion-overlay{
    transform-origin:60% 50%;
    transform:scale(calc(1.10 + var(--ink-scroll-depth) * .10));
  }
  .ink-story-shade{
    background:linear-gradient(180deg,
      rgba(9,23,25,.90) 0%,rgba(9,23,25,.66) 42%,
      rgba(9,23,25,.12) 78%,rgba(9,23,25,.10)),
      linear-gradient(90deg,rgba(9,23,25,.15),transparent 80%);
    opacity:calc(.94 - var(--ink-progress) * .18);
  }
  .ink-experience .hero-copy{
    left:7vw;right:7vw;top:clamp(170px,23vh,240px);
    width:auto;max-width:none;padding:0;margin:0;
  }
  .ink-experience .hero-copy h1{font-size:clamp(57px,12vw,79px)}
  .ink-experience .hero-copy .hero-lead{font-size:13px;line-height:1.78;max-width:33ch}
  .ink-experience .ink-poem{right:5vw;top:auto;bottom:18vh;font-size:13px;color:#4d5f5d}
  .ink-chapter{left:7vw;bottom:25vh;width:85vw}
  .ink-chapter h2{font-size:clamp(42px,10vw,60px)}
  .ink-chapter p{font-size:14px;max-width:27ch}
  .ink-scroll-cue{right:7vw;bottom:5vh;color:#253a39}
}
@media(max-width:420px){
  .ink-experience .hero-copy h1{font-size:clamp(51px,12.2vw,64px)}
  .ink-experience .hero-copy .hero-lead{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .ink-experience .hero-copy,.ink-chapter,.ink-scroll-cue{
    transition:none!important
  }
}

/* Interaction leaves a quiet, expanding ring of diluted pigment.
   No on-screen controls are needed; pointer/touch works on the landscape. */
.ink-touch-ripple{
  position:absolute;z-index:5;pointer-events:none;
  width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.3);
  border:1px solid rgba(60,84,77,.65);
  box-shadow:0 0 0 5px rgba(90,120,108,.11),
             inset 0 0 15px rgba(45,70,60,.12);
  animation:ink-touch-expand 1.55s cubic-bezier(.14,.62,.18,1) both;
}
@keyframes ink-touch-expand{
  0%{opacity:.82;transform:translate(-50%,-50%) scale(.4)}
  80%{opacity:.23}
  100%{opacity:0;transform:translate(-50%,-50%) scale(19)}
}


/*
 * Solar sequence: scroll down makes the sun rise from behind the ridge;
 * scrolling back up returns the landscape to its pre-dawn state.
 * The disc stays a CSS circle, while the actual SVG mountain silhouettes
 * occlude it without a flat artificial clipping boundary.
 */
/* Put solar light BEHIND the actual mountain SVG rather than behind an
   arbitrary horizontal mask. The mountain paths now naturally occlude it,
   including on ultra-wide and mobile canvases. */
.ink-sun-sky{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 30% 37% at 69.5% 39%,
      rgba(248,194,119,.26) 0%,rgba(249,214,158,.14) 40%,transparent 85%),
    linear-gradient(180deg,
      rgba(255,231,190,.27),rgba(253,226,188,.08) 44%,transparent 70%);
  opacity:var(--ink-sun-glow,.14);
  mix-blend-mode:multiply;
}
.ink-sun-horizon{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  /* No rectangular mask: the curved SVG mountain is the real occluder. */
}
.ink-sun-disc{
  position:absolute;
  left:69.5%;
  top:var(--ink-sun-y, 50%);
  width:clamp(74px,7.8vw,122px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle at 42% 38%,
    #fffef7 0%,#fff6e6 58%,#f6d5a0 90%,#deaf73 100%);
  opacity:calc(.42 + var(--ink-sun-rise,0) * .46);
  box-shadow:0 0 17px 7px rgba(248,212,154,.17),
             0 0 55px 23px rgba(247,203,137,.21),
             0 0 115px 44px rgba(253,216,161,.12);
}
@media(max-width:720px){
  .ink-sun-disc{
    left:70%;
    width:clamp(60px,19vw,93px);
  }
  .ink-sun-sky{
    background:
      radial-gradient(ellipse 49% 34% at 70% 39%,
        rgba(246,193,122,.18) 0%,transparent 88%),
      linear-gradient(180deg,rgba(252,226,185,.15),transparent 60%);
  }
}