/* ==========================================================================
   LINE AND LIGHT - the pages beyond the home

   The home page holds the components; this file holds the ones the rest of
   the site needs. Same rules: only the drawing animates, the datum never
   moves, orange is annotation and never a panel, native scroll everywhere.
   ========================================================================== */

/* ---------- A · A page opening -------------------------------------------
   Every page strikes the same datum and then says what the page is. The
   ground changes, the position of the line does not. */
.pg{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(380px,62svh,680px);padding-top:calc(var(--datum) + 2vh)}
.pg--ink{background:var(--ink);color:#fff}
.pg--paper{background:var(--paper);color:var(--ink)}
.pg--film{background:#070707;color:#fff;min-height:100svh}
.pg__film{position:absolute;inset:0}
.pg__film img,.pg__film video{width:100%;height:100%;object-fit:cover}
.pg__film video{position:absolute;inset:0;opacity:0;transition:opacity .7s linear}
.pg__film video.is-ready{opacity:1}
.pg--film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(183deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 34%,rgba(0,0,0,.84) 100%)}
.pg__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);z-index:2;opacity:.9}
.pg__in{position:relative;z-index:3;width:100%;padding-bottom:clamp(30px,6vh,74px)}
.pg h1{font-size:min(clamp(2.3rem,7vw,6rem),13vh);max-width:17ch;text-wrap:balance}
.pg__lead{margin-top:clamp(14px,2.2vh,26px);font-size:var(--t-lead);
  font-weight:500;max-width:52ch}
.pg--paper .pg__lead{color:#3a3a3a}
.pg--ink .pg__lead,.pg--film .pg__lead{color:var(--grey-cool)}

/* the one place the address is set as display type */
.mailbig{display:inline-block;margin-top:clamp(20px,3.4vh,40px);
  font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.75rem,6vw,5rem);word-break:break-word}
.mailbig:hover{color:var(--orange)}

/* ---------- B · The services ---------------------------------------------
   Three stages, each a wide row rather than a card. The services are a
   schedule: a name, what it covers, and a rule between each. */
.stages{background:var(--ink);color:#fff;padding-block:clamp(14px,2vh,30px) clamp(44px,8vh,110px)}
.stage{padding-block:clamp(34px,5.5vh,76px);border-top:1px solid rgba(255,255,255,.16)}
.stage:first-child{border-top:0}
@media (min-width:900px){
  .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    gap:clamp(24px,5vw,90px);align-items:start}
}
.stage__num{color:var(--orange);font-family:var(--display);font-weight:600;
  line-height:.9;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.stage h2{font-size:clamp(1.8rem,3.6vw,3rem);margin-top:8px}
.stage__line{margin-top:16px;color:var(--grey-cool);max-width:40ch}
.stage__list{margin-top:22px}
@media (min-width:900px){ .stage__list{margin-top:0} }
.stage__list li{padding-block:clamp(16px,2.4vh,26px);
  border-top:1px solid rgba(255,255,255,.16)}
.stage__list li:first-child{border-top:0}
@media (min-width:900px){ .stage__list li:first-child{border-top:1px solid rgba(255,255,255,.16)} }
@media (min-width:620px){
  .stage__list li{display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
    gap:clamp(14px,3vw,40px);align-items:baseline}
}
.stage__list h3{font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em}
.stage__list p{color:var(--grey-cool);margin-top:4px}
@media (min-width:620px){ .stage__list p{margin-top:0} }
.stages__pic .band__in h2{font-size:clamp(1.8rem,3.6vw,3rem)}

/* ---------- C · The projects index ---------------------------------------
   Four entries down the page, each one the same frame the home carries, so a
   project is read the same way wherever it is met. */
.filt{background:var(--paper);color:var(--ink);
  padding-block:clamp(20px,3.4vh,40px) 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px clamp(16px,3vw,28px)}
.filt .note{color:#636363}
.filt > div{display:flex;flex-wrap:wrap;gap:8px}
.filt button{border:1px solid rgba(0,0,0,.28);padding:9px 16px;
  font-size:var(--t-note);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.filt button:hover{border-color:var(--ink)}
.filt button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.ents{background:var(--paper);color:var(--ink);padding-block:clamp(10px,2vh,24px) clamp(30px,5vh,70px)}
.ent{padding-block:clamp(34px,6vh,88px);border-top:1px solid rgba(0,0,0,.14)}
.ent:first-child{border-top:0}
.ent__num{color:var(--orange);font-family:var(--display);font-weight:600;
  line-height:.82;letter-spacing:-.04em;font-size:clamp(2.6rem,6vw,5rem);margin-bottom:.14em}
@media (min-width:1000px){
  .ent__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    column-gap:clamp(24px,4vw,70px);align-items:end}
  .ent__num{grid-column:1 / -1}
  .ent__say{padding-top:4px}
}
.ent__say{margin-top:22px}
@media (min-width:1000px){ .ent__say{margin-top:0} }
.ent__say h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.ent__say h2 a:hover{color:var(--orange)}
.ent__meta{margin-top:12px;color:#555;font-size:var(--t-note);
  letter-spacing:.1em;text-transform:uppercase}
.ent__note{margin-top:16px;color:#3a3a3a;max-width:44ch}
.ent__say p:last-child{margin-top:clamp(20px,3vh,32px)}

/* ---------- D · A project ------------------------------------------------ */
.phero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:84svh;background:#070707;color:#fff;padding-top:calc(var(--datum) + 2vh)}
.phero__pic{position:absolute;inset:0}
.phero__pic img,.phero__pic video{width:100%;height:100%;object-fit:cover}
.phero__pic video{position:absolute;inset:0;opacity:0;transition:opacity .7s linear}
.phero__pic video.is-ready{opacity:1}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(183deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 34%,rgba(0,0,0,.84) 100%)}
.phero__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);z-index:2;opacity:.9}
.phero__in{position:relative;z-index:3;width:100%;padding-bottom:clamp(28px,5vh,70px)}
.phero__num{color:var(--orange);font-family:var(--display);font-weight:600;
  line-height:.9;font-size:clamp(2.2rem,4.6vw,3.6rem)}
.phero h1{margin-top:8px;font-size:min(clamp(2.1rem,6.2vw,5.2rem),13vh);max-width:15ch}
.phero__status{margin-top:clamp(14px,2.2vh,22px);display:inline-flex;align-items:center;
  gap:10px;font-size:var(--t-note);letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.phero__status::before{content:"";width:8px;height:8px;background:var(--orange);flex:none}

.pfacts{background:var(--paper);color:var(--ink);padding-block:clamp(38px,6.5vh,96px)}
@media (min-width:900px){
  .pfacts__in{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
    gap:clamp(26px,5vw,84px)}
}
.pfacts dl{display:grid;gap:clamp(16px,2.4vh,24px)}
.pfacts dt{font-size:var(--t-note);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:#636363}
.pfacts dd{margin:0;margin-top:6px}
.pfacts__say{margin-top:26px}
@media (min-width:900px){ .pfacts__say{margin-top:0} }
.pfacts__say p{color:#2e2e2e;max-width:58ch}
.pfacts__say p + p{margin-top:18px}

.psheet{background:var(--paper);color:var(--ink);
  padding-block:0 clamp(44px,8vh,110px)}
.psheet__one{margin-top:clamp(26px,4vh,56px)}
.psheet__sheet{aspect-ratio:16/10}
.psheet figcaption{margin-top:12px;font-size:var(--t-note);letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;color:#636363}
.psheet__honest{margin-top:clamp(28px,4.5vh,60px);color:#3a3a3a;max-width:54ch;
  padding-top:18px;border-top:1px solid rgba(0,0,0,.16)}

.next{background:var(--paper);color:var(--ink);
  border-top:1px solid rgba(0,0,0,.14);padding-block:clamp(32px,5.5vh,78px)}
.next .note{color:#636363}
.next__go{display:flex;align-items:baseline;gap:clamp(14px,3vw,34px);margin-top:14px}
.next__num{color:var(--orange);font-family:var(--display);font-weight:600;
  line-height:.9;font-size:clamp(1.9rem,3.8vw,3rem)}
.next__name{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.2vw,2.6rem);transition:color .25s var(--ease)}
.next__go:hover .next__name{color:var(--orange)}

/* ---------- E · The studio ------------------------------------------------ */
.pill{background:var(--ink);color:#fff;padding-block:clamp(46px,8.5vh,120px)}
.pill h2{font-size:clamp(1.9rem,4.2vw,3.4rem);max-width:20ch;text-wrap:balance}
.pill__list{margin-top:clamp(28px,4.5vh,60px);display:grid;gap:clamp(20px,3.4vh,36px)}
@media (min-width:780px){
  .pill__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,60px)}
}
.pill__list li{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.pill__list li::before{content:"";position:absolute;left:0;top:-1px;
  width:38px;height:2px;background:var(--orange)}
.pill__list h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.pill__list p{margin-top:10px;color:var(--grey-cool)}

.prin{background:var(--paper);color:var(--ink);padding-block:clamp(46px,8.5vh,120px)}
.prin h2{font-size:clamp(1.9rem,4.2vw,3.4rem);text-wrap:balance}
.prin__list{margin-top:clamp(26px,4vh,56px);display:grid}
@media (min-width:760px){
  .prin__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,6vw,96px)}
}
.prin__list li{padding-block:clamp(18px,2.6vh,26px);border-top:1px solid rgba(0,0,0,.16);
  display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:16px}
.prin__num{grid-column:1;grid-row:1 / span 2;color:var(--orange);
  font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.05}
.prin__list h3{grid-column:2;font-size:clamp(1.15rem,1.7vw,1.45rem)}
.prin__list li p:last-child{grid-column:2;margin-top:7px;color:#3a3a3a}

/* ---------- F · The six stages, measured out ------------------------------
   A dimension string, not a row of cards: one rule, six ticks, six labels. */
.runs{background:var(--paper);color:var(--ink);padding-block:clamp(46px,8.5vh,120px)}
.runs--dark{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.16)}
.runs h2{font-size:clamp(1.9rem,4.2vw,3.4rem);text-wrap:balance}
.runs__lead{margin-top:16px;color:#3a3a3a;max-width:52ch;font-size:var(--t-lead);font-weight:500}
.runs--dark .runs__lead{color:var(--grey-cool)}
.dim{position:relative;margin-top:clamp(30px,5vh,66px);display:grid;gap:26px;
  padding-left:26px}
.dim::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--orange)}
.dim li{position:relative}
.dim__tick{position:absolute;left:-26px;top:9px;width:12px;height:1px;background:var(--orange)}
@media (min-width:900px){
  .dim{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,2vw,30px);
    padding-left:0;padding-top:22px}
  .dim::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .dim li{padding-right:10px}
  .dim__tick{left:0;top:-27px;width:1px;height:11px}
}
/* the rule and the ticks carry the orange; the figures are too small for it
   and are set in the ground's own ink */
.dim__num{color:var(--ink);font-size:var(--t-note);letter-spacing:.16em;font-weight:500}
.runs--dark .dim__num{color:#fff}
.dim h3{margin-top:9px;font-size:clamp(1.1rem,1.5vw,1.3rem)}
.dim__line{margin-top:8px;color:#3a3a3a;font-size:.9375rem}
.runs--dark .dim__line{color:var(--grey-cool)}

/* ---------- G · The home's closing paragraph ------------------------------ */
.say{background:var(--ink);color:#fff;padding-block:clamp(50px,9vh,132px)}
.say__lead{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:500;line-height:1.3;
  max-width:36ch}
.say__pill{margin-top:clamp(30px,5vh,66px);display:grid;gap:clamp(20px,3.4vh,34px)}
@media (min-width:780px){
  .say__pill{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,60px)}
}
.say__pill li{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.say__pill li::before{content:"";position:absolute;left:0;top:-1px;
  width:38px;height:2px;background:var(--orange)}
.say__pill span{display:block;font-family:var(--display);font-weight:600;
  letter-spacing:-.02em;font-size:clamp(1.2rem,2vw,1.6rem)}
.say__pill p{margin-top:9px;color:var(--grey-cool)}
.say__go{margin-top:clamp(28px,4.5vh,58px)}
.gal__all{margin-top:clamp(20px,3vh,34px)}

/* ---------- H · The close on every page ----------------------------------- */
.cta{position:relative;background:var(--ink);color:#fff;
  padding-block:clamp(50px,9vh,136px)}
.cta::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange)}
.cta__kick{color:var(--grey-cool);font-size:var(--t-note);letter-spacing:.16em;
  text-transform:uppercase;font-weight:500}
.cta__mail{display:block;margin-top:14px;font-family:var(--display);font-weight:600;
  letter-spacing:-.035em;line-height:1;font-size:clamp(1.75rem,6vw,5rem);
  word-break:break-word;transition:color .25s var(--ease)}
.cta__mail:hover{color:var(--orange)}
.cta__note{margin-top:clamp(20px,3vh,34px);color:var(--grey-cool);max-width:46ch}

.reach{background:var(--paper);color:var(--ink);padding-block:clamp(46px,8.5vh,120px)}
@media (min-width:760px){
  .reach__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:clamp(26px,5vw,84px)}
}
.reach .note{color:#636363}
.reach__in > div + div{margin-top:30px}
@media (min-width:760px){ .reach__in > div + div{margin-top:0} }
.reach__big{display:inline-block;margin-top:12px;font-family:var(--display);
  font-weight:600;letter-spacing:-.03em;font-size:clamp(1.45rem,3.2vw,2.5rem);
  word-break:break-word;transition:color .25s var(--ease)}
.reach__big:hover{color:var(--orange)}
.reach__list{margin-top:14px;display:grid;gap:10px}
.reach__list a:hover{color:var(--orange)}

/* ---------- I · The footer ------------------------------------------------ */
.foot{position:relative;background:var(--ink);color:#fff;
  padding-block:clamp(48px,8vh,112px) clamp(24px,4vh,48px)}
.foot__datum{position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange)}
.foot__in{display:grid;gap:clamp(30px,5vh,58px)}
@media (min-width:900px){
  .foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.62fr) minmax(0,.95fr);
    gap:clamp(24px,4vw,72px);align-items:start}
}
.foot__mark img{height:20px;width:auto;filter:invert(1)}
.foot__mark .note{margin-top:12px;color:var(--grey-mid)}
.foot__line{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  line-height:1.02;font-size:clamp(1.7rem,3.2vw,2.8rem)}
.foot__nav .note,.foot__reach .note{color:var(--grey-mid);margin-bottom:14px}
.foot__nav li,.foot__reach li{padding-block:5px}
.foot__reach li{color:var(--grey-cool)}
.foot a{transition:color .25s var(--ease)}
.foot a:hover{color:var(--orange)}
.foot__mail{word-break:break-word}
.foot__colo{margin-top:clamp(36px,6vh,74px);padding-top:clamp(18px,3vh,30px);
  border-top:1px solid rgba(255,255,255,.16);display:grid;gap:14px}
@media (min-width:900px){
  .foot__colo{grid-template-columns:minmax(0,1fr) minmax(0,17rem);
    gap:clamp(24px,4vw,64px);align-items:start}
}
.foot__colo p{color:var(--grey-mid);font-size:var(--t-note);line-height:1.6;max-width:76ch}
.foot__colo .note{color:var(--grey-mid)}

/* ---------- J · A light ground button, and the page that is not here ------ */
.btn--line{border-color:rgba(0,0,0,.4);color:var(--ink)}
.btn--line:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.nf .pg__lead{max-width:40ch}
.nf__list{margin-top:clamp(26px,4vh,50px);display:flex;flex-wrap:wrap;
  gap:10px clamp(20px,3vw,34px);font-family:var(--display);font-weight:600;
  letter-spacing:-.03em;font-size:clamp(1.3rem,2.6vw,2rem)}
.nf__list a{transition:color .25s var(--ease)}
.nf__list a:hover{color:var(--orange)}

/* ---------- K · The bar knows which page it is on ------------------------- */
/* Orange at 13px measures under 4.5:1 on both grounds, so the page you are on
   is marked the way a drawing marks a thing: with a line under it. */
.top a.lk{position:relative}
.top a.lk.is-here::after{content:"";position:absolute;left:0;right:0;bottom:-8px;
  height:2px;background:var(--orange)}
.menu__nav a[aria-current="page"]{position:relative;display:inline-block}
.menu__nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;
  bottom:.06em;height:3px;background:var(--orange)}

/* ---------- L · Without a script, every sheet says what it is ------------- */
.sheetcap{display:none}
html:not(.js-sheets) .sheetcap{display:block;margin-top:10px;font-size:var(--t-note);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#636363}
html:not(.js-sheets) .slide__sheet + .slide__sheet{margin-top:clamp(18px,3vh,34px)}