/* One editorial thread after the collage. The approved marquee, contents cards and footer keep their own styling. */
.spark{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:url('./assets/spark.svg');mask-image:url('./assets/spark.svg');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:-.1em}
.reveal{opacity:1;transform:none;transition:none}
.flow-shell{width:min(1160px,calc(100% - 2 * clamp(24px,5vw,80px)));margin-inline:auto}
.flow-label{font-size:11px;font-weight:900;letter-spacing:.13em;line-height:1.6;margin:0 0 32px;color:#37584c}
.flow-label span{color:var(--orange);font-size:19px;vertical-align:middle;margin-left:8px}
.flow-object{display:block;position:absolute;aspect-ratio:1;background-image:url('./assets/potsu-object-sprites.png');background-repeat:no-repeat;background-size:400% 300%;clip-path:inset(4%)}
.flow-about,.flow-story,.flow-join,.flow-info{background:var(--cream);position:relative;scroll-margin-top:75px}
.flow-about{padding:clamp(105px,12vw,175px) 0 138px;overflow:hidden}
.about-layout{display:grid;grid-template-columns:59% 41%;align-items:center;min-height:630px;position:relative;z-index:1}
.about-words{position:relative;z-index:2}
.about-words h2{font-size:clamp(53px,5.7vw,88px);line-height:1.28;letter-spacing:-.09em;margin:0 0 38px}
.about-words h2 em{font-style:normal;color:#f54a1c}
.about-words>p:not(.flow-label){font-size:16px;font-weight:650;line-height:2.15;max-width:570px;margin-bottom:24px}
.about-words .about-byline{font-size:13px!important;font-weight:900!important;margin-top:36px;padding-left:17px;border-left:3px solid var(--orange)}
.about-scene{height:620px;position:relative;margin-left:-8vw;isolation:isolate}
.about-disc{width:min(32vw,430px);left:18%;top:2%;background-position:100% 50%;transform:rotate(-20deg);z-index:1}
.about-tote{width:min(31vw,420px);left:-6%;top:29%;background-position:100% 0%;transform:rotate(14deg);z-index:3}
.about-book{width:min(26vw,345px);left:46%;top:53%;background-position:66.666% 50%;transform:rotate(-15deg);z-index:2}
.about-spark{position:absolute;right:0;top:8%;font-size:clamp(80px,11vw,170px);line-height:1;color:var(--pink);transform:rotate(16deg);z-index:4}
.flow-handoff{position:relative;z-index:2;width:min(1160px,calc(100% - 2 * clamp(24px,5vw,80px)));margin:52px auto 0;padding-top:22px;border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.flow-handoff span{font-size:26px;color:var(--orange);line-height:1}
.flow-about::after{content:'';position:absolute;left:-8%;right:-8%;bottom:-112px;height:195px;background:#eaeecf;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}

.flow-story{z-index:2;padding:112px 0 122px;overflow:visible}
.flow-story::before{content:'';position:absolute;left:0;right:0;top:-90px;height:180px;border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--cream);pointer-events:none}
.story-layout{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:5%;align-items:center;position:relative}
.story-scene{height:510px;position:relative;isolation:isolate}
.story-notebook{width:min(38vw,490px);left:-7%;top:1%;background-position:100% 100%;transform:rotate(-13deg);z-index:2}
.story-record{width:min(28vw,365px);left:44%;top:34%;background-position:100% 50%;transform:rotate(16deg);z-index:1}
.story-flower{position:absolute;left:6%;bottom:1%;font-size:clamp(80px,10vw,150px);line-height:1;color:var(--pink);transform:rotate(-16deg);z-index:3}
.story-words{position:relative;z-index:4}
.story-words h2{font-size:clamp(46px,5vw,77px);line-height:1.4;letter-spacing:-.08em;margin:0 0 30px}
.story-words>p:last-child{max-width:540px;font-size:16px;font-weight:650;line-height:2.2}

.flow-join{padding:65px 0 145px}
.join-layout{display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:7%;align-items:start;border-top:1px solid var(--ink);padding-top:86px}
.join-words h2{font-size:clamp(47px,5.1vw,78px);line-height:1.33;letter-spacing:-.08em;margin:0 0 30px}
.join-words h2 em{font-style:normal;color:#f54a1c}
.join-words>p:last-child{max-width:440px;font-size:16px;font-weight:650;line-height:2.2}
.join-ways{list-style:none;margin:0;padding:10px 0 0}
.join-ways li{display:grid;grid-template-columns:54px 1fr auto;align-items:center;column-gap:17px;padding:23px 0;border-bottom:1px solid var(--line)}
.join-ways li:first-child{border-top:1px solid var(--line)}
.way-mark{font-size:34px;line-height:1;text-align:center;color:var(--orange)}
.join-ways li:nth-child(2) .way-mark{color:#7aa6d6}
.join-ways li:nth-child(3) .way-mark{color:#e9b63e}
.join-ways li:nth-child(4) .way-mark{color:#ee99b4}
.join-ways strong{font-size:clamp(19px,2vw,29px);font-weight:900;letter-spacing:-.06em}
.join-ways small{font-size:10px;letter-spacing:.1em;font-weight:900;color:#4e6b60}

.flow-info{padding:0 0 160px;overflow:hidden}
.info-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-top:1px solid var(--ink);padding-top:90px;position:relative;z-index:1}
.info-words h2{font-size:clamp(48px,5vw,78px);line-height:1.32;letter-spacing:-.08em;margin:0 0 28px}
.info-words>p:last-child{max-width:460px;font-size:16px;font-weight:650;line-height:2.15}
.info-details dl{margin:16px 0 28px}
.info-details dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;border-bottom:1px solid var(--line);padding:20px 0}
.info-details dl div:first-child{border-top:1px solid var(--line)}
.info-details dt{font-size:12px;font-weight:800;color:#4e6b60}
.info-details dd{margin:0;font-size:15px;font-weight:900}
.info-details dd small{font-size:11px;font-weight:700}
.info-details>a{display:inline-flex;gap:25px;align-items:center;padding-bottom:7px;border-bottom:2px solid var(--ink);font-size:12px;font-weight:900}
.info-details>a span{font-size:18px;color:var(--orange)}
.flow-info::after{content:'';position:absolute;right:-38px;bottom:-100px;width:330px;height:330px;background:#f6d4da;-webkit-mask:url('./assets/spark.svg') center/contain no-repeat;mask:url('./assets/spark.svg') center/contain no-repeat;opacity:.72;transform:rotate(-12deg);pointer-events:none}

@media(max-width:900px){
  .about-layout,.story-layout,.join-layout,.info-layout{grid-template-columns:1fr;gap:0}
  .flow-about{padding-top:115px}
  .about-layout{min-height:0}
  .about-scene{width:min(100%,600px);height:480px;margin:20px auto 0}
  .about-disc{width:55%;left:18%}.about-tote{width:52%;left:0}.about-book{width:43%;left:53%}
  .story-scene{height:390px;width:min(100%,600px);margin:0 auto 28px}
  .story-notebook{width:65%;left:1%}.story-record{width:46%;left:47%;top:30%}
  .join-layout{padding-top:65px}.join-ways{padding-top:42px}
  .info-layout{padding-top:70px}.info-details{margin-top:30px}
}
@media(max-width:600px){
  .flow-shell,.flow-handoff{width:calc(100% - 40px)}
  .flow-label{font-size:9px;margin-bottom:23px}
  .flow-about{padding:94px 0 115px}
  .about-words h2{font-size:clamp(39px,10.6vw,59px);line-height:1.32;margin-bottom:28px}
  .about-words>p:not(.flow-label),.story-words>p:last-child,.join-words>p:last-child,.info-words>p:last-child{font-size:14px;line-height:2.05}
  .about-words .about-byline{font-size:11px!important;line-height:1.8!important;margin-top:26px}
  .about-scene{height:305px;margin-top:34px}
  .about-disc{width:57%;left:21%;top:-2%}.about-tote{width:55%;left:-3%;top:23%}.about-book{width:46%;left:51%;top:44%}
  .about-spark{font-size:85px;right:-10px;top:2%}
  .flow-handoff{margin-top:22px;font-size:11px;line-height:1.7;padding-top:17px}
  .flow-about::after{bottom:-93px;height:145px}
  .flow-story{padding:88px 0 63px}
  .flow-story::before{top:-55px;height:110px}
  .story-scene{height:285px;margin-bottom:34px}
  .story-notebook{width:67%;left:1%;top:-5%}.story-record{width:49%;left:47%;top:27%}
  .story-flower{font-size:73px;left:7%;bottom:-7%}
  .story-words h2,.join-words h2,.info-words h2{font-size:clamp(39px,10vw,57px);line-height:1.38;margin-bottom:22px}
  .flow-join{padding:50px 0 90px}
  .join-layout{padding-top:45px}
  .join-ways{padding-top:25px}
  .join-ways li{grid-template-columns:39px 1fr 44px;gap:7px;padding:18px 0}
  .way-mark{font-size:25px}.join-ways strong{font-size:17px}.join-ways small{font-size:8px;text-align:right}
  .flow-info{padding-bottom:110px}
  .info-layout{padding-top:48px}
  .info-details{margin-top:15px}
  .info-details dl div{grid-template-columns:82px 1fr;gap:8px;padding:17px 0}
  .info-details dt{font-size:10px}.info-details dd{font-size:12px}
  .info-details>a{font-size:11px}
  .flow-info::after{width:190px;height:190px;right:-25px;bottom:-58px}
}