/* ------------------------------------------------------------------
   between us
   Its own room. The palette is taken out of the photograph itself:
   the near black of the floor, the candle amber, the costume red,
   and the warm light on skin. Nothing here answers to the rest of
   the site, which is the entire point of the page.
   ------------------------------------------------------------------ */

.betweenus{
  --bg:#08050A;
  --bg-2:#120A0B;          /* the floor, one step up */
  --ember:#36180D;         /* the dominant warm dark in the frame */
  --amber:#E8A857;         /* candlelight */
  --amber-soft:#E2B599;    /* warm light on skin */
  --red:#B11A12;           /* the costume */
  --white:#F6F2EC;         /* what you read */
  --grey:#A79B92;

  background:var(--bg);
  color:var(--white);
}
.betweenus .nav{
  background:var(--bg);
  border-bottom:1px solid rgba(232,168,87,.32);
}
.betweenus .nav__name{color:var(--white)}
.betweenus .nav__mark img{filter:invert(1) brightness(1.6) contrast(1.1)}
.betweenus .nav__links a{color:#BEB2A8}
.betweenus .nav__links a:hover{color:var(--amber)}
.betweenus .nav__toggle{color:var(--white)}
@media (max-width:860px){
  .betweenus .nav__links{background:var(--bg);border-bottom-color:rgba(232,168,87,.32)}
  .betweenus .nav__links a{border-bottom-color:rgba(255,255,255,.1)}
}

/* white on black wants more air and a lighter touch than black on white */
.betweenus body,
.betweenus .ground-paper,
.betweenus .ground-paper2,
.betweenus section{background:var(--bg)}
.betweenus .wrap{max-width:calc(1180px + (var(--pad) * 2))}
.betweenus .wrap > *{max-width:41rem}
.betweenus .wrap > .pq{max-width:44rem}
@media (max-width:1100px){
  .betweenus .wrap,.betweenus .wrap > *,.betweenus .wrap > .pq{max-width:46rem}
}
.betweenus p{
  color:#FFFFFF;
  font-size:23px;line-height:1.8;
  font-weight:400;letter-spacing:.003em;
}
@media (max-width:820px){
  .betweenus p{font-size:21px;line-height:1.78}
}
.betweenus h1,.betweenus h2,.betweenus h3{color:#FFFFFF}
.betweenus h2{margin-top:0}
.betweenus .eyebrow{color:var(--amber)}
.betweenus .eyebrow::before{background:var(--amber)}
.betweenus .meta,.betweenus .sources{color:#CFC5BA}
.betweenus hr.rule{border-top-color:rgba(232,168,87,.22)}
.betweenus .lede{color:#FFFBF4}
.betweenus a{color:var(--amber)}
.betweenus .act{color:var(--white);border-bottom-color:var(--amber)}
.betweenus .act::after{background:var(--amber)}

/* the quote is lit rather than raised */
.betweenus .pq{
  background:linear-gradient(180deg,rgba(54,24,13,.62),rgba(18,10,11,.5));
  border:1px solid rgba(232,168,87,.26);
  border-left:3px solid var(--amber);
  box-shadow:0 0 70px rgba(232,168,87,.10) inset;
  padding:clamp(30px,4vw,48px) clamp(26px,4vw,52px);
}
.betweenus .pq p{
  color:#FFFDF6;font-weight:400;
  text-shadow:0 0 34px rgba(232,168,87,.26);
}

/* ------------------------------------------------- the opening
   MEASURED: in this frame she occupies 20.4% to 76.1% of the width and
   her platforms sit between 31.7% and 69.8%. The darkening therefore
   stops at 18% and never reaches her. No top fade, no bottom fade, no
   edging of any kind. The whole of her is on the screen, undimmed.
   The words live on the background strip to her left and carry on out
   onto the black page. */
.bu-stage{position:relative;background:var(--bg);padding:0}
.bu-stage__pic{width:75vw;margin-left:auto;position:relative;line-height:0}
.bu-stage__pic img{width:100%;height:auto;display:block}
.bu-stage__pic::after{            /* ends at 18%. she starts at 20.4%. */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,
    var(--bg) 0%,var(--bg) 7%,rgba(8,5,10,.78) 12%,
    rgba(8,5,10,.30) 15.5%,rgba(8,5,10,0) 18%);
}
.bu-stage__text{
  position:absolute;z-index:2;
  left:var(--pad);top:50%;transform:translateY(-50%);
  width:calc(38vw - var(--pad) - 16px);
}
.betweenus .bu-head__eyebrow{
  font-size:15px;letter-spacing:.32em;color:#E8A857;
  text-transform:uppercase;margin:0 0 24px;
}
.bu-head__title{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(34px,4.4vw,66px);line-height:1;
  color:#FFFDF8;margin:0;letter-spacing:-.014em;
}
.bu-head__rule{
  width:92px;height:2px;margin:30px 0 0;
  background:linear-gradient(90deg,#B11A12,#E8A857);
  box-shadow:0 0 24px rgba(232,168,87,.7);
}
.betweenus .bu-head__line{
  font-family:var(--f-serif);font-style:italic;
  font-size:clamp(19px,1.9vw,27px);line-height:1.4;
  color:#F0DCC0;margin:26px 0 0;
}
.betweenus .bu-head__by{color:#D2C8BC;font-size:16px;margin:20px 0 32px;line-height:1.5}
.betweenus .bu-stage__text p:not([class]){
  font-size:21px;line-height:1.75;color:#FFFFFF;
}

@media (max-width:1100px){
  .bu-stage__pic{width:100%}
  .bu-stage__text{
    position:static;transform:none;width:auto;
    padding:clamp(30px,6vw,48px) var(--pad) 0;
  }
  .bu-stage__pic::after{display:none}
}

/* ------------------------------------------------- full bleed */
.bu-bleed{
  width:100vw;margin-left:calc(50% - 50vw);
  margin-top:clamp(56px,7vw,104px);margin-bottom:clamp(56px,7vw,104px);
  line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.bu-bleed img{width:100%;height:auto;display:block}
.betweenus .wrap > .bu-bleed{max-width:none}

/* ------------------------------------------------- words over picture
   The picture runs off the right edge and the paragraphs lie across
   its near side. A gradient carries the black out over the photograph
   so the words never sit on anything busy. Picture and text are one
   object rather than two things stacked. */
.bu-lay{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  padding:clamp(70px,9vw,140px) 0;
  display:flex;align-items:center;min-height:min(86vh,900px);
}
.bu-lay__pic{position:absolute;inset:0;z-index:0;overflow:hidden}
.bu-lay__pic img{
  position:absolute;right:0;top:0;height:100%;width:72%;
  object-fit:cover;object-position:center;
}
.bu-lay__pic::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--bg) 0%,var(--bg) 26%,rgba(8,5,10,.86) 44%,rgba(8,5,10,.42) 64%,rgba(8,5,10,.05) 88%),
    linear-gradient(to bottom,var(--bg) 0%,rgba(8,5,10,0) 16%,rgba(8,5,10,0) 84%,var(--bg) 100%);
}
.bu-lay__in{
  position:relative;z-index:1;
  width:100%;max-width:calc(1180px + (var(--pad) * 2));
  margin:0 auto;padding:0 var(--pad);
}
.bu-lay__in > *{max-width:37rem}
.betweenus .bu-lay__in h2{text-shadow:0 2px 26px rgba(0,0,0,.85)}
.betweenus .bu-lay__in p{text-shadow:0 1px 18px rgba(0,0,0,.9)}
@media (max-width:900px){
  .bu-lay{min-height:0;padding:clamp(48px,9vw,90px) 0}
  .bu-lay__pic img{width:100%;opacity:.5}
  .bu-lay__pic::after{
    background:linear-gradient(to bottom,var(--bg) 0%,rgba(8,5,10,.72) 26%,rgba(8,5,10,.72) 74%,var(--bg) 100%);
  }
}

/* ------------------------------------------------- the last frame
   The article ends on the words. Then the shut door, whole, and the
   page stops. No caption, no link, no footer. */
.bu-close{
  width:100vw;margin-left:calc(50% - 50vw);
  margin-top:clamp(56px,8vw,110px);
  line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 100%);
}
.bu-close img{width:100%;height:auto;display:block}

.betweenus .foot{background:#050308;border-top:1px solid rgba(232,168,87,.16)}
.betweenus .foot a:hover{color:var(--amber)}