/* INK LANDSCAPE / 001 — intentionally scoped: does not affect Work or Journal. */
.ink-hero{grid-template-columns:49% 51%;gap:0;min-height:700px;padding-block:32px 84px}
.ink-hero .hero-copy{padding-right:48px}
.ink-hero .hero-lead{max-width:430px}
.ink-art{
  aspect-ratio:1/1.06;
  min-height:530px;
  border:1px solid rgba(216,205,187,.80);
  border-radius:3px;
  background:#f3eee5;
  box-shadow:0 26px 70px rgba(0,0,0,.23),0 0 0 7px rgba(255,255,255,.018);
  isolation:isolate;cursor:crosshair;
  overflow:hidden;
}
.ink-art:hover{border-color:#d1b995}
.ink-art::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 30% 8%,rgba(255,255,255,.36),transparent 38%),
    repeating-linear-gradient(92deg,rgba(58,48,42,.012) 0 1px,transparent 1px 6px);
  mix-blend-mode:multiply;
}
.ink-art::after{content:none}
.ink-canvas,.ink-fallback{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
}
.ink-canvas{opacity:0;transition:opacity .7s ease;pointer-events:none}
.ink-fallback{opacity:1;transition:opacity .5s ease;pointer-events:none}
.ink-art.ink-enhanced .ink-canvas{opacity:1}
.ink-art.ink-enhanced .ink-fallback{opacity:0;visibility:hidden}
.ink-poem{
  z-index:4;position:absolute;right:32px;top:84px;margin:0;
  writing-mode:vertical-rl;line-height:1.9;letter-spacing:.16em;
  font:18px/1.8 "STKaiti","KaiTi","Kaiti SC",serif;
  color:rgba(32,45,44,.64);pointer-events:none;
}
.ink-poem::after{
  content:"";position:absolute;top:0;right:-18px;width:10px;height:29px;
  background:#995b48;opacity:.55;
}
.ink-hero .hero-copy .hero-lead{color:#b4c3bb}
@media(max-width:1020px) {
  .ink-hero{grid-template-columns:49% 51%;min-height:600px}
  .ink-hero .hero-copy{padding-right:22px}
  .ink-art{min-height:430px}
  .ink-poem{top:68px;right:18px;font-size:15px}
}
@media(max-width:720px) {
  .ink-hero{display:flex;flex-direction:column;gap:0;min-height:unset;padding:54px 0 44px}
  .ink-hero .hero-copy{padding:0}
  .ink-art{width:100%;max-width:540px;min-height:0;aspect-ratio:1/1.05;margin:40px auto 0}
  .ink-poem{right:16px;top:60px;font-size:14px}
}
@media(max-width:360px) {
  .ink-poem{font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .ink-canvas{display:none!important}
  .ink-fallback{visibility:visible!important;opacity:1!important;transition:none}
}

/* Always-on SVG brush layers. Unlike the shader these keep animating when
   hardware WebGL is unavailable. The entire landscape, not just a UI label,
   now moves visibly, even over the paper SVG fallback. */
.ink-motion-overlay{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:3;overflow:hidden;pointer-events:none;
}
.ink-motion-overlay .ink-cloud{transform-box:fill-box;transform-origin:center}
.ink-cloud-a{animation:ink-drift-east 14s ease-in-out infinite alternate;opacity:.88}
.ink-cloud-b{animation:ink-drift-west 18s ease-in-out infinite alternate;opacity:.88}
.ink-cloud-c{animation:ink-drift-east 23s ease-in-out infinite alternate-reverse;opacity:.57}
.ink-water-a{animation:ink-river-east 5.5s linear infinite alternate}
.ink-water-b{animation:ink-river-west 7.2s ease-in-out infinite alternate}
.ink-flock-a{animation:ink-bird-fly-a 15s linear infinite;opacity:.85}
.ink-flock-b{animation:ink-bird-fly-b 20s linear infinite;opacity:.70}
/* Wind and nocturne intensity blend over the seamless 21-second loop. */
.ink-art{--ink-breeze:0;--ink-night:0}
.ink-night-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 70% 22%,rgba(250,251,255,.04),transparent 30%),
             linear-gradient(175deg,rgba(49,69,83,.36),rgba(62,90,91,.13) 46%,rgba(13,33,47,.33));
  opacity:calc(var(--ink-night) * .54);
}
.ink-cloud-a{animation-duration:calc(14s - 6s * var(--ink-breeze))}
.ink-cloud-b{animation-duration:calc(18s - 7s * var(--ink-breeze))}
.ink-water-a{animation-duration:calc(5.5s - 2s * var(--ink-breeze))}
.ink-water-b{animation-duration:calc(7.2s - 2.7s * var(--ink-breeze))}
@keyframes ink-drift-east{
  from{transform:translateX(-110px) translateY(-6px)}
  to{transform:translateX(125px) translateY(12px)}
}
@keyframes ink-drift-west{
  from{transform:translateX(105px) translateY(8px)}
  to{transform:translateX(-140px) translateY(-9px)}
}
@keyframes ink-river-east{
  0%{transform:translateX(-34px) translateY(0);opacity:.24}
  50%{opacity:.58}
  100%{transform:translateX(56px) translateY(6px);opacity:.27}
}
@keyframes ink-river-west{
  0%{transform:translateX(38px) translateY(-1px);opacity:.24}
  50%{opacity:.67}
  100%{transform:translateX(-59px) translateY(4px);opacity:.27}
}
@keyframes ink-bird-fly-a{
  0%{transform:translate(-170px,182px) scale(.70);opacity:0}
  8%{opacity:.86} 88%{opacity:.9}
  100%{transform:translate(780px,114px) scale(.92);opacity:0}
}
@keyframes ink-bird-fly-b{
  0%{transform:translate(790px,232px) scale(.58);opacity:0}
  8%{opacity:.78} 91%{opacity:.8}
  100%{transform:translate(-210px,171px) scale(.75);opacity:0}
}
@media(max-width:720px){
  .ink-cloud-a,.ink-cloud-b{opacity:.85}
  .ink-flock-a,.ink-flock-b{opacity:.95}
}
@media(prefers-reduced-motion:reduce){
  .ink-art:not(.ink-user-motion) .ink-motion-overlay *{
    animation:none!important;transform:none!important
  }
}


/* Visible landscape and automatic brush motion must NOT disappear when WebGL
   is enabled. The opaque shader is multiplied with the SVG drawing; whites
   preserve the SVG, while ink enhances its strokes. */
.ink-art.ink-enhanced .ink-fallback{
  opacity:1!important;visibility:visible!important;
}
.ink-art .ink-canvas{mix-blend-mode:multiply}
.ink-art.ink-enhanced .ink-canvas{opacity:.28}
.ink-art .ink-fallback{transition:none}
.ink-hills{transform-origin:50% 50%}
.ink-hills-back{animation:ink-mountain-back 24s ease-in-out infinite alternate}
.ink-hills-mid{animation:ink-mountain-mid 17s ease-in-out infinite alternate}
.ink-hills-front{animation:ink-mountain-front 12s ease-in-out infinite alternate}
@keyframes ink-mountain-back{from{transform:translateX(-16px)}to{transform:translateX(13px)}}
@keyframes ink-mountain-mid{from{transform:translateX(13px)}to{transform:translateX(-16px)}}
@keyframes ink-mountain-front{from{transform:translateX(-5px)}to{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){
  .ink-art:not(.ink-user-motion) .ink-fallback *,
  .ink-art:not(.ink-user-motion) .ink-motion-overlay *{
    animation:none!important;transform:none!important
  }
}
.ink-art .ink-canvas{z-index:2}

/* Native SVG transform attributes are updated by a 25 Hz wall-clock. When JS
   executes, turn off CSS keyframes on these exact paths to prevent conflicts.
   Without JS, CSS keyframes remain as a graceful fallback. */
.ink-art.ink-js-drive .ink-cloud,
.ink-art.ink-js-drive .ink-water,
.ink-art.ink-js-drive .ink-flock,
.ink-art.ink-js-drive .ink-hills,
.ink-art.ink-js-drive .ink-moon,
.ink-art.ink-js-drive .ink-moon-halo{
  animation:none!important;
}

/* Headline should never be hidden by browser-throttled entrance animations. */
.ink-hero .hero-copy h1,
.ink-hero .hero-copy .hero-lead{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* Ambient artwork autoplays without UI. The opt-in class keeps its
   SVG and WebGL presentation consistent on browsers requesting reduced motion. */
@media(prefers-reduced-motion:reduce) {
  .ink-art.ink-user-motion .ink-canvas { display:block!important; }
  .ink-art.ink-user-motion.ink-enhanced .ink-fallback { opacity:1!important;visibility:visible!important; }
  /* The :not(.ink-user-motion) rule cannot override SVG transforms
     when autoplay has been selected. */
}

/* Fullscreen continuity: the paths use the whole viewport instead of
   centering a square illustration; GPU layers never supply a second skyline. */
.ink-experience .ink-fallback,
.ink-experience .ink-motion-overlay{overflow:visible}
.ink-art.ink-enhanced .ink-canvas{mix-blend-mode:multiply;opacity:.28}

/* Shared rice-paper ground behind SVG hills and the rising sun.
   The SVG is transparent above the mountain silhouettes. */
.ink-experience.ink-hero .ink-art{
  background:linear-gradient(180deg,#fcf9f2 0%,#f3eee5 55%,#eae4d9 100%);
}