/* ============================================================================= WIELE · FIX IV · PLATE FRAME UPGRADE ---------------------------------------------------------------------------- Doc: WG-FIX-004 · 2026-04-26 Adds: matted museum frame, gilt drop shadow, enlarged max-width. Strategy: APPEND to existing site.css (or import as separate file). Does NOT modify any rule already declared on .wiele-plate — only enhances. Drop into: ./assets/wiele-plate-frame.css Reference: Place AFTER site.css in the so cascade resolves correctly. ============================================================================= */ /* ───── 1 · Enlarged plate envelope ────────────────────────────────────────── */ .wiele-plate { /* was max-width: 920px — bump to 1180 to fill more of the room column */ max-width: 1180px; /* breathe more vertically — readers parse the plate as a chapter break */ margin-top: clamp(64px, 8vh, 120px); margin-bottom: clamp(64px, 8vh, 120px); /* matte board surrounds the image — increase plate padding */ padding: 36px 36px 28px; } /* Landing variant (homepage hero plate) — slightly larger still */ .wiele-plate.wiele-plate--landing { max-width: 1280px; padding: 44px 44px 32px; } /* ───── 2 · Matted museum frame around the image ───────────────────────────── */ /* The image sits inside a printed mat (light parchment) which itself sits inside an outer frame (the .wiele-plate). The mat creates the gallery register — image set within white space within border. */ .wiele-plate__img { /* enlarge image edges and add the mat */ display: block; width: 100%; height: auto; /* keep existing 4/3 aspect-ratio */ /* mat: thick parchment band around the image */ padding: 18px; background: var(--wiele-parchment, #f4ecd8); /* hairline image border (kept from original) + matte outer rule */ border: 1px solid var(--wiele-sepia-whisper, #c8b896); /* outer mat rule — slightly darker, sits on the parchment field */ outline: 1px solid var(--wiele-rule, #c8b896); outline-offset: -22px; /* subtle inner inset to read as a printed plate, not a flat photo */ box-shadow: inset 0 0 0 1px rgba(184, 157, 94, 0.18), /* gilt hairline */ inset 0 1px 0 rgba(255, 255, 255, 0.35); /* paper highlight */ } /* ───── 3 · Drop shadow under the plate (depth, not gloss) ────────────────── */ /* Two-layer shadow: short hard contact shadow + long soft cast. Reads as a printed plate resting on parchment, not a webby card. */ .wiele-plate { box-shadow: /* contact shadow — directly under the plate edge */ 0 2px 4px rgba(36, 28, 16, 0.08), /* mid shadow — gives the plate weight */ 0 14px 28px -8px rgba(36, 28, 16, 0.18), /* long cast — settles the plate into the page */ 0 38px 64px -20px rgba(36, 28, 16, 0.16); /* keep parchment background, but warm it slightly to read as a separate sheet */ background: var(--wiele-parchment-deep, #ece2c6); /* very faint outer rule — makes the frame edge crisp on light mode */ border: 1px solid rgba(120, 96, 56, 0.22); } .wiele-plate.wiele-plate--landing { /* landing plate gets a bigger cast — it's the editorial frontispiece */ box-shadow: 0 3px 6px rgba(36, 28, 16, 0.10), 0 22px 40px -10px rgba(36, 28, 16, 0.22), 0 52px 96px -28px rgba(36, 28, 16, 0.20); } /* ───── 4 · Gilt corner brackets — strengthen existing pseudo-elements ───── */ /* The site already defines .wiele-plate::before and ::after as 16×16 gilt hairline corners. Make them slightly more present so they read as the frame's signature, not as an afterthought. */ .wiele-plate::before, .wiele-plate::after { width: 22px; height: 22px; border-color: var(--wiele-gilt, #b89d5e); border-width: 1px; opacity: 0.85; } .wiele-plate::before { /* top-left bracket — bracket form, not full square */ top: 14px; left: 14px; border-right: none; border-bottom: none; } .wiele-plate::after { /* bottom-right bracket */ bottom: 14px; right: 14px; border-left: none; border-top: none; } /* ───── 5 · Caption + plate description (museum label register) ──────────── */ /* Existing site.css declares .wiele-plate__caption as flex / row / space-between with the technical label left and Roman tally right. With the description added, the caption becomes a column container holding TWO rows: the technical row + the italic curatorial note. */ .wiele-plate__caption { /* was display:flex (row) — switch to column to stack technical row over description */ display: flex; flex-direction: column; align-items: stretch; /* was 16px — increase to 22px to clear the mat's optical edge */ margin-top: 22px; padding: 14px 6px 0; /* hairline rule above caption — separates label register from mat */ border-top: 1px solid rgba(184, 157, 94, 0.28); } /* Technical row — preserves the original side-by-side label + roman pattern */ .wiele-plate__caption-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--wiele-font-marginalia, 'IBM Plex Mono', monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: lowercase; color: var(--wiele-sepia-soft, #8a7a5a); width: 100%; } /* Plate description — Royal Society plate-label register Sits BELOW the technical caption, INSIDE the frame. Reads as the explanatory note a curator would write under a museum plate. */ .wiele-plate__description { display: block; margin: 14px 6px 0; padding: 0; font-family: var(--wiele-font-serif, 'EB Garamond', Garamond, serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--wiele-ink-2, #3a3a3a); text-align: left; max-width: 60ch; } .wiele-plate__description::before { content: '— '; color: var(--wiele-gilt, #b89d5e); font-style: normal; font-family: var(--wiele-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .05em; margin-right: 2px; } /* Landing variant gets slightly larger description text */ .wiele-plate.wiele-plate--landing .wiele-plate__description { font-size: 17px; max-width: 64ch; } /* ───── 6 · Reduced motion / print fidelity ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .wiele-plate { transition: none; } } @media print { .wiele-plate { box-shadow: none; border: 1px solid #888; page-break-inside: avoid; } .wiele-plate__img { outline: 1px solid #888; box-shadow: none; } } /* ───── 7 · Mobile — keep the gallery register, scale gracefully ──────────── */ @media (max-width: 760px) { .wiele-plate { padding: 20px 20px 18px; margin-top: 48px; margin-bottom: 48px; box-shadow: 0 2px 4px rgba(36, 28, 16, 0.08), 0 10px 20px -6px rgba(36, 28, 16, 0.16); } .wiele-plate.wiele-plate--landing { padding: 24px 24px 20px; } .wiele-plate__img { padding: 12px; outline-offset: -16px; } .wiele-plate::before, .wiele-plate::after { width: 16px; height: 16px; top: 10px; left: 10px; } .wiele-plate::after { bottom: 10px; right: 10px; top: auto; left: auto; } .wiele-plate__description { font-size: 15px; max-width: none; } .wiele-plate.wiele-plate--landing .wiele-plate__description { font-size: 16px; } } /* ============================================================================= 8 · FOUNDER PORTRAIT · TRUTH RECTIFICATION ---------------------------------------------------------------------------- site.css ships .founder-portrait with placeholder pseudo-element text: ::before → "HENRIK WIELE" (wrong founder name) ::after → "PORTRAIT · 2026" plus an oversized italic "JL" initials backdrop. The "JL" backdrop is CORRECT (Jonathan B. Landman) — the design knew the founder. Only the textual labels were placeholder. This block: · Overrides ::before to "JONATHAN B. LANDMAN" (canonical legal name) · Updates ::after to "PORTRAIT · MMXXVI" (Roman year register, brand-coherent) · Opt-in via [data-portrait="real"] so the override only applies where the real photo has been dropped in (about.html). Untouched until then. · Photo + figcaption styling provided so the actual portrait reads cleanly under the existing design layering. Doctrinally additive: site.css remains untouched. ============================================================================= */ .founder-portrait[data-portrait="real"]::before { content: "JONATHAN B. LANDMAN" !important; letter-spacing: 0.22em; } .founder-portrait[data-portrait="real"]::after { content: "PORTRAIT · MMXXVI" !important; letter-spacing: 0.16em; } /* Container: clean parchment field with the same shadow register as plates */ .founder-portrait[data-portrait="real"] { background: var(--wiele-parchment, #f4ecd8) !important; padding: 28px; border: 1px solid rgba(120, 96, 56, 0.22); position: relative; box-shadow: 0 2px 4px rgba(36, 28, 16, 0.08), 0 14px 28px -8px rgba(36, 28, 16, 0.18), 0 38px 64px -20px rgba(36, 28, 16, 0.16); } .founder-portrait[data-portrait="real"] img { display: block; width: 100%; height: auto; border: 1px solid var(--wiele-sepia-whisper, #d8c8a0); position: relative; z-index: 1; } .founder-portrait[data-portrait="real"] figcaption { position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(184, 157, 94, 0.28); font-family: var(--wiele-font-marginalia, 'IBM Plex Mono', 'SF Mono', monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: lowercase; color: var(--wiele-sepia-soft, #8a7a5a); text-align: center; } /* ============================================================================= END · WG-FIX-004 ============================================================================= */