/* Promoted from brand/v2-pi-hero-workshop.css. The page carried a workshop body class and its
   stylesheet into canon, which is how a header-frame override shipped
   unnoticed. Same rules, no scaffolding. */
/* Isolated PI opening workshop.
   Direction: one continuous night field, one thesis, one dominant live surface.
   Product depiction follows the current mounted PI shell inside one exhibit slab. */

.piw-opening{
  padding:clamp(8.5rem,9vw,9rem) 0 clamp(7rem,10vw,10rem);
  overflow:hidden;
}

.piw-opening .ground::before{
  background:
    radial-gradient(ellipse 68% 38% at 50% 17%,rgba(255,255,255,.055),rgba(255,255,255,.018) 58%,transparent 80%),
    radial-gradient(ellipse 78% 38% at 50% 72%,rgba(156,74,51,.08),transparent 70%);
}

.piw-copy{
  max-width:72rem;
  display:grid;
  justify-items:center;
  text-align:center;
}

.piw-title{
  display:grid;
  justify-items:center;
  gap:1.25rem;
}

.piw-title .eyebrow{
  gap:.7rem;
}

.piw-title .eyebrow i{
  display:inline-block;
  width:.2rem;
  height:.2rem;
  border-radius:50%;
  background:currentColor;
  opacity:.58;
}

.piw-title h1{
  max-width:75rem;
  font-size:clamp(3.75rem,6vw,5.75rem);
  line-height:.98;
}

.piw-title h1 .piw-product-name,
.piw-title h1 .piw-product-promise{
  display:block;
}

.piw-title h1 .piw-product-name{
  color:var(--clay-display);
}

.piw-title h1 .piw-product-promise{
  white-space:nowrap;
}

.piw-copy>.lead{
  max-width:46rem;
  margin-top:1.625rem;
}

.piw-actions{
  justify-content:center;
  margin-top:1.875rem;
}

.piw-actions .btn.bare{
  color:var(--night-ink);
}

.piw-product-wrap{
  width:min(calc(100% - clamp(8rem,16vw,16rem)),84rem);
  margin:clamp(3rem,calc(12rem - 9vw),5rem) auto 0;
  padding:clamp(.75rem,1.25vw,1.125rem);
  border:var(--hair) solid rgba(255,255,255,.13);
  border-radius:calc(var(--r-4) + .25rem);
  background:rgba(13,15,18,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2.5rem 6rem -2.25rem rgba(0,0,0,.92),
    0 5.5rem 11rem -6rem rgba(184,73,50,.38);
}

.piw-port{
  position:relative;
  width:auto;
  /* named because the phone rule has to restate the width this margin implies;
     see the note there */
  --piw-inset:clamp(.55rem,.8vw,.8rem);
  margin:var(--piw-inset);
  aspect-ratio:1500/866;
  overflow:hidden;
  border-radius:calc(var(--r-3) - .25rem);
  /* ── the bright arc at the rounded corners, half one ─────────────────────
     The plate's colour, not the day page colour. A rounded, overflow-hidden box
     rasterises its own background fill separately from the clip it hands its
     children, and the two antialiased edges do not cancel, so a near-white fill
     leaks a sliver of itself along the curve. The surface covers this box at
     every width now that the port carries the crop's own ratio, so the colour
     is only ever seen as that sliver and for the instant before the surface
     paints, and both readings want the plate. */
  background:#0D0F12;
}

.piw-port iframe{
  position:absolute;
  inset:0;
  width:1500px;
  height:866px;
  border:0;
  transform-origin:0 0;
  pointer-events:none;
  /* ── the bright arc at the rounded corners, half two ─────────────────────
     An iframe is composited on its own layer, and that layer lands over the
     port's rounded clip rather than inside it: the product's near-white page
     canvas painted into the corner notch and read as a bright arc against the
     dark plate. Promoting the layer makes it rasterise within the clip.
     Measured on the worst pixel of the bottom-left curve, against the plate:
     rgb(137,139,142) on a rgb(27,29,32) surround at 390 and rgb(125,126,129)
     on rgb(24,25,29) at 1440, down to rgb(73,75,78) and to the surround
     exactly. Type inside the port renders identically either way. */
  backface-visibility:hidden;
}

.piw-next{
  padding:clamp(7rem,8vw,8rem) 0 clamp(9rem,13vw,13rem);
}

.piw-next>.frame{
  max-width:78rem;
}

.piw-next-head{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:end;
  margin-top:0;
}

.piw-next-head .claim{
  max-width:18ch;
}

.piw-chapters{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  margin-top:clamp(5rem,8vw,7rem);
}

.piw-chapters>div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.2rem;
  padding:clamp(1.7rem,2.8vw,2.5rem) clamp(1.5rem,2.8vw,2.8rem);
  border-left:var(--hair) solid var(--line);
}

.piw-chapters>div:first-child{
  border-left:0;
  padding-left:0;
}

.piw-chapters>div:last-child{
  padding-right:0;
}

.piw-chapters span{
  font-family:var(--mono);
  font-size:var(--t-mono);
  color:var(--accent);
  letter-spacing:.08em;
}

.piw-chapters p{
  color:var(--mute);
  line-height:1.55;
}

.piw-chapters b{
  color:var(--ink);
  font-weight:var(--w-mid);
}

@media(min-width:54.0625rem){
  .piw-opening{
    padding:0 0 clamp(5.5rem,7vw,7rem);
  }

  .piw-copy{
    min-height:clamp(40rem,calc(100svh - 8.5rem),52rem);
    align-content:center;
  }

  .piw-product-wrap{
    margin-top:0;
  }
}

@media(max-width:76rem){
  .piw-product-wrap{
    width:min(calc(100% - 4rem),86rem);
  }

}

@media(max-width:54rem){
  .piw-title h1 .piw-product-promise{
    white-space:normal;
  }

  /* ── the hero surface on a phone ──────────────────────────────────────────
     A 1500px product screen fitted into a 358px column is a scale of 0.21:
     the product's own 13px body type renders at 2.8px and the shot proves
     nothing. The shipped V1 site solved the same problem on pi.html by
     refusing to fit -- it holds the surface at roughly half scale, anchors it
     left, lets it run off the right edge and fades the cut into the ground.
     Same move here, with the live iframe rather than a still: the plate loses
     its right margin, padding, border and radius so the surface reaches the
     screen edge, and the iframe carries data-m-fitw / data-m-crop-x, which
     field.js reads at this same breakpoint. The crop starts at the main
     column, so the 212px navigation rail stops eating a third of the phone
     and the project bar, the morning brief and Ball in Court get it instead.
     Measured: body type at 8.1px, every line of the brief uncut. */
  .piw-product-wrap{
    width:auto;
    margin-right:0;
    margin-left:var(--gut);
    padding-right:0;
    border-right:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }

  /* ── the port is the shape of the crop, capped ──────────────────────────
     The crop is 562 of the product's own pixels wide by the surface's whole
     866 tall, and field.js scales it to fill whatever this box is wide, so
     what gets drawn here is always 866/562 of the port's width. The port's
     height was declared with no reference to that -- min(62svh,29.5rem) --
     and the two only agreed from 349px up, where the width has grown enough
     that 866/562 of it clears the cap. Below 349 the port was taller than
     anything drawn inside it and the last 44px at 320 were empty box, which
     the near-white fill used to read as the end of a fade and the plate
     colour reads as a cut.

     Giving the port the crop's ratio makes its height the surface's height by
     construction, at any width. The cap moves to max-height, where it ends
     the port at exactly min(62svh,29.5rem) everywhere it used to: from 349 up
     this is the same box to the pixel, and below it the port now stops where
     the surface stops.

     The width has to be written out. A box whose width is auto and which has
     both a ratio and a height constraint resolves its width THROUGH the
     ratio, the way a replaced element does -- the cap would have pulled the
     port in to 306px at every width above the crossover, and the crop with
     it. calc(100% - inset) is the same number the auto width was already
     resolving to, since the right margin is zero here; stated, it is the one
     thing the cap cannot reach back into. */
  .piw-port{
    margin-right:0;
    width:calc(100% - var(--piw-inset));
    aspect-ratio:562/866;
    max-height:min(62svh,29.5rem);
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }

  /* the vertical cut has to read as depth, not as a screenshot that ran out */
  .piw-port::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:6rem;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(0deg,rgba(13,15,18,.94) 4%,rgba(13,15,18,.5) 44%,rgba(13,15,18,0));
  }

  .piw-next-head,
  .piw-chapters{
    grid-template-columns:1fr;
  }

  .piw-chapters>div,
  .piw-chapters>div:first-child,
  .piw-chapters>div:last-child{
    border-left:0;
    border-top:var(--hair) solid var(--line);
    padding-left:0;
    padding-right:0;
  }

  .piw-chapters>div:first-child{
    border-top:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .piw-port iframe{
    transition:none;
  }
}