pandorga 1.14.0 → 2.0.0

data/assets/css/ledger/home.css

@@ -21,11 +21,11 @@
 }
 
 .home-band--hero {
-  background-color: var(--color-background);
+  background-color: transparent;
 }
 
 .home-band--contrast {
-  background-color: var(--color-panel-contrast);
+  background-color: transparent;
   background-image: none;
 }
 
@@ -104,40 +104,6 @@
   }
 }
 
-/* Ambient pool behind the hero.
- *
- * Same weight as the earlier primary-container bloom, but keyed to neutral
- * ink/outline so it stays grey paper depth instead of a blue spotlight. */
-.home-band--hero::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  top: -18%;
-  right: 8%;
-  width: min(38rem, 60%);
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: radial-gradient(circle,
-      color-mix(in srgb, var(--color-outline) 22%, transparent) 0%,
-      color-mix(in srgb, var(--color-on-surface) 8%, transparent) 42%,
-      transparent 72%);
-  filter: blur(52px);
-  pointer-events: none;
-}
-
-[data-theme="dark"] .home-band--hero::before {
-  background: radial-gradient(circle,
-      color-mix(in srgb, var(--color-on-surface) 10%, transparent) 0%,
-      color-mix(in srgb, var(--color-outline) 8%, transparent) 50%,
-      transparent 70%);
-  filter: blur(60px);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .home-band--hero::before {
-    transition: opacity var(--motion-duration-slow, 400ms) var(--motion-ease-default);
-  }
-}
 
 .home-hero {
   display: grid;
@@ -146,64 +112,6 @@
   align-items: start;
 }
 
-@media (min-width: 1024px) {
-  .home-hero {
-    /* Copy content height sets the flex line. Portrait stretches to that
-       height; aspect-ratio then sets W = 3/4 × H. Children are taken out of
-       flow so the photo's intrinsic box cannot inflate the line or collapse
-       the copy. */
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: var(--space-2xl);
-  }
-
-  .home-hero-copy {
-    flex: 1 1 auto;
-    min-width: min(100%, 20rem);
-  }
-
-  .home-hero-portrait {
-    position: relative;
-    flex: 0 0 auto;
-    align-self: stretch;
-    width: auto;
-    height: auto;
-    aspect-ratio: 3 / 4;
-    overflow: hidden;
-    min-width: 0;
-    min-height: 0;
-    max-width: none;
-    justify-self: unset;
-  }
-
-  .home-hero-plate-wrap {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    flex: none;
-  }
-
-  .home-hero-plate {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    aspect-ratio: auto;
-    flex: none;
-  }
-
-  .home-hero-plate img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    object-fit: cover;
-  }
-}
-
 .home-hero-copy {
   display: flex;
   flex-direction: column;
@@ -327,8 +235,6 @@
 .home-hero-portrait {
   position: relative;
   width: 100%;
-  max-width: 16rem;
-  justify-self: end;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -368,18 +274,16 @@
   transform: translateY(0);
 }
 
-/* ── Portrait plate ──
-   Beside the copy on a wide page the plate is portrait (3:4): its height
-   matches the left column and the width is W = 3/4 × H. On a phone it stays
-   3:4. A wider box would cover-crop that portrait a second time. When
-   hero_landscape is set, or a portrait entry has its own landscape, the
-   phone plate is 16:9 and the chosen 16:9 file is shown whole. */
+/* ── Photograph plate ──
+   One 16:9 frame at every width, the shape of the hero photographs, so
+   below 1024px cover does not crop them. From 1024px the plate fills a box
+   as tall as the copy and cover trims the sides or the top (PLT-AC-51). */
 .home-hero-plate {
   position: relative;
   z-index: 1;
   margin: 0;
   overflow: hidden;
-  aspect-ratio: 3 / 4;
+  aspect-ratio: 16 / 9;
   /* Black in both themes: the photograph fades in over this, so a theme
      canvas here would read as the wrong picture arriving late. */
   background: black;
@@ -401,64 +305,13 @@ html[data-theme="light"] .home-hero-plate {
   box-shadow: none;
 }
 
-/* Silk facet behind the portrait — restored; the Borders pass had hidden it. */
-.home-hero-shard {
-  top: -2.25rem;
-  right: -2rem;
-  width: 15rem;
-  height: 15rem;
-  background: var(--color-primary);
-  opacity: var(--cubist-shard-opacity-strong, 16%);
-  z-index: 0;
-}
-
-@media (max-width: 1023px) {
-  .home-hero-shard {
-    width: 11rem;
-    height: 11rem;
-    top: -1.5rem;
-    right: -1.25rem;
-  }
-}
 
-@media (max-width: 1023px) {
-  .home-hero-portrait::before {
-    content: "";
-    position: absolute;
-    z-index: 0;
-    top: 55%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 140%;
-    height: 120%;
-    border-radius: 50%;
-    background: radial-gradient(circle,
-        color-mix(in srgb, var(--color-outline) 18%, transparent) 0%,
-        color-mix(in srgb, var(--color-on-surface) 7%, transparent) 45%,
-        transparent 72%);
-    filter: blur(40px);
-    pointer-events: none;
-  }
-
-  [data-theme="dark"] .home-hero-portrait::before {
-    background: radial-gradient(circle,
-        color-mix(in srgb, var(--color-on-surface) 12%, transparent) 0%,
-        transparent 70%);
-  }
-}
-
-.home-hero-plate picture {
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
 
 .home-hero-plate img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  object-position: 52% 18%;
+  object-position: center;
   display: block;
   filter: saturate(1.05) contrast(0.98);
   opacity: 0;
@@ -472,27 +325,6 @@ html[data-theme="light"] .home-hero-plate {
   opacity: 1;
 }
 
-/* 16:9 file in a 16:9 plate. contain shows the whole frame. The image stays
-   hidden until the chosen file has loaded, so a fallback source does not
-   flash before a pool landscape replaces it. The plate is already 16:9, so
-   the wait does not move the layout. transition none so the paint is not a fade. */
-@media (max-width: 767px) {
-  .home-hero-plate--landscape {
-    aspect-ratio: 16 / 9;
-  }
-
-  .home-hero-plate--landscape img {
-    object-fit: contain;
-    object-position: center center;
-    opacity: 0;
-    transition: none;
-  }
-
-  .home-hero-plate--landscape img.is-shown {
-    opacity: 1;
-  }
-}
-
 .home-hero-plate:hover img {
   transform: scale(1.02);
 }
@@ -506,10 +338,86 @@ html[data-theme="light"] .home-hero-plate {
   }
 }
 
+/* ── Hero from 1024px ──
+   The copy takes 46% and the name sets on two lines, given name over family
+   name, so the photograph takes the rest of the row. The copy sets the band
+   height; the plate wrapper and the plate leave the flow and the photograph
+   covers that box, at least 15rem tall, like the featured article poster.
+   This block follows the base hero rules on purpose: before them, their
+   max-width, position and aspect-ratio won on source order (PLT-AC-51). */
+@media (min-width: 1024px) {
+  .home-hero {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--space-2xl);
+  }
+
+  .home-hero-copy {
+    flex: 0 0 46%;
+    min-width: 0;
+  }
+
+  .home-hero-portrait {
+    flex: 1 1 0;
+    align-self: stretch;
+    width: auto;
+    min-width: 0;
+    min-height: 15rem;
+    max-width: none;
+    aspect-ratio: auto;
+    overflow: hidden;
+  }
+
+  .home-hero-plate-wrap {
+    position: absolute;
+    inset: 0;
+    aspect-ratio: auto;
+  }
+
+  .home-hero-plate {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: auto;
+  }
+
+  .home-hero-plate img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  /* --hero-name-fit is the longer name part in em at the title's tracking;
+     a site with a longer word raises it. The selector outranks a site's
+     one-line size written as .home-ledger .home-hero-title. */
+  .home-ledger .home-hero-title {
+    white-space: normal;
+    font-size: min(calc(100cqi / var(--hero-name-fit, 8.4)), var(--hero-name-max, 4.5rem));
+  }
+
+  .home-hero-given,
+  .home-hero-family {
+    display: inline-block;
+    white-space: nowrap;
+  }
+}
+
 /* ── Section banners ──
    Atelier plate edge: a denser hairline, a longer accent rule, and a short
-   vertical tick so each band reads as a ruled plate rather than a soft fade. */
+   vertical tick so each band reads as a ruled plate rather than a soft fade.
+   The banner is a 2-column grid so the lead's children join the template. */
 .home-band:not(.home-band--hero) .ledger-section-banner {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--space-md);
+  row-gap: var(--space-xs);
+  align-items: baseline;
   padding-top: var(--space-lg);
   padding-bottom: var(--space-sm);
   border-top: 1px solid var(--border-gentle);
@@ -537,50 +445,58 @@ html[data-theme="light"] .home-hero-plate {
   background: color-mix(in srgb, var(--color-primary) 55%, var(--color-outline));
 }
 
-.home-section-aside {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-sm);
-  max-width: 30rem;
+.home-band .ledger-section-lead {
+  display: contents;
 }
 
-/* The aside sits at the end of the banner, so its contents align to that same
-   edge — button and copy on one axis. Aligning the button left while the copy
-   ran right made every band look like a zigzag. */
-@media (min-width: 768px) {
-  .home-section-aside {
-    align-items: flex-end;
-    text-align: right;
-  }
+.home-band .ledger-section-banner .ledger-kicker {
+  grid-column: 1 / -1;
+  grid-row: 1;
+}
 
-  .home-section-aside .ledger-cta {
-    align-self: flex-end;
-  }
+.home-band .ledger-kicker:empty {
+  display: none;
 }
 
-/* The lead column of a banner holds the kicker, the title and the note, all
-   three filled from content/pages/headers.yml. It has to be able to
-   shrink: the banner is a flex row and the aside beside it is sized by its
-   button, so without this the note pushes the button off the line. */
+.home-band .ledger-section-banner .section-title {
+  grid-column: 1;
+  grid-row: 2;
+  margin: 0;
+  font-size: var(--type-section-sm);
+}
+
+.home-band .home-section-aside {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: baseline;
+  margin-top: 0;
+}
+
+/* Outside the home bands the banner is still a flex row, so the lead has to
+   be able to shrink or the note pushes the aside off the line. */
 .ledger-section-banner .ledger-section-lead {
   min-width: 0;
 }
 
-/* One line under the title saying what the band holds. It is prose rather than
-   a chrome label, so it takes the body face and the reading measure instead of
-   the uppercase treatment `.ledger-section-note` carries in base.css — that
-   one is the right-hand tally at the end of a banner, which is a different
-   thing standing in a different place.
-
-   The element is removed outright when the field is empty (see
-   hydrateHomeSections), so this margin never opens a gap of its own. */
-.home-section-note {
-  margin: var(--space-sm) 0 0;
+.home-band .home-section-note {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  margin: 0;
+  font-size: var(--type-dek);
   max-width: var(--reading-measure, 45rem);
   color: var(--color-on-surface-variant);
 }
 
+@media (min-width: 768px) {
+  .home-band .ledger-section-banner .section-title {
+    font-size: var(--type-section);
+  }
+
+  .home-band .home-section-note {
+    font-size: var(--type-body);
+  }
+}
+
 /* ── Featured article band ── */
 /* The lead is a panel, not a row.
    It used to be three bare columns sitting on the band background, which is
@@ -611,7 +527,7 @@ html[data-theme="light"] .home-hero-plate {
   gap: var(--space-md);
   align-items: stretch;
   background: var(--color-surface-card);
-  border: 1.5px solid var(--border-ink);
+  border: 1px solid var(--border-ink);
   border-radius: var(--radius-card);
   border-top: 2px solid var(--color-primary);
   padding: var(--space-md) var(--space-lg);
@@ -621,6 +537,28 @@ html[data-theme="light"] .home-hero-plate {
   margin-bottom: var(--space-lg);
 }
 
+@media (max-width: 767px) {
+  /* Stacks image first edge to edge on narrow screens. */
+  .home-featured {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .home-featured > .ledger-poster {
+    order: -1;
+    width: 100%;
+    height: auto;
+    margin: 0;
+    aspect-ratio: 16 / 9;
+    border: 0;
+  }
+
+  .home-featured-lead {
+    padding: var(--space-md);
+  }
+}
+
 /* The hover rung, same as `.ledger-card` takes: the panel is one link target
    end to end, so the whole surface answers. */
 .home-featured:hover {
@@ -652,65 +590,6 @@ html[data-theme="light"] .home-hero-plate {
   }
 }
 
-/* Shards on the featured panel, which carried none: the one card the home
-   page leads with was also the only one on the band with no footing in the
-   cubist half of the identity.
-
-   The pair is placed around the poster rather than across the card, because
-   the poster is opaque and a shard behind it is a shard nobody sees. The
-   alpha takes the top-left, over the index column, where there is nothing but
-   chrome and air. The beta takes the bottom-right and comes out from *under*
-   the poster into the strip below it, which is the same move the index band
-   makes with its own plates.
-
-   Hues are the two the home band does not already spend: the index panels
-   below run secondary and primary, so this pair runs tertiary and secondary,
-   and neither repeats the corner its neighbor uses. Shards are absolutely
-   positioned, so they are not grid items and the three-column template is
-   untouched. */
-.home-featured-shard {
-  left: -3rem;
-  top: -3.5rem;
-  width: 11rem;
-  height: 11rem;
-  background: var(--color-tertiary);
-}
-
-.home-featured-shard--beta {
-  left: auto;
-  right: -3rem;
-  top: auto;
-  bottom: -4rem;
-  width: 13rem;
-  height: 13rem;
-  background: var(--color-secondary);
-}
-
-/* Below the two-column layout the panel is short and the columns stack, so a
-   shard sized for the wide card reaches the title.
-
-   The beta restates `top`/`left` as `auto`. It carries both class names, so
-   the rule above also matches it, and an override that gives it a `bottom`
-   without taking back the `top` leaves it with all four offsets set — at
-   which point top and left win and the pair collapses into one corner. */
-@media (max-width: 1023px) {
-  .home-featured-shard {
-    width: 8rem;
-    height: 8rem;
-    top: -2.5rem;
-    left: -2.5rem;
-  }
-
-  .home-featured-shard--beta {
-    width: 9rem;
-    height: 9rem;
-    top: auto;
-    left: auto;
-    bottom: -3rem;
-    right: -2.5rem;
-  }
-}
-
 /* The columns sit clear of both. */
 .home-featured> :not(.shard-accent) {
   position: relative;
@@ -800,6 +679,18 @@ html[data-theme="light"] .home-hero-plate {
   font-weight: var(--weight-body);
   line-height: var(--home-featured-copy-line);
   color: var(--color-legend);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .home-featured-copy {
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+  }
 }
 
 .home-featured-foot {
@@ -918,7 +809,6 @@ html[data-theme="light"] .home-hero-plate {
   border-top-width: 2px;
   border-top-style: solid;
   border-top-color: var(--color-tertiary);
-  transform: rotate(0deg);
   transition: transform var(--motion-duration-fast) var(--motion-ease-default),
     background-color var(--motion-duration-fast) var(--motion-ease-default),
     border-color var(--motion-duration-fast) var(--motion-ease-default);
@@ -931,25 +821,73 @@ html[data-theme="light"] .home-hero-plate {
 
 /* A handful of fixed degrees per grid position — not a JS random() — so the
    tilt is identical on every render and every screenshot. */
-.home-draft-list>*:nth-child(4n + 1) {
-  transform: rotate(-1.2deg);
-}
+@media (min-width: 768px) {
+  .home-draft-list>*:nth-child(4n + 1) {
+    transform: rotate(-1.2deg);
+  }
 
-.home-draft-list>*:nth-child(4n + 2) {
-  transform: rotate(0.9deg);
-}
+  .home-draft-list>*:nth-child(4n + 2) {
+    transform: rotate(0.9deg);
+  }
 
-.home-draft-list>*:nth-child(4n + 3) {
-  transform: rotate(-0.7deg);
-}
+  .home-draft-list>*:nth-child(4n + 3) {
+    transform: rotate(-0.7deg);
+  }
+
+  .home-draft-list>*:nth-child(4n) {
+    transform: rotate(1.1deg);
+  }
 
-.home-draft-list>*:nth-child(4n) {
-  transform: rotate(1.1deg);
+  .home-draft-card:hover,
+  .home-draft-card:focus-within {
+    transform: rotate(0deg);
+  }
 }
 
-.home-draft-card:hover,
-.home-draft-card:focus-within {
-  transform: rotate(0deg);
+@media (max-width: 767px) {
+  .home-draft-list>.home-draft-card:nth-child(3) {
+    grid-column: 1 / -1;
+    flex-direction: row;
+  }
+
+  .home-draft-list>.home-draft-card:nth-child(3) .ledger-poster {
+    flex: 0 0 38%;
+    aspect-ratio: auto;
+    align-self: stretch;
+  }
+
+  .home-draft-list>.home-draft-card:nth-child(3) .ledger-poster img,
+  .home-draft-list>.home-draft-card:nth-child(3) .ledger-poster video {
+    position: absolute;
+    inset: 0;
+  }
+
+  .home-draft-list>.home-draft-card:nth-child(3) .ledger-card-body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .home-draft-list>.home-draft-card:nth-child(n + 4) {
+    display: none;
+  }
+
+  .home-draft-card .ledger-poster {
+    aspect-ratio: 4 / 3;
+  }
+
+  .home-draft-card .ledger-meta {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .home-draft-card .ledger-card-title {
+    font-size: var(--type-dek);
+  }
+
+  .home-draft-card .ledger-card-copy {
+    font-size: var(--type-label);
+  }
 }
 
 .home-draft-card .ledger-card-body {
@@ -964,6 +902,11 @@ html[data-theme="light"] .home-hero-plate {
 .home-draft-card .ledger-card-title {
   font-size: var(--type-card);
   line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .home-draft-card .ledger-meta {
@@ -978,30 +921,18 @@ html[data-theme="light"] .home-hero-plate {
   font-weight: var(--weight-body);
   line-height: var(--leading-body);
   color: var(--color-legend);
-  /* Fill the surplus the equal-height grid hands the body. `height: 0` with
-     `flex: 1` gives the paragraph a definite block size from the flex
-     allocation, so line-clamp/overflow clip against that height instead of
-     growing past the ellipsis (the old flex:1 + clamp:2 bug that left text
-     after "…" and sliced mid-glyph at the card edge). */
   flex: 1 1 auto;
-  /* With the 16:9 plate, this band keeps the whole card about 20% shorter
-     than the old 16/12.6 poster and 8.4-line excerpt, on narrow and wide grids. */
-  min-height: calc(var(--type-subtitle) * var(--leading-body) * 5.33);
-  height: 0;
   display: -webkit-box;
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-/* Four-up posters were the tall part of the old card. Give the excerpt a
-   little of that height back so the wide card is 20% shorter too, not more. */
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .home-draft-card .ledger-card-copy {
-    min-height: calc(var(--type-subtitle) * var(--leading-body) * 6.05);
-    -webkit-line-clamp: 6;
-    line-clamp: 6;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
   }
 }
 
@@ -1073,14 +1004,6 @@ html[data-theme="light"] .home-hero-plate {
   border-top: 2px solid var(--color-primary);
 }
 
-.home-band--contrast .home-project-specimen {
-  background: var(--color-surface-card-contrast);
-}
-
-.home-band--contrast .home-project-specimen:hover {
-  background: var(--color-surface-high-contrast);
-}
-
 .home-specimen-strip,
 .home-project-inventory-code {
   display: flex;
@@ -1338,8 +1261,8 @@ button.home-project-inventory-row {
   min-width: 0;
   height: var(--home-icon-btn-size);
   padding: 0;
-  border: 1px solid var(--border-gentle-divider);
-  background: var(--color-panel-contrast);
+  border: 1px solid var(--border-ink);
+  background: var(--color-surface-card);
   cursor: pointer;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-default),
     border-color var(--motion-duration-fast) var(--motion-ease-default);
@@ -1384,12 +1307,6 @@ button.home-project-inventory-row {
   color: var(--color-primary);
 }
 
-.home-band--contrast .home-project-inventory-row:hover,
-.home-band--contrast .home-project-inventory-row:focus-visible,
-.home-band--contrast .home-project-inventory-row.is-selected {
-  background: var(--color-surface-high-contrast);
-}
-
 @media (min-width: 900px) {
 
   /* The specimen column is 35% of the band (at least 20rem), which keeps the
@@ -1440,17 +1357,12 @@ button.home-project-inventory-row {
     max-height: var(--home-inventory-row-max);
     box-sizing: border-box;
     padding: var(--space-sm) var(--space-md);
-    border: 1px solid var(--border-gentle-divider);
+    border: 1px solid var(--border-ink);
     background: var(--color-surface-card);
     outline: none;
   }
 
-  .home-band--contrast .home-project-inventory-row {
-    background: var(--color-surface-card-contrast);
-  }
-
-  .home-project-inventory-row.is-selected,
-  .home-band--contrast .home-project-inventory-row.is-selected {
+  .home-project-inventory-row.is-selected {
     background: var(--color-surface-high);
     border-color: var(--border-gentle-divider);
     outline: none;
@@ -1567,23 +1479,6 @@ button.home-project-inventory-row {
   isolation: isolate;
 }
 
-[data-theme="dark"] .home-band--index::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  top: -8%;
-  left: 50%;
-  width: min(72rem, 100%);
-  height: 116%;
-  transform: translateX(-50%);
-  border-radius: 50%;
-  background: radial-gradient(ellipse,
-      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
-      transparent 70%);
-  filter: blur(70px);
-  pointer-events: none;
-}
-
 .home-index-split {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -1603,10 +1498,10 @@ button.home-project-inventory-row {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--space-md);
-  padding: 0 0 var(--space-lg);
-  background: var(--color-surface-card-contrast);
-  border: 1.5px solid var(--border-ink);
+  gap: 0;
+  padding: 0;
+  background: var(--color-surface-card);
+  border: 1px solid var(--border-ink);
   border-radius: var(--radius-card);
   transition:
     background-color var(--motion-duration-fast) var(--motion-ease-default),
@@ -1614,59 +1509,31 @@ button.home-project-inventory-row {
 }
 
 .home-index-panel:hover {
-  background: var(--color-surface-high-contrast);
+  background: var(--color-surface-high);
   border-color: var(--border-gentle-hover);
 }
 
-/* The plates are line-art, so the cubist half of the identity had no footing
-   on this band at all. One shard per panel, the canonical polygons across
-   the set, rotating hue the way every other shard on the site does.
- *
- * They sit in the foot of the panel, under the title and the link: the plate
- * above carries an opaque background, so a shard behind it would be a shard
- * nobody sees. `overflow: hidden` on the panel above keeps the negative
- * offsets out of the document scroll width, and the shared utility already
- * unmounts both below 640px. */
-.home-index-shard {
-  right: -3rem;
-  bottom: -3.5rem;
-  width: 11rem;
-  height: 11rem;
-  background: var(--color-secondary);
-}
-
-.home-index-shard--beta {
-  right: auto;
-  left: -3rem;
-  bottom: -3.5rem;
-  width: 11rem;
-  height: 11rem;
-  background: var(--color-primary);
-}
-
-/* Between the shard cut-off and the layout each panel is the full
-   band wide on small screens, so a shard sized for half of it stops being a corner accent. */
-@media (max-width: 899px) {
-
-  .home-index-shard,
-  .home-index-shard--beta {
-    width: 8rem;
-    height: 8rem;
-    bottom: -2.5rem;
-  }
+/* Header row for index panels: holds title and Open link. */
+.home-index-panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+  width: 100%;
 }
 
-.home-index-panel:not(:has(.home-index-plate)) {
-  padding-top: var(--space-xl);
+/* The Open link keeps the right end of the head when the title is empty. */
+.home-index-panel-head > .ledger-cta {
+  margin-left: auto;
 }
 
-/* The title and the link have to sit clear of the shard behind them. The
-   plate is excluded because it is the one child that must stay full-bleed,
-   and the shard because it is the thing being sat clear of. */
-.home-index-panel> :not(.home-index-plate):not(.shard-accent) {
-  position: relative;
-  z-index: 1;
-  margin-inline: var(--space-lg);
+/* Panel description from the page's headers note (PLT-AC-50). */
+.home-index-note {
+  margin: 0;
+  padding: 0 var(--space-md) var(--space-sm);
+  font-size: var(--type-dek);
+  color: var(--color-on-surface-variant);
 }
 
 /* Card-scale title, not `.section-title`: that face is for band banners and
@@ -1693,6 +1560,7 @@ button.home-project-inventory-row {
   min-height: 0;
   margin: 0;
   background: var(--color-background);
+  border-top: 1px solid var(--border-gentle-divider);
   border-bottom: 1px solid var(--border-gentle-subtle);
 }
 
@@ -1908,7 +1776,7 @@ html[data-theme="light"] .home-featured .ledger-poster {
   --frame-corner-size: 0.85rem;
 }
 
-@media (max-width: 899px) {
+@media (min-width: 768px) and (max-width: 899px) {
   .home-featured-lead {
     order: 1;
   }
@@ -1927,9 +1795,8 @@ html[data-theme="light"] .home-featured .ledger-poster {
    ends flush with the viewport and adds no scrollable width; this must stay
    below 768px, which is where .home-band-inner swaps that token for --gutter.
    The side hairlines go with it: a border pinned to the screen edge reads as a
-   frame cut off rather than as the plate's edge. The plate stays 3:4, the
-   same frame as the portrait file, so cover does not crop it again. A
-   configured hero_landscape switches this query to 16:9 and contain. */
+   frame cut off rather than as the plate's edge. The plate stays 16:9, the
+   same frame as the photograph, so cover does not crop it. */
 @media (max-width: 767px) {
   .home-hero-portrait {
     max-width: none;
@@ -1944,14 +1811,6 @@ html[data-theme="light"] .home-featured .ledger-poster {
   }
 }
 
-/* ── Hero portrait between phone and desktop ──
-   Keep the plate modest; the 3:4 crop applies from tablet up. */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .home-hero-portrait {
-    max-width: 14rem;
-  }
-}
-
 /* ── Bibliography stats plate ── */
 #home-bib-panel .home-index-plate {
   display: flex;