/* Built from prototype-tokens.css. Do not edit here; edit the
   prototype and rebuild. */

/* ============================================================
   prototype-tokens.css  —  PROTOTYPE ONLY

   tokens.css lives in public/ and is not being modified for a
   layout experiment. Variant F needs two values the site does not
   have yet: a see-through panel fill and a shadow. Both are mixed
   from existing tokens with color-mix, so no new color is invented
   here and nothing needs adding to tokens.css unless the variant
   is adopted.
   ============================================================ */

:root {
  /* How opaque the panel is, set from measurement against this
     test image, sampling every pixel the panel covers:
       44%   body text hits exactly 4.5:1 on the darkest pixel
       59.5% reaches 7:1, the AAA threshold
       80%   at rest: 11.53:1 on the darkest pixel, 17.40:1 on the
             lightest. Not solid, so the picture still shows
             through, but the copy reads as though on paper.
       97%   on hover or focus: all but solid. The picture is a
             faint presence rather than a texture behind the text,
             which is the point of the lift.
     A darker photograph would move these numbers, so remeasure
     when real artwork arrives. */
  /* Raised from 80% on October 24. At 80 the watercolour texture read
     through the body copy. The site commits to WCAG 2.1 AA, and text
     over a photograph has no single contrast ratio: it varies across
     the frame, so the panel is what buys the worst case. */
  --panel-alpha:       94%;
  --panel-alpha-lift:  97%;

  --color-panel:       color-mix(in srgb, var(--color-canvas) var(--panel-alpha), transparent);
  --color-panel-lift:  color-mix(in srgb, var(--color-canvas) var(--panel-alpha-lift), transparent);
  --color-panel-shadow: color-mix(in srgb, var(--color-ink) 28%, transparent);

  /* Room reserved under the page for the fixed bottom bar, so the
     footer is never hidden behind it. */
  --bottom-bar-space: 4.25rem;

  /* One corner for both controls, in both treatments. The title opens
     the picture and the close shuts it, and they sit in the same
     place so nobody is made to cross the page to go back and forth.
     7.5rem clears the footer, so in the closed state the title sits
     on the artwork rather than on the footer band. */
  --control-left:   var(--space-md);
  --control-bottom: 7.5rem;

  --panel-lift-distance: 2px;
  --panel-lift-scale:    1.006;
}

/* --- story panel, rebuilt for two paragraphs -----------------
   Each piece combines two photographs and the story has a
   paragraph for each, so the corner panel from variant H is too
   small. Wider, scrollable if it ever overruns, and it sits on
   the lifted panel colour so it reads over any of the six.
   ----------------------------------------------------------- */
.variant-h .story-corner {
  width: min(34rem, calc(100% - var(--page-gutter) * 2));
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}
.variant-h .story-corner h2 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-2xs);
}
.variant-h .story-corner p {
  margin: 0;
  max-width: none;
}
.variant-h .story-corner p + p {
  margin-top: var(--space-xs);
}
.variant-h .story-credit {
  margin-top: var(--space-sm);
  font-size: calc(var(--font-size-base) * 0.82);
  color: var(--color-ink-muted);
}

/* the two switch links ran together; give them room */
.switch a + a { margin-left: var(--space-md); }

/* The artist's statement, once, on Home. Sets up why there is art
   on the site at all. Amanda's words, unedited. */
.variant-h .story-statement {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: var(--border-width-hairline) solid var(--color-rule);
  font-size: calc(var(--font-size-base) * 0.88);
}

/* --- the art fades while the copy is live --------------------
   Full strength the art competes with the panel edge and the
   fine branch texture vibrates against the border. Faded, it
   reads as ground rather than figure. One number to tune.
   ----------------------------------------------------------- */
/* How far the picture drops back while the copy is up. Lowered from
   0.75 on October 24, for the same reason as the panel alpha. The
   picture returns to 1 in the photo state. */
:root { --art-fade: 0.5; }

.variant-h .backdrop img {
  opacity: var(--art-fade);
  transition: opacity 220ms ease;
}

.variant-h #see-photo:target ~ .backdrop img {
  opacity: 1;
}

/* Tells the reader an artist is speaking before the first
   sentence does. Matters most where the note is personal. */
.variant-h .story-eyebrow {
  margin: 0 0 2px;
  font-size: calc(var(--font-size-base) * 0.68);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}


/* site.css sets font-family: var(--font-family-base) on body, and the
   token still held the Aptos stack. brand.css overrides body anyway, so
   nothing ever rendered in it, but the token is retired here so the next
   reader is not misled. */
:root{ --font-family-base: Manrope, Arial, Helvetica, sans-serif; }