/* The ten behaviour pages. Lifted from the approved renders in
   BIF_SITE_FINALS/06_Source/genbeh.py, made fluid. */

.beh h1{font-size:3.1rem;letter-spacing:-1.4px;line-height:1.06;max-width:20ch}
.beh h2{font-size:1.95rem;letter-spacing:-.6px;line-height:1.16;max-width:26ch}
.beh h3{font-size:1.14rem;font-weight:800;line-height:1.3}
.beh p{line-height:1.62;max-width:66ch}
.beh p + p{margin-top:13px}
.beh p.big{font-size:1.26rem;font-weight:500;color:var(--ink);line-height:1.5;max-width:64ch}
.beh p b{color:var(--ink);font-weight:700}

.sec{padding:52px 0;border-top:1px solid var(--hair)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:24px}

/* the hero lockup: the Manual icon, the name, the line under it */
.behhero{display:flex;align-items:flex-end;gap:24px;margin-top:20px;flex-wrap:wrap}
.behhero img{height:74px;width:auto}
.behhero .nm{border-top:5px solid var(--ink);padding-top:9px;font-size:2.05rem;font-weight:800;
  letter-spacing:-.8px;line-height:1}
.behhero .ds{font-size:1.3rem;color:var(--muted);padding-bottom:4px}

/* the week layup, under the question */
.weekbox{border-top:3px solid var(--ink);border-bottom:1px solid var(--hair);margin-top:38px}
.wkhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:14px 0 16px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.wkhead b{font-size:1.32rem;font-weight:800;letter-spacing:-.5px;margin-left:10px}
.wkgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.wkgrid > div{padding:20px 26px 22px 0;border-right:1px solid var(--hair)}
.wkgrid > div:last-child{border-right:0;padding-right:0}
.wkgrid > div:not(:first-child){padding-left:26px}
.wkgrid .ic{height:26px;display:flex;align-items:flex-end}
.wkgrid .lb{font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:#A9A296;margin-top:11px}
.wkgrid .th{font-size:1.04rem;font-weight:700;line-height:1.35;margin-top:5px;color:var(--ink);
  max-width:21ch}
.wkgrid .ex{font-size:.86rem;color:var(--muted);line-height:1.4;margin-top:4px}
.wkgrid a.th{text-decoration:underline;text-decoration-color:var(--yellow);
  text-decoration-thickness:3px;text-underline-offset:3px}

/* the full bleed band */
.bandwrap{width:100%;height:430px;margin-top:40px;overflow:hidden}
.band{width:100%;height:100%;display:block}

/* the four brain states, and any block set like them */
.state{display:grid;grid-template-columns:184px 1fr;gap:34px;padding:20px 0;
  border-top:1px solid var(--hair);margin:0}
.state dt{display:block}
.state .nm{display:block;font-size:1.28rem;font-weight:800;letter-spacing:-.4px;line-height:1.2}
.state .sub{display:block;font-size:.87rem;font-weight:600;color:var(--muted);margin-top:3px;
  line-height:1.3}
.state dd{margin:0}

/* a small note under a section, where the copy names something that lives in
   the Manual rather than on the page */
.aside{margin-top:26px;font-size:.92rem;color:var(--muted);border-left:3px solid var(--yellow);
  padding-left:16px;max-width:60ch}

/* the one highlighted line that carries the argument */
.pull{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;line-height:1.75;margin-top:26px}
.pull span{background:var(--yellow);padding:2px 9px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}

.marks{margin-top:20px}
.marks div{padding:12px 0 12px 30px;border-top:1px solid var(--hair);position:relative;
  font-size:1.04rem;font-weight:600;color:var(--ink);line-height:1.45}
.marks div:before{content:"";position:absolute;left:0;top:19px;width:14px;height:5px;
  background:var(--yellow)}

.evgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px;margin-top:26px}

.src{font-size:.83rem;line-height:1.6;color:#7A7C7E;max-width:none}
.src a{border-bottom:1px solid var(--hair)}

/* the door at the foot, into the module that holds this behaviour.
   v3 sets it as an ink panel inside the content column, not a full bleed band. */
.door{background:var(--ink);color:var(--paper);padding:50px 60px;margin-top:56px}
.door .eyebrow{color:#8C8A85}
.door p{color:#B9B7B2;max-width:62ch;margin-top:14px}
.door .dgrid{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:center;
  margin-top:16px}
.door .dh{font-size:1.9rem;font-weight:800;letter-spacing:-.6px;line-height:1.2;
  color:var(--paper)}
.door .dact{text-align:right}
.door .obtn{display:inline-block;padding:11.5px 24.5px;border:1.5px solid var(--paper);
  color:var(--paper);font-weight:700;font-size:.95rem;
  transition:background-color .12s ease,color .12s ease}

/* Be, not a Do. v3 sets the claim as a small tracked label, not a heading.
   Sentence case in the markup, uppercased here. */
.beh .belab, .belab{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);margin-top:30px;max-width:none;line-height:1.7}

/* references, under the door, inset to line up with it */
.refs{padding:34px 60px 6px}
.refs .n{display:block;margin-bottom:12px}
.refs .src{text-indent:-1.5em;padding-left:1.5em}
.refs .src + .src{margin-top:9px}
.refs .src.deep{text-indent:0;padding-left:0;margin-top:20px}

/* prev and next. It sits tight under the ink door, which anchors it, instead of
   floating in dead space above the footer. No rule of its own: the door is the
   divider. */
.pager{display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:22px 60px 0}
.pager a{display:block;max-width:44%}
.pager a:hover .t{border-bottom:2px solid var(--yellow)}
.pager .n{display:block}
.pager .t{font-size:1.12rem;font-weight:800;letter-spacing:-.3px;margin-top:5px;
  display:inline-block;border-bottom:2px solid transparent}
.pager .next{text-align:right;margin-left:auto}

@media (max-width:900px){
  .beh h1{font-size:2.4rem;letter-spacing:-1px}
  .beh h2{font-size:1.65rem}
  .cols{grid-template-columns:1fr;gap:0}
  .cols > div + div{margin-top:13px}
  .evgrid{grid-template-columns:1fr;gap:28px}
  .wkgrid{grid-template-columns:1fr 1fr}
  .wkgrid > div{border-right:0;border-top:1px solid var(--hair);padding:18px 0}
  .wkgrid > div:not(:first-child){padding-left:0}
  .wkgrid > div:nth-child(2n){padding-left:26px;border-left:1px solid var(--hair)}
  .bandwrap{height:260px}
  .state{grid-template-columns:1fr;gap:8px}
  .pull{font-size:1.24rem;line-height:1.85}
  .door{padding:34px 26px}
  .door .dact .btn,.door .obtn{display:block;width:100%;text-align:center}
  .pager{padding:22px 0 0}
  .door .dgrid{grid-template-columns:1fr;gap:28px}
  .door .dact{text-align:left}
  .refs{padding:32px 0 6px}
  .sec{padding:38px 0}
}
@media (max-width:680px){
  .beh h1{font-size:2rem}
  .wkgrid{grid-template-columns:1fr}
  .wkgrid > div:nth-child(2n){padding-left:0;border-left:0}
  .behhero img{height:56px}
  .behhero .nm{font-size:1.6rem}
  .behhero .ds{font-size:1.05rem}
}