/* PORCH — the temple plan plate on the-porch page.
   Loaded last so it needs no changes to any existing stylesheet.
   The drawing is a document laid on the page: warm parchment, dark ink,
   recolored from the source to the site's cream and brass. */

.riverlight [data-page="the-porch"] .plan-figure{
  margin: 46px auto 44px;
  /* the diagram's own labels are small: give it the full reading column,
     not the 34em measure the prose uses */
  max-width: 672px;
  padding: 0;
}
.riverlight [data-page="the-porch"] .plan-plate{
  display: block;
  padding: 24px 24px 20px;
  background: var(--paper, #f4f0e6);
  box-shadow: 0 18px 44px rgba(5,16,20,0.45);
  /* it is a link now: keep the alt-text fallback reading as ink on paper */
  color: var(--ink, #14303a);
  text-decoration: none;
}
.riverlight [data-page="the-porch"] .plan-plate:hover{
  color: var(--ink, #14303a);
}
.riverlight [data-page="the-porch"] .plan-plate:focus-visible{
  outline: 2px solid var(--porch-amber, #e6bb79);
  outline-offset: 4px;
}
.riverlight [data-page="the-porch"] .plan-plate img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.riverlight [data-page="the-porch"] .plan-figure figcaption{
  margin: 16px auto 0;
  max-width: 30em;
  font-family: 'EB Garamond','Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--mist, #b9ccd0);
  text-align: center;
  text-wrap: pretty;
}
.riverlight [data-page="the-porch"] .plan-figure figcaption b{
  font-style: normal;
  font-weight: 400;
  color: var(--porch-amber-soft, #f1d4a0);
}

/* the plan is small-labelled artwork: tapping opens it full size for pinch-zoom */
.riverlight [data-page="the-porch"] .plan-tap{ display: none; }

@media (max-width: 700px){
  /* the reading column is only ~316px here — go full bleed and invite the tap */
  .riverlight [data-page="the-porch"] .plan-figure{
    margin: 36px -22px 34px;
    max-width: none;
    width: auto;
  }
  .riverlight [data-page="the-porch"] .plan-plate{ padding: 14px; }
  .riverlight [data-page="the-porch"] .plan-figure figcaption{
    font-size: 0.9375rem;
    padding: 0 22px;
  }
  .riverlight [data-page="the-porch"] .plan-tap{
    display: block;
    margin-top: 8px;
    font-family: 'Karla', system-ui, sans-serif;
    font-style: normal;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--porch-amber-soft, #f1d4a0);
  }
}

@media print{
  .riverlight [data-page="the-porch"] .plan-plate{ box-shadow: none; }
  .riverlight [data-page="the-porch"] .plan-figure figcaption{ color: #333; }
}