/* case-study pages: shares tokens with styles.css, adds page chrome */

.case-nav{position:sticky;background:var(--first-color);padding-bottom:22px;}

.section.case{padding-top:120px;}

.case-head{max-width:760px;padding-bottom:56px;}

.case-title{
  font-family:var(--display-font);
  font-size:clamp(3rem,9vw,7rem);
  line-height:.9;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:18px 0 0;
}

.case-lede{
  margin:22px 0 0;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--third-color);
  max-width:56ch;
}

.case-tags{margin-top:26px;}

/* ---------- before / after ---------- */
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px;row-gap:40px;
  align-items:start;
}

.ba-col{display:flex;flex-flow:column;}

.ba-cap{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display-font);
  font-size:var(--font-work-title);
  letter-spacing:.9px;
  text-transform:uppercase;
  padding-bottom:14px;
}
.ba-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.ba-dot.before{background:#6b6b70;}
.ba-dot.after{background:#fff;}

.ba-frame{
  border:1px solid #ffffff1f;
  border-radius:16px;
  overflow:hidden;
  background:#0b0b0d;
}

/* fixed viewport onto the embedded site */
.ba-shot{
  position:relative;
  width:100%;
  height:520px;
  overflow:hidden;
}
.ba-shot iframe{
  position:absolute;
  top:0;left:0;
  border:0;
  transform-origin:top left;
}

.ba-open{
  margin-top:16px;
  align-self:flex-start;
  display:inline-block;
  border:1px solid #ffffff2e;
  border-radius:100px;
  padding:10px 20px;
  text-decoration:none;
  color:var(--second-color);
  background:#ffffff0d;
  font-family:var(--display-font);
  font-size:var(--font-work-title);
  letter-spacing:.9px;
  text-transform:uppercase;
  line-height:1;
  transition:border-color .3s ease,background .3s ease;
}
.ba-open:hover{border-color:#ffffff70;background:#ffffff17;}
.ba-open.primary{background:var(--second-color);color:var(--first-color);border-color:var(--second-color);}
.ba-open.primary:hover{opacity:.85;background:var(--second-color);}

.case-back{
  display:inline-block;
  margin-top:64px;
  color:var(--third-color);
  text-decoration:none;
  font-family:var(--display-font);
  font-size:var(--font-work-title);
  letter-spacing:.9px;
  text-transform:uppercase;
  transition:color .3s ease;
}
.case-back:hover{color:var(--second-color);}

@media (max-width:991px){
  .section.case{padding-top:96px;}
  .case-nav{padding:20px 5% 18px;}
  .ba-grid{column-gap:24px;row-gap:32px;}
  .ba-shot{height:400px;}
}

@media (max-width:767px){
  .ba-grid{grid-template-columns:1fr;}
  .ba-shot{height:340px;}
  .case-head{padding-bottom:36px;}
  .case-lede{font-size:.95rem;}
}

/* ---------- case study prose ---------- */
.case-meta{
  display:grid;
  grid-template-columns:repeat(4,auto);
  gap:38px;
  margin-top:38px;
  padding:24px 0;
  border-top:1px solid #ffffff1f;
  border-bottom:1px solid #ffffff1f;
}
.case-meta dt{
  font-family:var(--display-font);
  font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;
  color:#ffffff5c;margin:0 0 7px;
}
.case-meta dd{margin:0;font-size:.95rem;line-height:1.5;}

.prose{max-width:74ch;margin:0 auto;}
.prose h2{
  font-family:var(--display-font);
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1;letter-spacing:.6px;text-transform:uppercase;
  margin:72px 0 20px;
}
.prose h3{
  font-family:var(--display-font);
  font-size:1.45rem;letter-spacing:.5px;text-transform:uppercase;
  margin:44px 0 14px;
}
.prose p{margin:0 0 18px;font-size:1rem;line-height:1.7;color:var(--third-color);}
.prose ul{margin:0 0 20px;padding:0;list-style:none;}
.prose li{
  position:relative;padding-left:20px;margin-bottom:11px;
  font-size:1rem;line-height:1.65;color:var(--third-color);
}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#ffffff59;}

.case-fig{margin:44px 0;}
.case-fig.wide{max-width:none;}
.case-fig img{
  width:100%;display:block;border-radius:16px;
  border:1px solid #ffffff1f;background:#0b0b0d;
}
.case-fig figcaption{
  margin-top:11px;font-family:var(--display-font);
  font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:#ffffff5c;
}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:44px 0;}
.fig-pair figure{margin:0;}

.case-hero-fig{margin:56px 0 0;}

@media (max-width:767px){
  .case-meta{grid-template-columns:1fr 1fr;gap:22px;}
  .fig-pair{grid-template-columns:1fr;}
  .prose h2{margin-top:52px;}
}

/* head sharing the article's column, so the page has one spine */
.case-head.col{max-width:74ch;margin-inline:auto;}
.case-head.col .case-meta{grid-template-columns:repeat(3,auto);}

/* dateline sitting directly above the article body */
.dateline{
  margin:0 0 6px;
  font-family:var(--display-font);
  font-size:.82rem;letter-spacing:1.3px;text-transform:uppercase;
  color:#ffffff5c;
}
.dateline-note{
  margin:0 0 4px;
  font-size:.88rem;line-height:1.55;color:#ffffff5c;
  font-style:italic;
}
.dateline-rule{border:0;border-top:1px solid #ffffff1f;margin:22px 0 0;}

@media (max-width:767px){
  .case-head.col .case-meta{grid-template-columns:1fr 1fr;}
}

.case-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.case-links .ba-open{margin-top:0;}

/* full-length screen captures: a fixed window you scroll inside, so a
   7,800px tall shot does not stretch the article */
.fig-scroll{margin:44px 0;}
.fig-scroll .pair{display:flex;gap:22px;flex-wrap:wrap;}
.fig-scroll figure{margin:0;flex:1 1 260px;max-width:320px;}
.fig-scroll .win{
  height:520px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:18px;
  border:1px solid #ffffff1f;
  background:#0b0b0d;
}
.fig-scroll .win img{width:100%;display:block;border:0;border-radius:0;}
.fig-scroll .win::-webkit-scrollbar{width:6px;}
.fig-scroll .win::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:3px;}
.fig-scroll figcaption{
  margin-top:11px;font-family:var(--display-font);
  font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:#ffffff5c;
}

/* the original hero banner, reused as a full-bleed breather */
.band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  height:200px;
  margin-block:64px;
  background-size:cover;
  background-position:center;
}

.fig-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0;}
.fig-trio figure{margin:0;}

@media (max-width:767px){
  .fig-trio{grid-template-columns:1fr 1fr;}
  .band{height:130px;margin-block:44px;}
  .fig-scroll .win{height:420px;}
}

/* a single phone screen should not fill the whole column */
.case-fig.phone{max-width:340px;margin-inline:auto;}

/* ---------- contact page ---------- */
.contact-page .nav{position:absolute;padding-top:28px;}

.contact-main{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:140px 2% 80px;
}

.contact-kicker{color:#ffffff5c;}

.contact-page-title{
  font-family:var(--display-font);
  font-size:clamp(3.6rem,13vw,11rem);
  line-height:.86;
  letter-spacing:1px;
  text-transform:uppercase;
  margin:16px 0 0;
}

.contact-page-lede{
  margin:24px 0 0;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--third-color);
  max-width:46ch;
}

.contact-main .contact-rows{margin-top:64px;border-top:0;}
.contact-back{margin-top:56px;}

@media (max-width:767px){
  .contact-main{padding:120px 6% 64px;align-items:flex-start;}
  .contact-page-lede{font-size:.95rem;}
  .contact-main .contact-rows{margin-top:44px;}
}

/* ---------- passcode gate ---------- */
html.locked body > *:not(.gate){display:none !important;}
html.locked, html.locked body{overflow:hidden;}

.gate{
  position:fixed;inset:0;z-index:9999;
  background:var(--first-color);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.gate-inner{width:340px;max-width:88vw;text-align:center;}
.gate-title{
  font-family:var(--display-font);
  font-size:2rem;line-height:1;letter-spacing:1px;text-transform:uppercase;
  margin:0 0 10px;color:var(--second-color);
}
.gate-sub{color:var(--third-color);font-size:.95rem;line-height:1.5;margin:0 0 24px;}
.gate-input{
  width:100%;padding:14px 18px;
  background:#ffffff0d;color:var(--second-color);
  border:1px solid #ffffff2e;border-radius:100px;
  font:inherit;font-size:1rem;text-align:center;letter-spacing:.4em;
  outline:none;transition:border-color .3s ease;
}
.gate-input:focus{border-color:#ffffff8c;}
.gate-btn{
  margin-top:14px;width:100%;
  padding:14px 24px;border:0;border-radius:100px;cursor:pointer;
  background:var(--second-color);color:var(--first-color);
  font-family:var(--display-font);font-size:1rem;letter-spacing:1px;text-transform:uppercase;
}
.gate-err{color:#ff6b6b;font-size:.85rem;margin:12px 0 0;min-height:1em;}