/* Beliefs on the open ground; actions within the cloth chapters. */
#intro {
  box-sizing:border-box;width:calc(100% - 64px);max-width:1000px;
  margin-inline:auto;padding:clamp(112px,13vw,184px) 24px clamp(112px,12vw,168px);
  text-align:center;
}
#intro h2 {max-width:none;margin:0;font:400 clamp(38px,4.2vw,60px)/1.16 var(--serif);letter-spacing:-.025em;text-wrap:balance}
#intro h2>span {display:block}
#intro h2 .reciprocal-line {margin-top:10px;font-size:.73em;letter-spacing:-.015em}
#intro>p {max-width:none;margin:22px 0 0;font:italic 400 clamp(27px,2.8vw,38px)/1.25 var(--serif);letter-spacing:-.015em}
#rest,#sentence {
  box-sizing:border-box;display:block;width:calc(100% - 80px);max-width:1000px;
  margin-inline:auto;padding:clamp(124px,13vw,184px) 0 clamp(136px,14vw,196px);
  text-align:left;
}
#rest .passage-inner {max-width:640px;margin-left:12%;}
#sentence .passage-inner {max-width:540px;margin-left:12%;}
#rest h2,#sentence h2 {
  max-width:none;margin:0;padding:0;font:400 clamp(36px,3.8vw,52px)/1.16 var(--serif);
  letter-spacing:-.025em;text-wrap:balance;
}
#rest h2::before,#sentence h2::before {content:none}
#rest h2 em,#sentence h2 em {font:inherit;font-style:italic;color:inherit}
#rest p,#sentence .bridge-thought {
  max-width:48ch;margin:32px 0 0;padding:0;
  font:400 clamp(21px,1.9vw,25px)/1.58 var(--serif);letter-spacing:0;text-wrap:pretty;
}
/* Preserve native-sized editor type and the generous lower cloth border. */
#unify .unify-title {margin-bottom:16px}
#unify {padding-bottom:40px}
@media(max-width:760px){
  #intro {width:calc(100% - 48px);padding:104px 0 112px}
  #intro h2 {font-size:clamp(34px,7.5vw,44px)}
  #intro h2 .reciprocal-line {font-size:.78em;margin-top:12px}
  #intro>p {font-size:26px;margin-top:20px}
  #rest,#sentence {width:calc(100% - 56px);padding:112px 0 124px}
  #rest .passage-inner,#sentence .passage-inner {max-width:560px;margin:0 auto}
  #rest h2,#sentence h2 {font-size:clamp(32px,7.5vw,40px);line-height:1.18}
  #rest p,#sentence .bridge-thought {font-size:21px;line-height:1.55;margin-top:28px;max-width:none}
  #unify .unify-title {margin-bottom:20px}
}

/* Let the reading passage retain the richest wash. Its neighbours use
   different silhouettes, with pigment resting nearer the cloth chapters. */
#intro h2 .reciprocal-line {font-size:.66em;line-height:1.3;margin-top:20px}
#intro>p {font-size:clamp(25px,2.1vw,30px);margin-top:24px}
html[data-aesthetic=cloud] #intro::after,
html[data-aesthetic=cloud] #sentence::after {
  content:'';left:50%;right:auto;width:100vw;top:auto;bottom:-56px;height:100%;
  transform:translateX(-50%);background-repeat:no-repeat;background-size:100% auto;
  mask-composite:add;-webkit-mask-composite:source-over;
}
html[data-aesthetic=cloud] #intro::after {
  background-image:url('assets/cloudlight-pigment-bank.webp');
  background-position:center calc(100% + 130px);opacity:.48;
  mask-image:linear-gradient(180deg,transparent 30%,#000 76%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 76%,#000 90%,transparent);
}
html[data-aesthetic=cloud] #sentence::after {
  background-image:url('assets/cloudlight-pigment-sides.webp');
  background-position:center;opacity:.68;width:112vw;
  /* Opposite the reading passage: upper-left and lower-right pigment,
     with the unpainted middle preserving the writing's clear measure. */
  bottom:-32px;
  mask-image:linear-gradient(90deg,#0007 0%,#0005 30%,#0009 60%,#000 82%),linear-gradient(180deg,transparent,#000 22%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#0007 0%,#0005 30%,#0009 60%,#000 82%),linear-gradient(180deg,transparent,#000 22%,#000 82%,transparent);
  mask-composite:intersect;-webkit-mask-composite:source-in;
}
/* A complete framed painting within the viewport, including its paper border. */
html[data-edge=framed] .hero {
  scroll-margin-top:18px;margin:18px 18px 0;height:calc(100svh - 36px);min-height:480px;
}
html[data-edge=framed] .hero-copy {top:clamp(100px,17svh,170px)}
html[data-edge=framed] .begin {bottom:48px}
@media(max-width:760px){
  #intro {padding-bottom:150px}
  #intro h2 .reciprocal-line {font-size:.73em;line-height:1.3;margin-top:18px}
  #intro>p {font-size:23px;margin-top:20px}
  #sentence {padding-bottom:150px}
  html[data-edge=framed] .hero {scroll-margin-top:12px;margin:12px 12px 0;height:calc(100svh - 24px)}
  html[data-edge=framed] .art {border-radius:18px}
  html[data-edge=framed] .hero nav {padding:24px 6%;gap:14px}
  html[data-edge=framed] .hero nav>a:last-child {max-width:120px;text-align:right}
  html[data-edge=framed] .begin {bottom:64px}
}

/* Compact layouts keep the paintings' aspect ratios. Their pigment belongs in
   the pauses around the prose, rather than in a stretched backdrop behind it. */
@media(min-width:761px) and (max-width:1100px){
  html[data-aesthetic=cloud] :is(#intro,#rest,#sentence)::after {
    top:auto;bottom:-28px;left:50%;right:auto;width:100vw;
    height:clamp(260px,30vw,330px);transform:translateX(-50%);
    background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;
    mask-image:linear-gradient(180deg,transparent 8%,#000 54%,#000 82%,transparent);
    -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 54%,#000 82%,transparent);
    mask-composite:add;-webkit-mask-composite:source-over;
  }
  html[data-aesthetic=cloud] #intro::after {opacity:.5}
  html[data-aesthetic=cloud] #rest::after {transform:translateX(-50%) scaleX(-1);opacity:.72}
  html[data-aesthetic=cloud] #sentence::after {opacity:.62}
  html[data-aesthetic=cloud] #philosophy::after {
    top:auto;bottom:-36px;left:auto;right:calc(50% - 50vw);
    width:220px;height:190px;transform:none;
    background-image:url('assets/aesthetic-cloudlight.webp');
    background-size:200% auto;background-position:right bottom;opacity:.64;
    mask-image:linear-gradient(180deg,transparent,#000 40%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 34%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 34%);
    mask-composite:intersect;-webkit-mask-composite:source-in;
  }
}
/* On phones the painting needs room to read as a wash, not as a small
   decorative fragment. Keep natural contours, alternate the stronger edge,
   and dissolve the pigment before it reaches the body text. */
@media(max-width:760px){
  html[data-aesthetic=cloud] #intro::after {
    top:auto;bottom:-24px;left:50%;right:auto;width:100vw;
    height:clamp(260px,70vw,360px);transform:translateX(-50%);
    background-size:clamp(640px,175vw,1120px) auto;
    background-position:35% calc(100% + 12px);opacity:.56;
    mask-image:linear-gradient(180deg,transparent 4%,#000 38%,#000 78%,transparent);
    -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 38%,#000 78%,transparent);
    mask-composite:add;-webkit-mask-composite:source-over;
  }
  html[data-aesthetic=cloud] :is(#rest,#sentence)::before,
  html[data-aesthetic=cloud] :is(#rest,#sentence)::after {
    content:'';position:absolute;z-index:-1;pointer-events:none;
    background-repeat:no-repeat;mix-blend-mode:multiply;
    mask-composite:intersect;-webkit-mask-composite:source-in;
  }
  html[data-aesthetic=cloud] :is(#rest,#sentence)::before {
    top:-10px;bottom:auto;width:clamp(230px,74vw,390px);
    height:clamp(190px,58vw,270px);background-size:clamp(560px,164vw,860px) auto;
    background-position:left top;opacity:.36;
    mask-image:linear-gradient(180deg,transparent,#000 24%,#000b 48%,transparent 94%),linear-gradient(270deg,transparent,#000 46%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000b 48%,transparent 94%),linear-gradient(270deg,transparent,#000 46%);
  }
  html[data-aesthetic=cloud] #rest::before {
    left:auto;right:calc(50% - 50vw);transform:scaleX(-1);
    background-image:url('assets/aesthetic-cloudlight.webp');
  }
  html[data-aesthetic=cloud] #sentence::before {
    left:calc(50% - 50vw);right:auto;transform:none;opacity:.32;
    background-image:url('assets/cloudlight-pigment-sides.webp');
  }
  html[data-aesthetic=cloud] :is(#rest,#sentence)::after {
    top:auto;bottom:-32px;width:clamp(270px,88vw,450px);
    height:clamp(220px,64vw,320px);
    background-size:clamp(620px,175vw,1000px) auto;
    background-position:right bottom;opacity:.56;
    mask-image:linear-gradient(180deg,transparent,#000 30%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 48%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 48%);
  }
  html[data-aesthetic=cloud] #rest::after {
    left:calc(50% - 50vw);right:auto;transform:scaleX(-1);
    background-image:url('assets/aesthetic-cloudlight.webp');
  }
  html[data-aesthetic=cloud] #sentence::after {
    left:auto;right:calc(50% - 50vw);transform:none;
    background-image:url('assets/cloudlight-pigment-sides.webp');
  }
  html[data-aesthetic=cloud] #philosophy::after {
    top:auto;bottom:-68px;left:auto;right:calc(50% - 50vw);
    width:clamp(190px,64vw,300px);height:190px;transform:none;
    background-image:url('assets/aesthetic-cloudlight.webp');
    background-size:200% auto;background-position:right bottom;opacity:.5;
    mask-image:linear-gradient(180deg,transparent 8%,#000 44%,#000 74%,transparent),linear-gradient(90deg,transparent,#000 44%);
    -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 44%,#000 74%,transparent),linear-gradient(90deg,transparent,#000 44%);
    mask-composite:intersect;-webkit-mask-composite:source-in;
  }
}

/* Shared amber connects the reader with the purpose of reading and writing. */
.hero .hero-copy .human-understanding{color:#704619}