/* Developing hero: sits on the site's existing tokens */
.dev-hero{
  --lead:max(var(--gutter),calc((100cqw - var(--container))/2));
  container-type:inline-size;
  position:relative;isolation:isolate;
  display:grid;
  /* content tracks sit on the site's 1200px container; the water runs full bleed */
  grid-template-columns:minmax(var(--gutter),1fr) min(560px,calc((100% - 2 * var(--gutter)) * .47)) min(640px,calc((100% - 2 * var(--gutter)) * .53)) minmax(var(--gutter),1fr);
  grid-template-rows:1fr auto auto 1fr auto;
  grid-template-areas:". . sheet ." ". copy sheet ." ". spec sheet ." ". . sheet ." "strip strip strip strip";
  height:clamp(640px,calc(100svh - var(--head-h)),900px);
  border-bottom:var(--line);
  overflow:clip;
  background:var(--paper);
  touch-action:pan-y;
  cursor:crosshair;
}
.dev-canvas,.dev-poster{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.dev-poster{background:var(--paper);transition:opacity .9s var(--ease)}
.dev-ready .dev-poster{opacity:0}
.dev-fallback .dev-canvas{display:none}
.dev-fallback .dev-poster{opacity:1;background:var(--paper) url(img/print/thames-staines-cyanotype-1800.webp) right 4% center/56% auto no-repeat}

.dev-copy{
  grid-area:copy;
  padding:0 var(--s7) 0 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s6);
  cursor:auto;
}
.dev-copy h1{font-size:min(var(--fs-h1),3.5cqi);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:17ch;color:var(--ink)}
.dev-copy .hero-lede{font-size:var(--fs-lede);line-height:1.55;color:var(--muted);max-width:42ch}
.dev-copy .hero-lede strong{color:var(--ink);font-weight:600}
.dev-spec{grid-area:spec;margin:var(--s7) var(--s7) 0 0;max-width:460px}

.dev-sheet{grid-area:sheet;position:relative;margin:clamp(20px,3vw,40px) -24px clamp(20px,2.4vw,32px) -24px;min-height:440px}

.dev-hint{
  position:absolute;left:50%;bottom:-6px;transform:translate(-50%,6px);
  margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap;
  font:var(--fs-mono)/1 var(--f-mono);letter-spacing:.02em;color:var(--ink);
  background:var(--paper);border:var(--line-ink);padding:9px 12px;
  opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none
}
.dev-hint.show{opacity:1;transform:translate(-50%,0)}
.dev-hint.gone{opacity:0!important;transform:translate(-50%,6px)}
.dev-hint-dot{width:8px;height:8px;border-radius:50%;background:var(--prussian);box-shadow:0 0 0 0 rgba(23,74,139,.5);animation:dev-ping 1.6s var(--ease) infinite}
@keyframes dev-ping{to{box-shadow:0 0 0 12px rgba(23,74,139,0)}}

.dev-strip{
  grid-area:strip;display:flex;align-items:center;gap:var(--s5);justify-content:space-between;
  padding:12px var(--lead);min-height:48px;border-top:var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent);
  cursor:auto
}
.dev-status{margin:0;font-size:var(--fs-sm);color:var(--muted);text-wrap:balance}
.dev-status .fig-no{font-family:var(--f-mono);font-size:var(--fs-mono);color:var(--ink);margin-right:12px;letter-spacing:.02em}
.dev-done .dev-status{color:var(--ink)}
.dev-pause{
  flex:none;font:var(--fs-mono)/1 var(--f-mono);color:var(--ink);background:transparent;
  border:var(--line-ink);border-radius:var(--r-ctl);padding:8px 12px;cursor:pointer
}
.dev-pause:hover{background:var(--wash)}
.dev-pause:focus-visible{outline:2px solid var(--prussian);outline-offset:2px}

@media (max-width:1100px){
  .dev-hero{grid-template-columns:var(--gutter) minmax(0,1fr) minmax(0,1fr) var(--gutter)}
  .dev-copy h1{font-size:min(var(--fs-h1),2.75rem)}
  .dev-copy .hero-lede{font-size:var(--fs-body)}
}
@media (max-width:900px){
  .dev-hero{grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);grid-template-rows:auto auto auto auto;grid-template-areas:". copy ." ". sheet ." ". spec ." "strip strip strip";height:auto}
  .dev-copy{padding:var(--s6) 0 0}
  .dev-spec{margin:0 0 var(--s6);max-width:560px}
  .dev-copy h1{font-size:2.5rem;max-width:16ch}
  .dev-sheet{margin:var(--s5) -8px var(--s6);min-height:clamp(400px,70vw + 120px,640px)}
  .dev-hint{white-space:normal;text-align:left;width:max-content;max-width:calc(100% - 16px)}
}
@media (max-width:680px){
  .dev-copy{gap:var(--s4)}
  .dev-copy .hero-lede{font-size:var(--fs-body)}
  .dev-copy h1{font-size:2.25rem}
  .dev-strip{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .dev-hint{display:none}
  .dev-hint-dot{animation:none}
}
.dev-done .dev-hint{opacity:0!important}
/* the floating prompt's face (SIL Open Font License, Instrument Serif by Rodrigo Fuenzalida & Jordan Egstad) */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic-latin.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

/* the reward card: real, copyable text that takes over from the rising message */
.dev-reward{
  position:absolute;z-index:1;transform:translateX(-50%);width:var(--rw);margin:0;
  text-align:center;color:#F4F8FD;cursor:auto;opacity:0;transition:opacity .9s var(--ease)
}
.dev-rewarded .dev-reward{opacity:1}
.dev-reward p{margin:0}
.dev-reward-title{font:italic 400 var(--hs)/var(--lh) "Instrument Serif",Georgia,serif;margin-bottom:var(--g1)!important;letter-spacing:0}
.dev-reward-line{font:600 var(--ps)/var(--pl) var(--f-sans);margin-bottom:var(--g2)!important}
.dev-reward-code{
  display:inline-flex;align-items:center;justify-content:center;height:var(--chip);padding:0 calc(var(--cs) * 1.1);
  font:400 var(--cs)/1 var(--f-mono);letter-spacing:.14em;border:1.2px dashed rgba(244,248,253,.95)
}
.dev-reward-code b{font-weight:400}
.dev-reward-actions{
  display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s4)!important;
  opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease) .7s,transform .7s var(--ease) .7s
}
.dev-rewarded .dev-reward-actions{opacity:1;transform:none}
.dev-reward-actions .dev-copy,.dev-reward-actions a{
  font:var(--fs-mono)/1 var(--f-mono);color:#F4F8FD;background:rgba(12,35,64,.35);
  border:1px solid rgba(244,248,253,.7);border-radius:var(--r-ctl);padding:10px 14px;cursor:pointer;text-decoration:none
}
.dev-reward-actions .dev-copy:hover,.dev-reward-actions a:hover{background:rgba(244,248,253,.14);color:#fff}
.dev-reward-actions :focus-visible{outline:2px solid #F4F8FD;outline-offset:2px}