/* ============================================================
   PROCESS STAGES
   Each station on the Process timeline opens a detail view: the
   stage explained, and photographs of the work itself.

   Nothing on the timeline changes until the script has arrived and
   marked the steps interactive; without it the page is exactly the
   source's own. The view is a room entered from the timeline, in the
   site's own language: the drafting grid, mono labels, uppercase
   display type, and masks drawn back off the photographs.
   ============================================================ */

:root{
  --sv-e:  cubic-bezier(.22, 1, .36, 1);
  --sv-e2: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------- the timeline, once it can open ---------------- */
.process .process-step.is-interactive{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.process .process-step.is-interactive:focus{ outline:none; }
.process .process-step.is-interactive:focus-visible{ outline:1px solid var(--primer-bright); outline-offset:10px; }

.process .process-step .p-open{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:16px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .35s var(--sv-e), opacity .55s var(--ease), transform .55s var(--ease);
}
.process .process-step .p-open svg{ width:11px; height:11px; flex-shrink:0; transition:transform .45s var(--sv-e); }
/* arrives with the rest of the station, after its description */
html.js-anim .process .process-step .p-open{
  opacity:0; transform:translateX(-10px);
  transition-delay:calc(var(--i,0) * 70ms + 360ms);
}
html.js-anim .process .process-step.in .p-open{ opacity:1; transform:none; }

@media (hover:hover){
  .process .process-step.is-interactive h3{ transition:color .35s var(--sv-e); }
  .process .process-step.is-interactive:hover h3{ color:var(--primer-bright); }
  .process .process-step.is-interactive:hover .p-open{ color:var(--ink); transition-delay:0s; }
  .process .process-step.is-interactive:hover .p-open svg{ transform:translateX(4px); }
  .process .process-step.is-interactive.in:hover .dot{ border-color:var(--ink); transition-delay:0s; }
  .process .process-step.is-interactive.in:hover .dot::after{ background:var(--ink); }
}

/* the station that was pressed answers before the view covers it */
.process .process-step .dot::before{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--primer-bright); opacity:0; pointer-events:none;
}
.process .process-step.is-opening .dot::before{ animation:svPing .7s var(--sv-e) forwards; }
@keyframes svPing{
  0%  { opacity:.9; transform:scale(1); }
  100%{ opacity:0;  transform:scale(2.6); }
}

/* ---------------- the view ---------------- */
.stage-view{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--sv-e), visibility 0s linear .5s;
}
.stage-view.is-open{
  opacity:1; visibility:visible;
  transition:opacity .5s var(--sv-e), visibility 0s linear 0s;
}
.stage-view[hidden]{ display:none; }

/* the drafting grid, fading out down the page */
.stage-view::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 38%, transparent 70%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 38%, transparent 70%);
}

.sv-scroll{
  position:absolute; inset:0; z-index:1;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* ---------------- top bar + stage rail ---------------- */
.sv-bar{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg, rgba(11,12,12,.97) 0%, rgba(11,12,12,.93) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sv-bar-inner{
  max-width:var(--container); margin:0 auto;
  padding:22px var(--pad) 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.sv-crumb{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0;
}
.sv-crumb .sep{ opacity:.45; }
.sv-crumb .here{ color:var(--ink-mute); }
.sv-crumb .here b{ color:var(--primer-bright); font-weight:500; }

.sv-close{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); background:none; border:0; cursor:pointer; padding:0;
  transition:color .35s var(--sv-e);
}
.sv-close-icon{
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--bg);
  transition:border-color .35s var(--sv-e), transform .5s var(--sv-e);
}
.sv-close-icon svg{ width:15px; height:15px; }
.sv-close:hover{ color:var(--ink); }
.sv-close:hover .sv-close-icon{ border-color:var(--primer-bright); transform:rotate(90deg); }
.sv-close:focus-visible{ outline:none; }
.sv-close:focus-visible .sv-close-icon{ border-color:var(--primer-bright); box-shadow:0 0 0 1px var(--primer-bright); }

.sv-rail{ max-width:var(--container); margin:0 auto; padding:18px var(--pad) 0; position:relative; }
.sv-rail ol{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  position:relative;
}
.sv-rail-track{
  position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--line);
}
.sv-rail-fill{
  position:absolute; left:0; top:0; height:1px; width:0; background:var(--primer-bright);
  transition:width .8s var(--sv-e);
}
.sv-rail-step{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:0 12px 15px 0; position:relative;
  display:flex; align-items:baseline; gap:10px; min-width:0;
  font-family:var(--f-mono); color:var(--ink-faint);
  transition:color .35s var(--sv-e);
}
.sv-rail-step .n{ font-size:.66rem; letter-spacing:.12em; flex-shrink:0; }
.sv-rail-step .t{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
/* the marker that sits on the track under the current stage */
.sv-rail-step::after{
  content:''; position:absolute; left:0; bottom:-4px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1px solid var(--ink-faint);
  transition:border-color .35s var(--sv-e), background-color .35s var(--sv-e), transform .45s var(--sv-e);
}
.sv-rail-step.is-past{ color:var(--ink-mute); }
.sv-rail-step.is-past::after{ border-color:var(--primer-bright); }
.sv-rail-step[aria-current="step"]{ color:var(--ink); }
.sv-rail-step[aria-current="step"] .n{ color:var(--primer-bright); }
.sv-rail-step[aria-current="step"]::after{ border-color:var(--primer-bright); background:var(--primer-bright); transform:scale(1.15); }
.sv-rail-step:hover{ color:var(--ink); }
.sv-rail-step:focus{ outline:none; }
.sv-rail-step:focus-visible .t,
.sv-rail-step:focus-visible .n{ text-decoration:underline; text-underline-offset:4px; }

/* ---------------- a stage ---------------- */
.sv-stages{ position:relative; }
.sv-stage{
  max-width:var(--container); margin:0 auto;
  padding:clamp(40px, 7vh, 84px) var(--pad) clamp(40px, 6vh, 72px);
}
.sv-stage[hidden]{ display:none; }

.sv-grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:"head media" "detail media";
  grid-template-rows:auto 1fr;
  column-gap:clamp(40px, 6vw, 110px);
  align-items:start;
}
.sv-head{ grid-area:head; }
.sv-detail{ grid-area:detail; padding-top:clamp(28px, 4vh, 40px); }
.sv-media{ grid-area:media; }
/* the photographs stay in view while the text beside them is read -
   only where the screen is tall enough to hold them whole */
@media (min-width:901px) and (min-height:820px){
  .sv-media{ position:sticky; top:132px; }
}

.sv-num{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--primer-bright); display:block;
}
.sv-rule{
  display:block; height:1px; width:min(220px, 40vw);
  background:var(--primer-bright); opacity:.55;
  margin:16px 0 22px; transform-origin:0 50%;
}
.sv-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.1rem, 4.4vw, 3.9rem); line-height:1.02;
  letter-spacing:-.03em; text-transform:uppercase; color:var(--ink);
}
.sv-lead{
  margin-top:22px; color:var(--ink);
  font-size:clamp(1.02rem, 1.45vw, 1.2rem); line-height:1.62;
  max-width:44ch; text-wrap:pretty;
}
.sv-body p{
  color:var(--ink-mute); font-size:.96rem; line-height:1.75;
  max-width:56ch; text-wrap:pretty;
}
.sv-body p + p{ margin-top:16px; }

.sv-block{ margin-top:36px; }
.sv-label{
  font-family:var(--f-mono); font-weight:400; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
  border-top:1px solid var(--line); padding-top:16px; margin-bottom:6px;
}
.sv-list{ list-style:none; margin:0; padding:0; }
.sv-list li{
  display:grid; grid-template-columns:34px 1fr; gap:8px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  color:var(--ink); font-size:.92rem; line-height:1.5;
}
.sv-list li .i{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--primer-bright); }
.sv-output p{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; line-height:1.45;
  color:var(--ink); margin-top:10px; max-width:44ch;
}

/* ---------------- photographs ---------------- */
.sv-media{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(10px, 1.2vw, 16px);
}
.sv-shot{ margin:0; min-width:0; grid-column:span 3; }
.sv-shot:first-child{ grid-column:1 / -1; }
.sv-media-4 .sv-shot:not(:first-child){ grid-column:span 2; }
.sv-frame{
  position:relative; overflow:hidden;
  aspect-ratio:4 / 3;
  background-color:var(--bg-panel-2);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:24px 24px;
  border:1px solid var(--line-soft);
}
.sv-shot:first-child .sv-frame{ aspect-ratio:3 / 2; }
.sv-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(16%) brightness(.9);
  opacity:0;
  transition:opacity .7s var(--sv-e), transform 1.4s var(--sv-e), filter .7s var(--sv-e);
}
.sv-frame img.is-loaded{ opacity:1; }
@media (hover:hover){
  .sv-shot:hover .sv-frame img{ filter:grayscale(0%) brightness(1); transform:scale(1.035); }
}
.sv-shot figcaption{
  margin-top:10px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; line-height:1.55;
  color:var(--ink-mute);
}

/* ---------------- previous / next ---------------- */
.sv-foot{
  position:relative; z-index:4;
  max-width:var(--container); margin:0 auto;
  padding:0 var(--pad) clamp(40px, 7vh, 80px);
}
.sv-foot-inner{
  border-top:1px solid var(--line); padding-top:22px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.sv-step-btn{
  background:none; border:0; cursor:pointer; padding:6px 0; min-width:0;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  color:var(--ink-mute); text-align:left;
  transition:color .35s var(--sv-e);
}
.sv-step-btn.next{ align-items:flex-end; text-align:right; justify-self:end; }
.sv-step-btn .dir{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:10px;
}
.sv-step-btn .dir svg{ width:12px; height:12px; transition:transform .45s var(--sv-e); }
.sv-step-btn .name{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1rem, 1.6vw, 1.35rem); letter-spacing:-.01em; color:var(--ink);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sv-step-btn .name b{ font-family:var(--f-mono); font-weight:400; font-size:.7em; color:var(--primer-bright); margin-right:10px; letter-spacing:.08em; }
.sv-step-btn:hover .name{ color:var(--primer-bright); }
.sv-step-btn.prev:hover .dir svg{ transform:translateX(-4px); }
.sv-step-btn.next:hover .dir svg{ transform:translateX(4px); }
.sv-step-btn[disabled]{ visibility:hidden; }
.sv-step-btn:focus{ outline:none; }
.sv-step-btn:focus-visible .name{ text-decoration:underline; text-underline-offset:5px; }
.sv-all{
  background:none; border:1px solid var(--line); border-radius:22px; cursor:pointer;
  padding:11px 18px;
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  transition:border-color .35s var(--sv-e), color .35s var(--sv-e);
}
.sv-all:hover, .sv-all:focus-visible{ border-color:var(--primer-bright); color:var(--ink); outline:none; }

/* ---------------- motion ----------------
   Gated behind .sv-motion, which the script sets only when reduced
   motion is not requested. Without it every state below is simply
   the finished one. */
.sv-motion .sv-bar{ transform:translateY(-12px); transition:transform .7s var(--sv-e); }
.sv-motion.is-open .sv-bar{ transform:none; }

.sv-motion .sv-stage .sv-num,
.sv-motion .sv-stage .sv-lead,
.sv-motion .sv-stage .sv-detail{ opacity:0; transform:translateY(18px); }
.sv-motion .sv-stage .sv-rule{ transform:scaleX(0); }
.sv-motion .sv-stage .sv-title{ opacity:0; transform:translateY(28px); -webkit-clip-path:inset(0 0 100% 0); clip-path:inset(0 0 100% 0); }
.sv-motion .sv-stage .sv-frame{ -webkit-clip-path:inset(100% 0 0 0); clip-path:inset(100% 0 0 0); }
.sv-motion .sv-stage .sv-frame img{ transform:scale(1.14); }
.sv-motion .sv-stage figcaption{ opacity:0; }

.sv-motion .sv-stage.is-in .sv-num{ opacity:1; transform:none; transition:opacity .6s var(--sv-e) .05s, transform .8s var(--sv-e) .05s; }
.sv-motion .sv-stage.is-in .sv-rule{ transform:scaleX(1); transition:transform 1s var(--sv-e2) .1s; }
.sv-motion .sv-stage.is-in .sv-title{
  opacity:1; transform:none; -webkit-clip-path:inset(0 0 -12% 0); clip-path:inset(0 0 -12% 0);
  transition:opacity .5s var(--sv-e) .12s, transform 1s var(--sv-e) .12s, clip-path 1s var(--sv-e) .12s, -webkit-clip-path 1s var(--sv-e) .12s;
}
.sv-motion .sv-stage.is-in .sv-lead{ opacity:1; transform:none; transition:opacity .7s var(--sv-e) .26s, transform .9s var(--sv-e) .26s; }
.sv-motion .sv-stage.is-in .sv-detail{ opacity:1; transform:none; transition:opacity .7s var(--sv-e) .38s, transform .9s var(--sv-e) .38s; }
.sv-motion .sv-stage.is-in .sv-frame{
  -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--sv-e) calc(var(--k,0) * 90ms + 150ms), -webkit-clip-path 1.05s var(--sv-e) calc(var(--k,0) * 90ms + 150ms);
}
.sv-motion .sv-stage.is-in .sv-frame img{
  transform:scale(1);
  transition:opacity .7s var(--sv-e), transform 2s var(--sv-e) calc(var(--k,0) * 90ms + 150ms), filter .7s var(--sv-e);
}
.sv-motion .sv-stage.is-in figcaption{ opacity:1; transition:opacity .6s var(--sv-e) calc(var(--k,0) * 90ms + 520ms); }
@media (hover:hover){
  .sv-motion .sv-stage.is-in .sv-shot:hover .sv-frame img{ transform:scale(1.035); transition:opacity .7s var(--sv-e), transform 1.4s var(--sv-e), filter .7s var(--sv-e); }
}

/* leaving for a neighbouring stage: a short slide in the direction of travel */
.sv-stage.is-out{
  opacity:0; transform:translateX(calc(var(--dir, 1) * -28px));
  transition:opacity .26s var(--sv-e2), transform .26s var(--sv-e2);
}
.sv-motion .sv-stage.is-entering{ animation:svEnter .6s var(--sv-e) both; }
@keyframes svEnter{
  from{ transform:translateX(calc(var(--dir, 1) * 28px)); }
  to  { transform:none; }
}

/* ---------------- tablet ---------------- */
@media (max-width:1100px){
  .sv-rail-step .t{ display:none; }
  .sv-rail-step{ padding-right:0; }
}
@media (max-width:900px){
  .sv-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "media" "detail";
    grid-template-rows:auto;
  }
  .sv-media{ margin-top:32px; }
  .sv-detail{ padding-top:36px; }
  .sv-lead, .sv-body p, .sv-output p{ max-width:62ch; }
}

/* ---------------- phone ---------------- */
@media (max-width:640px){
  .sv-bar-inner{ padding-top:14px; }
  .sv-close-label{ display:none; }
  .sv-close-icon{ width:42px; height:42px; }
  .sv-crumb .lead-in, .sv-crumb .lead-in + .sep{ display:none; }
  .sv-rail{ padding-top:12px; }
  .sv-rail-step{ padding-bottom:12px; }
  .sv-rail-step .n{ font-size:.62rem; }

  .sv-stage{ padding-top:30px; padding-bottom:28px; }
  .sv-title{ font-size:clamp(1.9rem, 9vw, 2.6rem); }
  .sv-lead{ margin-top:16px; font-size:1rem; }
  .sv-rule{ margin:12px 0 16px; }

  .sv-media{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:26px; }
  .sv-shot, .sv-media-4 .sv-shot:not(:first-child){ grid-column:span 1; }
  .sv-shot:first-child{ grid-column:1 / -1; }
  .sv-shot:first-child .sv-frame{ aspect-ratio:4 / 3; }
  .sv-frame{ aspect-ratio:1 / 1; }
  /* a fourth picture would sit alone in its row: give it the width */
  .sv-media-4 .sv-shot:nth-child(4){ grid-column:1 / -1; }
  .sv-media-4 .sv-shot:nth-child(4) .sv-frame{ aspect-ratio:3 / 2; }
  .sv-shot figcaption{ font-size:.6rem; margin-top:8px; }

  .sv-body p{ font-size:.93rem; }
  .sv-block{ margin-top:30px; }
  .sv-list li{ font-size:.9rem; grid-template-columns:30px 1fr; }

  /* previous / next stay within reach of a thumb */
  .sv-foot{
    position:sticky; bottom:0; padding:0;
    background:linear-gradient(180deg, rgba(11,12,12,.9) 0%, rgba(11,12,12,.98) 30%);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .sv-foot-inner{
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px));
    grid-template-columns:1fr 1fr; gap:14px;
  }
  .sv-all{ display:none; }
  .sv-step-btn{ gap:5px; padding:4px 0; }
  .sv-step-btn .dir{ font-size:.58rem; }
  .sv-step-btn .name{ font-size:.86rem; }
  .sv-step-btn .name b{ margin-right:7px; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .stage-view, .stage-view.is-open{ transition:opacity .2s linear, visibility 0s linear 0s; }
  .sv-stage.is-out{ transform:none; transition:opacity .15s linear; }
  .process .process-step.is-opening .dot::before{ animation:none; }
  .sv-rail-fill{ transition:none; }
}

/* announced to screen readers when the stage changes; never seen */
.sv-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}