/**
 * Verso hero — the studio, in Verso's gold
 * The one-screen project hero (hero-studio.css, the same skeleton as /window and
 * /psnppp) themed to Verso's grey-and-gold, plus the two things this static page
 * does differently from the React pages: self-hosted fonts, and a shot that is a
 * plain screenshot with a CSS shadow rather than the rig's canvas.
 * Author: Trippixn · trippixn.com · discord.gg/syria
 */

/* A standalone static page with no global reset, so the ground sits on html/body
   — without it the body's default margin shows a band at every edge, and the iOS
   overscroll gutter flashes light instead of the studio dark. */
:root { color-scheme: dark; }
html, body { margin: 0; background-color: #201f1d; }

/* Self-hosted, because trippixn.com sends font-src 'self'. */
@font-face {
  font-family: 'Judas Caps';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/judas-caps.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo.woff2) format('woff2');
}

.pj-verso {
  /* The home's greys carry over from the skeleton; Verso's gold is the one accent. */
  --accent: #d8a83a;
  --on-accent: #121110;
  /* A warm lamp — the gold light the tool is lit by. */
  --lamp: 255, 236, 190;
  --lamp-a: .20;
  --glint: rgba(255, 240, 205, .30);
  /* The screenshot's own ratio, so the card never stretches the UI. */
  --shot-ratio: 1.582;
}

/* Touch: no grey iOS tap-flash (each mark answers with its own press), no
   landscape text inflation. */
.pj-verso { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The install button wears the Tampermonkey mark before its label. */
.pj-verso .pj-btn { display: inline-flex; align-items: center; gap: 9px; }
.pj-verso .pj-btn svg { width: 17px; height: 17px; flex: none; }
/* The edge over other tools: the one claim that reads brighter than the rest,
   marked with a gold tick like a pull-quote. */
.pj-verso .pj-edge {
  margin: 14px 0 0;
  padding-left: 13px;
  border-left: 2px solid var(--accent);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
  text-wrap: pretty;
}
.pj-verso .pj-brand, .pj-verso .pj-repo, .pj-verso .pj-end-mark, .pj-verso .pj-end a {
  transition: color 150ms ease, transform 120ms var(--ease-out);
}
.pj-verso .pj-repo:active, .pj-verso .pj-end a:active { transform: scale(.95); }
.pj-verso .pj-brand:active, .pj-verso .pj-end-mark:active { transform: scale(.93); }
@media (prefers-reduced-motion: reduce) {
  .pj-verso .pj-brand:active, .pj-verso .pj-repo:active,
  .pj-verso .pj-end-mark:active, .pj-verso .pj-end a:active { transform: none; }
}

/* The shot is a plain screenshot with a soft cast shadow, not the rig's canvas —
   so it shows from the first frame and carries its own shadow and gold rim. */
.pj-verso .pj-shot-card {
  opacity: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(237, 233, 226, .1);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .05) inset,
    0 40px 80px -32px rgba(0, 0, 0, .85),
    0 12px 40px -12px rgba(216, 168, 58, .22);
}
.pj-verso .pj-shot-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* A soft screen highlight, static (no pointer mask on this build). */
.pj-verso .pj-shot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 236, 190, .1), transparent 42%);
  mix-blend-mode: screen;
}

/* ── Editorial stage ──────────────────────────────────────────────────────
   The studio skeleton composes its stage out of absolutely placed pieces,
   which at desktop widths lands the screenshot on top of the copy. Verso
   reads as a column instead: masthead, claim, the two-column fold, the
   shot in a band of its own, then how it runs. Verso only — hero-studio.css
   still serves /window and /psnppp untouched. */

/* The skeleton fits one screen by placing every piece absolutely inside a
   100svh stage. Verso has more to say than one screen holds, so the stage
   becomes a flowing column and its children go back to static. */
.pj-verso .pj-stage {
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(26px + 5.5rem) 5vw 6vh;
}

.pj-verso .pj-words {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
}

.pj-verso .pj-masthead {
  position: static;
  top: auto;
  font-size: clamp(4rem, 16vw, 11rem);
}

.pj-verso .pj-role {
  position: static;
  top: auto;
  padding: 0;
  margin-top: 1.4vh;
}

.pj-verso .pj-fold {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  align-items: start;
  gap: 2.5rem 4rem;
  width: 100%;
  margin-top: 4vh;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(237, 233, 226, .16);
}

.pj-verso .pj-copy,
.pj-verso .pj-spec {
  position: static;
  max-width: none;
  inset: auto;
  transform: none;
}

/* The claim carries the fold, so it gets the size the masthead used to hoard. */
.pj-verso .pj-fold .pj-claim {
  grid-column: 1 / -1;
  max-width: 20ch;
  margin: 0;
  font-family: "Judas Caps", Georgia, serif;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper, #ede9e2);
}

.pj-verso .pj-copy { max-width: 46ch; }
.pj-verso .pj-copy .pj-lines { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6; }

.pj-verso .pj-spec {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-align: left;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(237, 233, 226, .16);
}

/* The screenshot gets a band to itself rather than a slot over the words. */
.pj-verso .pj-shot {
  position: relative;
  left: auto;
  top: auto;
  order: 3;
  width: 100%;
  height: auto;
  aspect-ratio: var(--shot-ratio);
  margin: 7vh 0 0;
  transform: none;
}

.pj-verso .pj-shot-card { position: absolute; inset: 0; }

/* The skeleton's shot entrance carries translateX(-50%) to hold the absolute
   centring. Verso's shot sits in the flow, so it rises like everything else —
   without this the animation drags it half its width off the page. */
.pj-verso .pj-shot.rise { animation-name: pj-rise; }

.pj-verso .pj-steps {
  order: 4;
  margin: 8vh 0 0;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(237, 233, 226, .16);
}

.pj-verso .pj-steps-head {
  margin: 0 0 1.75rem;
  font-family: "Judas Caps", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper, #ede9e2);
}

.pj-verso .pj-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj-verso .pj-steps li { display: flex; flex-direction: column; gap: .4rem; }

.pj-verso .pj-steps b {
  font-family: "Judas Caps", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.pj-verso .pj-steps strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper, #ede9e2);
}

.pj-verso .pj-steps span {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(237, 233, 226, .68);
}

.pj-verso .pj-steps .pj-note { margin-top: 2.5rem; max-width: 62ch; }

.pj-verso .pj-end { order: 5; margin-top: 8vh; }

@media (max-width: 860px) {
  .pj-verso .pj-fold { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pj-verso .pj-spec { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1px solid rgba(237, 233, 226, .16); }
  .pj-verso .pj-steps ol { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

@media (max-width: 960px) {
  /* Edge-to-edge: clear the notch / Dynamic Island up top and the home indicator below. */
  .pj-verso .pj-nav { padding-top: max(20px, calc(env(safe-area-inset-top) + 6px)); }
  .pj-verso .pj-stage { padding-bottom: max(6vh, calc(env(safe-area-inset-bottom) + 24px)); }
  /* The screenshot is the pitch: lead with it, ahead of the words (the studio
     default drops it to order 5, below copy and spec). A box from its own ratio,
     with the card filling it, so it never collapses. */
  .pj-verso .pj-shot { order: 3; width: 100%; aspect-ratio: var(--shot-ratio); height: auto; margin: 6vh 0 0; }
  .pj-verso .pj-shot-card { position: absolute; inset: 0; }
  .pj-verso .pj-copy { order: 4; margin-top: 7vh; }
  .pj-verso .pj-spec { order: 5; }
}

/* The copy-confirmed toast (verso.js toggles .show). It sits outside .pj, so its
   colours are literal rather than the studio tokens. */
.toast {
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: 24rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  color: #121110;
  background: #ede9e2;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translateY(0); }