/* A thumbnail studio for my portfolio: this post's layout.
   A Feature post (pages.css) with one addition: a pinned stretch where the
   brokerage card stays on screen while four steps of text scroll past.
   The previous figures and styles are in post.before-layout.css. */

/* ---- Title ----------------------------------------------------------------- */

/* Seven words: at the Feature size they run four lines. Two lines at 1440. */
.rf-post .post__title {
  font-size: clamp(1.75rem, 5vw, 4.5rem);
}

/* ---- Interface labels ------------------------------------------------------
   A button or control named in the text is set the way it looks on screen:
   the interface's sans in a small, square-cornered chip, so it reads as
   something clicked rather than a phrase. */

.rf-post .rf-ui {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  font-family: var(--body);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: 0.08em;
}

/* ---- Cover: a Stageshow film of /home?edit --------------------------------- */

.rf-cover__frame {
  position: relative;
  aspect-ratio: 1040 / 620;
  /* The poster, chosen by width here rather than in the HTML, so a phone
     never fetches the wide one. The video draws over it once it has frames. */
  background: var(--paper) url("img/cover-start.webp") center / cover no-repeat;
}

.rf-cover__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- The browser's crop: the whole screen, what it kept, and the card ----- */

.rf-shapes__body {
  display: grid;
  grid-template-columns: minmax(0, 200fr) minmax(0, 416fr);
  gap: var(--space-24);
  align-items: start;
}

.rf-shapes__screen {
  position: relative;
  /* The top 182/256 of the screen's width is what the Grid frame keeps:
     720 × 182/256 = 512 of 1558px, 32.9% of its height. */
  --kept: 32.9%;
}

.rf-shapes__screen img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
}

/* Everything under the kept band fades back to the paper. */
.rf-shapes__screen::after {
  content: "";
  position: absolute;
  inset: var(--kept) 0 0;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border-top: 2px solid var(--ink);
  pointer-events: none;
}

.rf-shapes__lost {
  position: absolute;
  inset-inline-start: var(--space-8);
  top: calc(var(--kept) + var(--space-8));
  z-index: 1;
  white-space: nowrap;
}

.rf-shapes__cards {
  display: grid;
  align-content: start;
}

.rf-shapes__card {
  display: grid;
  gap: var(--space-8);
  color: var(--ink-soft);
}


.rf-shapes__card img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
}

/* ---- Inset and breakout images --------------------------------------------- */

.rf-post .post__figure--inset img {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
}

.rf-post .post__figure--inset figcaption {
  margin-top: var(--space-12);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- The editor demo: a still until Try it, then the live page ------------ */

.rf-demo__stage {
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 1360 / 760;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
  /* The still stays behind the editor while it loads, then the live editor
     fades in over it. A background, so the site's lightbox (site.js,
     .post__body figure img) doesn't claim it. */
  background: var(--paper) url("img/demo-still.webp") center / cover no-repeat;
}

/* The whole still is the link, veiled so the button reads over it. */
.rf-demo__try {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-14);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  color: var(--ink);
  text-decoration: none;
}

.rf-demo__button {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 0 var(--space-32);
  background: var(--marker);
  font-family: var(--display);
  font-size: clamp(24px, 2.5vw, 36px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  /* Forced colors drop the shadow ring; this border stands in for it. */
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  transition: translate 160ms var(--ease-out), box-shadow 160ms var(--ease-fade), scale 150ms var(--ease-out);
}

.rf-demo__note {
  padding: 2px var(--space-8);
  background: var(--paper);
  font-size: 15px;
  line-height: 22px;
}

/* The post's links are underlined; this one is a block, not a line of text. */
.rf-post .post__body a.rf-demo__try,
.rf-post .rf-demo__try span { text-decoration: none; }

.rf-demo__try:focus-visible { outline: none; }
.rf-demo__try:focus-visible .rf-demo__button { outline: 2px solid var(--ink); outline-offset: 4px; }
.rf-demo__try:active .rf-demo__button { scale: 0.96; }

@media (hover: hover) and (pointer: fine) {
  .rf-demo__try:hover .rf-demo__button { translate: 0 -2px; box-shadow: 0 0 0 1px var(--ink), 0 6px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-demo__button { transition: none; }
}

.rf-demo__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.rf-demo__frame[data-loaded] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rf-demo__frame { transition: none; }
}

/* ---- The pinned stretch ----------------------------------------------------- */

/* Narrow, or without script: each step shows its own still above its text. */
.rf-pin {
  display: grid;
  row-gap: var(--paragraph-gap);
  margin-block: var(--space-24);
}

.rf-pin__figure { display: none; }

.rf-pin__steps {
  display: grid;
  row-gap: var(--space-32);
}

.rf-step {
  display: grid;
  row-gap: var(--space-14);
}

.rf-step__still {
  display: block;
  width: 100%;
  height: auto;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
}

/* Wide, with script: the card holds in the right column and the steps scroll
   past on the left, at the wrap's 356px measure. Each step is tall enough
   that only one crosses the middle of the window at a time. */
@media (min-width: 1200px) {
  .rf-pin[data-live] {
    grid-template-columns: minmax(356px, 1fr) minmax(0, 640px);
    column-gap: var(--space-32);
    max-width: 1028px;
    margin-block: var(--space-16) 0;
  }

  .rf-pin[data-live] .rf-pin__figure {
    position: sticky;
    top: calc(50vh - 142px);
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: grid;
    margin: 0;
    outline: 1px solid var(--frame-edge);
    outline-offset: -1px;
  }

  .rf-pin__figure img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    /* The still giving way stays solid underneath until the next has faded
       in on top, so the paper never shows through between steps. */
    transition: opacity 0s 250ms;
  }

  .rf-pin__figure img[data-on] { z-index: 1; opacity: 1; transition: opacity 250ms var(--ease-fade); }

  .rf-pin[data-live] .rf-pin__steps {
    grid-column: 1;
    grid-row: 1;
    row-gap: 0;
  }

  .rf-pin[data-live] .rf-step {
    min-height: 62vh;
    align-content: center;
  }

  .rf-pin[data-live] .rf-step:first-child { min-height: 50vh; align-content: start; padding-top: calc(50vh - 142px); }
  .rf-pin[data-live] .rf-step:last-child { min-height: 70vh; }

  /* Hidden from sight, not from screen readers: the pinned figure beside the
     steps is aria-hidden, so these carry the pictures' descriptions. */
  .rf-pin[data-live] .rf-step__still {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-pin__figure img,
  .rf-pin__figure img[data-on] { transition: none; }
}

/* ---- Phone ----------------------------------------------------------------- */

@media (max-width: 599px) {
  .rf-cover__frame { aspect-ratio: 358 / 574; background-image: url("img/cover-start-compact.webp"); }
  .rf-shapes__body { gap: var(--space-12); }
}

/* ---- The notes pile-up ------------------------------------------------------
   The brokerage card's second proposal, under what I said about the
   thumbnails. The notes land
   one after another, faster and faster. Without script, or with reduced
   motion, the pile is simply there. */

.rf-notes { max-width: 640px; }

.rf-notes__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1120 / 798;
  container-type: inline-size;
  outline: 1px solid var(--frame-edge);
  outline-offset: -1px;
}

.rf-notes__stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rf-notes__list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf-notes__list li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 36%;
  /* A sticky note: canary paper, a faint band where the glue holds the top
     edge, and a shadow under the loose bottom edge where it lifts off. */
  background:
    linear-gradient(to bottom, rgb(120 90 0 / 0.07), transparent 0.9em),
    #fdf1a1;
  box-shadow:
    0 1px 1px rgb(60 45 0 / 0.12),
    0 12px 14px -10px rgb(40 30 0 / 0.38);
  /* The note is paper in both schemes, so its ink is fixed too. */
  color: var(--fixed-ink);
  /* Jason's handwriting, the Spidleweb face from pages.css. */
  font-family: "Spidleweb", var(--serif);
  /* Sized by the stage, so the pile keeps its proportions down to 320px. */
  font-size: clamp(14px, 5.2cqi, 29px);
  /* The handwriting's line box is tall, so wrapped notes sit tighter. */
  line-height: 0.85;
  padding: 0.5em 0.65em 0.6em;
  rotate: var(--r);
  text-wrap: pretty;
}


.rf-notes[data-ready] .rf-notes__list li {
  opacity: 0;
  scale: 1.12;
}

.rf-notes[data-play] .rf-notes__list li {
  animation: rf-note 220ms var(--ease-out) var(--d) forwards;
}

@keyframes rf-note {
  to { opacity: 1; scale: 1; }
}

.rf-notes figcaption {
  margin-top: var(--space-12);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
}

@media (max-width: 599px) {
  /* The phone screen is narrow here, so the label wraps inside it. */
  .rf-shapes__lost { inset-inline: var(--space-4); white-space: normal; }
}