Monograph

Monograph — a slower kind of seeing

Build a complete, original editorial photography portfolio named Monograph. The name was checked against the existing source and generated-demo directories and is unused. The result should be a quiet, immersive visual journal with substantial case studies, an accessible full-screen image viewer, category filtering, a selectable cover photograph, a considered practice page, and a working local inquiry draft. Its identity must be distinct from an agency contact sheet, a split-screen services site, or a generic image grid with a large logo above it.

Monograph is a fictional creative practice. Its photographs are original generated visual concepts made specifically for this collection. They are not documentary records, actual commissioned client work, or images attributed to a real photographer. Make this context visible in the portfolio captions, case studies, practice page, and credits. The site can still have an assured editorial voice. Honesty about the method should support the work rather than being buried in a legal disclaimer or presented as an apologetic warning.

Research and the transferable composition

The individual live reference is Jason Bergh’s portfolio at https://www.jasonbergh.com/, with the reportage view at https://www.jasonbergh.com/reportage. It was discovered through the actual photographer and director entry visible on https://minimal.gallery/. The reference was opened and inspected live rather than inferred from a gallery thumbnail. The home page uses immersive imagery, a centered editorial serif identity, tiny utility information, navigation distributed across the top edge, and image-index controls along the bottom. It behaves more like a visual exhibition than a conventional business homepage.

The reference’s initial loading sequence is elaborate. It introduces the name against black while small image fragments occupy opposite corners. This exact loading treatment should not be copied. Monograph should display its complete cover immediately, with no artificial waiting screen, progress counter, or delayed access to the work. The useful principle is the confidence of giving an image an entire viewport and allowing a restrained typographic layer to provide context. Translate that principle into a calm, original photographic presentation.

The reportage page was observed at a viewport of 1471 by 903. Its center image was approximately 338.3 pixels wide and 497.2 pixels high, beginning near x=566.3 and y=158.8. Neighboring image panels were smaller, around 253.7 by 372.9 pixels, and sat farther toward the edges. The center title was measured in a compact monospaced family at roughly 12.2 pixels. An alternate editorial title treatment used a light serif at roughly 38.2 pixels with a 46.7-pixel line height. These are direct rendered measurements.

The reference’s scale hierarchy gives the active image a stronger presence than its neighbors, and its background carries imagery related to the active project. The observed page also has a clear index, archive navigation, and a full-screen media context. Monograph adapts that relationship between active image, surrounding context, and navigation. It does not reuse film posters, celebrity imagery, client names, the reference’s text, fonts, logo, or source code. Its subject matter is architecture, landscape, and still life, not the reference’s film and commercial roster.

Do not imitate the reference’s extremely small utility text. The implementation quality requirement for this collection is readable real content: controls at least fourteen pixels, secondary labels at least twelve, and editorial body paragraphs around sixteen to eighteen pixels. The photography may carry the visual drama, but the interface must remain comfortable on a small laptop and a phone. Any timing values in Monograph are original adaptation decisions, because the reference’s precise animation durations were not measured.

Original identity and palette

The Monograph wordmark is an italic editorial serif, using system Georgia. It should feel like the title of a small photographic publication rather than an agency logo. The rest of the interface uses the locally licensed Geist family. The pairing is deliberate: serif for expressive titles and statements, sans-serif for navigation, captions, controls, and body reading. Do not introduce a third display family, ornamental monogram, or decorative registered-trademark symbol.

The primary reading surface is a warm paper color near #ede9df. Ink is a muted charcoal-green near #282b26. Supporting text should be a darker sage-gray near #5e6658, with enough contrast against paper. The occasional dark section uses a deep blue-green around #263b3c and warm white text. The three photographs supply most of the color. Avoid a fixed bright accent that competes with the blue water, terracotta wall, or gray coastline.

Keep the layout largely flat. Use thin rules for section boundaries and a small number of circular image-viewer affordances. There should be no rounded-card system wrapping every image and no repeated nested panels. The full-screen image viewer can use a dark continuous background. Form controls are simple underlined fields with visible labels. The inquiry action is a solid dark rectangle, with its purpose stated directly. The overall impression is closer to an editorial book than a productivity application.

Headlines can be large and tightly tracked, but they must have a controlled line count. The cover title is two lines, “A slower kind” and “of seeing.” Its second line is italic. The introductory statement should fit a deliberate two or three lines on desktop and reflow naturally on mobile. Case-study titles can be large because they name the current image. Body copy remains readable and does not adopt the tight tracking or line height of display type.

The three original photographic studies

The first study is Rooms for light, categorized as Architecture. It shows an imagined Mediterranean courtyard with ivory plaster walls, warm stone, a deep cobalt reflecting pool, and hard sunlight. The composition follows the pool edge toward an opening that reveals a small fragment of sea. The architecture is precise without being sterile. Water and a tree shadow introduce softer rhythms. This is the default cover image because the contrast between warm wall and blue pool supports a memorable first screen.

Its generation direction was a high-end architectural editorial photograph in a landscape three-to-two frame. The brief specified smooth white modernist walls, a rectangular blue pool, a thin tree shadow, travertine, authentic material texture, crisp shadows, and subtle analog grain. It excluded people, text, logos, watermarks, and recognizable tourist landmarks. The final asset is the complete original image. The wide homepage and case presentation may crop it responsively, while the image viewer always shows the complete composition.

The second study is The long way home, categorized as Landscape. It shows an imagined Atlantic coast, with a lone windswept tree on a cliff, a curve of dark beach, repeated white waves, teal water, and a silver cloudy sky. Its visual interest comes from distance and repetition rather than a bright focal point. The composition should reward a slower reading as one gray field separates into many textures. It is not presented as a documented destination or a location recommendation.

Its generation direction emphasized natural atmospheric light, a sophisticated asymmetric composition, medium-distance landscape detail, and restrained film grain. It excluded people, text, logos, and recognizable landmarks. The image should feel like a coherent photographic possibility rather than a fantasy landscape. Its case-study writing discusses the relationship between the land’s persistent shape and the sea’s changing edge, connecting the composition to the title without claiming a real journey or documentary assignment.

The third study is Ordinary, considered, categorized as Still life. It shows a cream ceramic vessel, a ripe orange persimmon with a curling leaf, and folded linen on a walnut tabletop against a terracotta wall. Strong afternoon light creates long shadows and reveals the texture of the objects. The vessel provides height, the fruit concentrates color, and the cloth introduces a soft line. The objects are arranged as an editorial study, not as products offered for sale.

Its generation direction emphasized handmade material imperfections, warm low sunlight, a spare off-center arrangement, and a medium-format photographic feel. It excluded people, typography, logos, and watermarks. The case study explains how three materials receive the same light differently. A detail crop is clearly labeled as a closer view of the same image, not a second generated photograph. Do not inflate the image count by describing responsive derivatives or crops as separate original works.

Full-viewport cover

The home page begins with a full-bleed cover image that occupies roughly one viewport, bounded by a sensible maximum height on very large screens. It should be at least tall enough to hold the navigation, context labels, title, and controls without collision. Use the courtyard image by default, with its pool visible in the lower half. A restrained dark gradient at the top and bottom supports white interface text while leaving the center image open. Do not add a heavy opaque overlay that makes the photograph look muddy.

Place the header directly over the cover. The wordmark is at the left and Studies, The practice, and Inquire are at the right. Give the top edge approximately thirty-six pixels of horizontal padding on desktop. Navigation should be at least fourteen pixels. Beneath it, a small two-sided context row identifies the visual journal and the selected-study period. These labels are secondary, but remain at least twelve pixels. Avoid decorative coordinates or fabricated location data that would imply documentary capture.

The large cover title sits in the lower half, above the bottom caption and controls. Its scale should be dramatic without occupying the whole image. The text is warm white and can use a very soft shadow to remain legible on the photograph. The bottom-left caption identifies the current study and category and links to its full page. The bottom-right contains previous and next buttons plus numbered image selectors on wider screens. Every selector has an accessible name that identifies the study it will show.

The cover does not autoplay. A visitor changes it explicitly using the arrows or numbered selectors. Changing the cover updates the photograph, its alt text, title, category, year, destination link, and pressed states together. A polite live region announces the new cover. A short opacity transition may soften the change, but it finishes quickly and is disabled under reduced motion. The photograph and its case-study link must never become mismatched during a transition.

Editorial page sequence

After the cover, the page moves onto warm paper. A two-column introduction places a small practice label in the left third and a large serif statement in the right two thirds. Follow it with one concise paragraph explaining the fictional practice and generated visual studies. Include a link to the practice page. This section is a reading pause between the immersive cover and the study archive. Give it generous vertical spacing so the page does not feel like a stack of tightly packed promotional modules.

The selected-studies section begins with a thin rule, a small section heading, and category filters. The filters are All studies, Architecture, Landscape, and Still life. They are real buttons with pressed states and readable labels. The initial layout is deliberately asymmetric: the architecture study is a larger landscape image on the left, the coastline is a taller image on the right with a significant vertical offset, and the still life is a broad image below with a controlled inset. This must differ from a contact-sheet archive or three equal cards.

Every study image is a button that opens the full-screen image viewer. A small plus affordance appears at the lower right on hover and focus, and remains visible on touch layouts. Beneath the image, the title and a separate Read the study link navigate to the case page. Keep the distinction between viewing the photograph and reading the editorial study clear. The image viewer action must not unexpectedly navigate away, and the case link must not open a modal instead of its stated destination.

Filtering hides nonmatching studies and updates a visible count. When a category is selected, remove the asymmetric offsets and use a straightforward filtered layout so a single result does not sit awkwardly halfway down an empty grid. Restoring All studies restores the designed arrangement. Filtering does not destroy the underlying study records or require a network request. The page remains a complete static portfolio if filtering is unavailable.

Close the home page with a dark blue-green editorial statement about looking again, a short paragraph, and an inquiry link. The footer returns to paper and uses a large serif invitation rather than another giant brand logo. A small footer row identifies the original generated concepts and links to the practice, image credits, and archive. It should feel like the end of a publication: calm, clear, and useful.

Case-study structure

Generate a complete page for each study. Begin with the shared paper header, a link to all studies, a large title, category and year, and a concise contextual note. The note states that the image is an imagined or constructed generated concept. Then show the photograph in a broad composition with a viewer button. A caption explains that opening the image reveals its complete uncropped form. The image dimensions should prevent layout shift, while CSS height auto avoids accidentally forcing a fixed source height into the responsive layout.

The first written section uses two columns. The left contains a small Starting point label and the study’s central phrase. The right contains the brief and compositional direction. Write specifically about the image: the pool edge, the curve of the beach, the height of the vessel, the quality of the light. Avoid generic prose that could accompany any photograph. Do not invent a client brief, shooting date, camera body, lens, location, or production crew that was not part of the actual process.

The next section pairs a closer crop with an italic editorial statement. Label the crop as a detail of the same image. Its purpose is to shift attention toward texture or a compositional relationship, not to create the impression of a larger photographic series. Include a restrained three-color palette derived from the study’s visual world. The swatches are supporting design information and should have readable accessible names, but should not become another decorative dashboard widget.

The final written section explains the editorial intention and the image-generation context. It should state that the image is not documentary evidence or commissioned work. A link to the inquiry page carries the current study slug so the form can preselect the relevant interest. End with a large Next study link that moves through the three studies cyclically. Each case page is substantial enough to explain its image and complete enough to serve as a direct entry point.

Image viewer behavior

Use a native dialog element for the full-screen image viewer. The dialog provides modal focus containment and Escape behavior without a custom focus-trap implementation. Its content is a dark continuous surface with a top utility row, a large contained image, and a bottom caption and navigation row. The image uses object-fit contain so the entire composition is visible. Do not crop the image inside the viewer merely to fill the screen. On a narrow phone, the image may have substantial space above or below; that is preferable to hiding its edges.

The top row contains the image count and an explicit Close button. The bottom identifies the study, its category and year, a Read the study link, and previous/next image buttons. The viewer navigates the three-image archive, including when opened from an individual study. Update its title, alt text, count, metadata, and study link together. ArrowLeft and ArrowRight move through the archive while the dialog is open. Escape closes it using native behavior.

Remember the button that opened the viewer and restore focus to it when the dialog closes. Prevent background scrolling while the dialog is open, then restore normal scrolling afterward. Do not intercept arrow keys globally when the viewer is closed. Announce image changes through a concise polite live region. Controls should be at least fourteen pixels and have practical touch areas. Reduced-motion users receive immediate image changes without a fade.

Practice and inquiry pages

The practice page begins with a large editorial statement about attention and perspective. A split image-and-text section uses the still life as a visual anchor and explains how architecture, landscape, and ordinary objects belong in the same practice. It explicitly identifies the work as generated concepts. Continue with three numbered principles: begin with something specific, leave room around the idea, and keep the context visible. Each principle gets a substantive paragraph about how it affects the work.

The inquiry page is a two-column reading and form layout on desktop and a single column on mobile. The introduction asks what the visitor has in mind and explains that the page prepares an unsent local draft. Fields are name, email, an optional study interest, the idea, and timing. Name and email are required; the idea needs at least twenty meaningful characters. Use visible labels, native validation, appropriate autocomplete, and a sensible maximum length. Do not send the form data anywhere.

If the inquiry URL contains a recognized study slug, preselect that study. Ignore unknown values. Preparing the draft creates a plain-text summary containing the entered details and selected interest. Narrow FormData values to strings before using them. Render user content with textContent rather than HTML. Hide the form, reveal a review panel, and move focus to that panel. The result must say that it is a local, unsent inquiry, not a confirmed commission or booking.

Provide Download draft, Copy draft, and Edit details. The download is a real anchor with a Blob URL and a descriptive text filename, prepared only after a valid submission. Revoke an earlier object URL when creating a replacement. Copy reports success or a useful download fallback if the Clipboard API fails. Editing restores the existing form values and focuses the first field. No account, payment, external message, or persistent personal-data storage is needed.

Responsive and accessibility quality

The site must remain readable at a 390-pixel viewport. Reflow the layout instead of shrinking a desktop screenshot. Navigation and action text remain at least fourteen pixels, secondary labels at least twelve, and editorial paragraphs at least sixteen. On narrow screens, the study grid becomes a single column, its offsets disappear, the case sections stack, and the viewer caption and navigation wrap into separate rows. The cover title becomes roughly sixty-three pixels with two controlled lines, leaving space for the current-study caption and arrows.

Use actual headings in a logical sequence. The cover title is the page h1; section titles are h2; study captions are h3. Do not choose heading levels to obtain a smaller visual size. The archive page has its own h1 and a properly labeled studies section. The image viewer has a title referenced by aria-labelledby. The inquiry result similarly has a labeled focus target. Every page includes a skip link and one main landmark.

Contrast must remain sufficient on both paper and dark surfaces. Do not use low-opacity gray for important captions or form labels. White cover text needs the supporting image overlay. Focus outlines must remain visible against the photograph, paper, and dark viewer. Icon-only arrows need accessible names, and decorative plus signs should not produce redundant announcements. Filter buttons use their native button semantics and pressed state inside a real group.

Build contract and verification

Export buildMonograph from scripts/monograph/build.mjs and return an object containing prompt. Generate seven complete pages: home, archive, practice, inquiry, and the three studies. Keep source in scripts/monograph, output and assets in public/demos/monograph, and the distributed prompt in public/prompts/monograph.md. Include this substantive brief, exact study records, responsive CSS, and actual JavaScript under Reference interaction handler. Do not edit shared catalogs, application files, validators, or deployment configuration.

Deliver three original full-size WebP photographs, responsive 640-pixel derivatives, a hero preview, the local Geist font and license, and provider-neutral credits that retain the generated-image disclosure. Preserve the original image-generation files outside the deliverable. Do not include local user paths in public provenance. There should be no favicon, hosting-provider mark, or unrelated platform branding in the generated pages or downloads.

Verify the builder and all local links. Run scoped lint. Inspect the desktop cover, asymmetric study arrangement, an individual case, and mobile layouts. Exercise cover changes, category filtering, image viewer open/next/previous/Escape/focus return, inquiry preselection, draft generation, copy feedback, and download preparation. Measure document width on narrow pages and fix intrinsic-size overflow rather than hiding it globally. Report only observed results, distinguishing a prepared download link from a completed file download.

The final result should make the visitor slow down for the images while keeping every practical action clear. Its distinction comes from the original photography, the editorial rhythm, and the careful relationship between a complete image and a closer reading of it.

Exact study records

export const studies = [
  {
    slug: 'blue-hour',
    title: 'Rooms for light',
    category: 'Architecture',
    year: '2026',
    index: '01',
    location: 'An imagined Mediterranean courtyard',
    line: 'Space, held open.',
    image: 'blue-hour.webp',
    alt: 'Original generated photograph of ivory courtyard walls and a deep blue reflecting pool in strong sunlight',
    brief:
      'An architectural image begins with a relationship: a surface and the light that finds it. Rooms for light is a self-initiated study of an imagined courtyard, built around the meeting of warm stone, white plaster, and a precise field of blue.',
    direction:
      'The composition follows the pool’s edge toward a small opening in the far wall. It is a simple line of attention: from the tactile foreground, through the reflected architecture, to a fragment of sea. The empty space is part of the subject.',
    observation:
      'Hard light can reveal softness. The plaster is not perfectly smooth, the water breaks every reflected line, and the tree’s shadow introduces a different rhythm to the geometry. Those small disruptions keep the image from becoming an architectural diagram.',
    palette: ['#e7dfcc', '#c5b99e', '#17498a'],
    detail: 'Water loosens the geometry.',
    crop: '50% 75%',
  },
  {
    slug: 'tideline',
    title: 'The long way home',
    category: 'Landscape',
    year: '2026',
    index: '02',
    location: 'An imagined Atlantic coastline',
    line: 'Following the edge.',
    image: 'tideline.webp',
    alt: 'Original generated coastal photograph with a lone windswept tree, dark beach, teal waves, and silver clouded sky',
    brief:
      'The long way home is a landscape study about the place where two kinds of movement meet. The land holds its shape while the sea redraws the boundary. An imagined coastline gives that relationship room to unfold.',
    direction:
      'The eye enters through a small windswept tree and follows the curve of the beach toward the distant headland. There is no single dramatic subject. The image is built from distances, repeated wave lines, and the quiet persistence of the horizon.',
    observation:
      'The palette stays close to the weather: muted green, dark volcanic sand, silver cloud, and deep water. The lack of a bright focal point asks for a slower reading. What first appears to be one gray field gradually separates into many textures.',
    palette: ['#b7bcb9', '#536d70', '#293a3c'],
    detail: 'A boundary that never stays still.',
    crop: '70% 65%',
  },
  {
    slug: 'small-rituals',
    title: 'Ordinary, considered',
    category: 'Still life',
    year: '2026',
    index: '03',
    location: 'A constructed afternoon still life',
    line: 'The things we keep close.',
    image: 'small-rituals.webp',
    alt: 'Original generated still-life photograph of a cream ceramic vessel, orange persimmon, and linen on walnut in warm afternoon light',
    brief:
      'Ordinary, considered is a still-life study of three familiar materials: ceramic, fruit, and linen. The arrangement is deliberately spare. Its interest comes from the way each object receives the same afternoon light differently.',
    direction:
      'A vessel provides height, the fruit provides a concentrated color, and the cloth draws a soft line across the tabletop. The objects are not arranged as products to be sold. They are a small conversation between weight, surface, and shadow.',
    observation:
      'The terracotta wall holds the warmth of the scene while the cream vessel creates a place for the eye to rest. A narrow leaf shadow and the cloth’s uneven edge give the arrangement a sense of life beyond the frame.',
    palette: ['#b66b3e', '#e0d2b5', '#583a27'],
    detail: 'Texture is a kind of memory.',
    crop: '55% 60%',
  },
];

Exact responsive CSS

@font-face {
  font-family: Geist;
  src: url('assets/geist-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}
body {
  margin: 0;
  background: #ede9df;
  color: #282b26;
  font:
    16px/1.6 Geist,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #9a623f;
  outline-offset: 5px;
}
::selection {
  background: #c2c9b4;
}
.skip {
  position: fixed;
  top: -100px;
  left: 15px;
  z-index: 99;
  padding: 15px;
  background: #ede9df;
  color: #242720;
}
.skip:focus {
  top: 0;
}
.header {
  height: 84px;
  padding: 0 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #b9bdae;
  position: relative;
  z-index: 10;
}
.wordmark {
  font:
    italic 30px/1 Georgia,
    serif;
  letter-spacing: -1.3px;
}
.nav {
  display: flex;
  gap: 35px;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.menu {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
}
.cover-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: #fff;
  border-color: #ffffff45;
}
.cover {
  height: min(100svh, 1050px);
  min-height: 680px;
  position: relative;
  color: #fff;
  background: #173b53;
  overflow: hidden;
}
.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transition: opacity 0.25s;
}
.cover:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #071e2da0,
    #071e2d10 35%,
    #071e2d80 58%,
    #071e2dc8
  );
  pointer-events: none;
}
.cover-body {
  position: relative;
  z-index: 1;
  padding: 132px 36px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover-kicker {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  line-height: 1.7;
}
.cover-title {
  font:
    400 clamp(78px, 8.8vw, 146px)/0.96 Georgia,
    serif;
  letter-spacing: -0.058em;
  margin: 50px 0 25px;
  max-width: 900px;
  text-shadow: 0 2px 25px #152b3535;
}
.cover-title em {
  font-weight: 400;
}
.cover-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}
.cover-caption {
  font-size: 12px;
  line-height: 1.7;
}
.cover-caption a {
  border-bottom: 1px solid #fff9;
  padding-bottom: 5px;
  display: inline-block;
  margin-top: 9px;
}
.cover-controls {
  display: flex;
  gap: 11px;
  align-items: center;
}
.cover-controls button {
  background: #10232d75;
  border: 1px solid #fff8;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 17px;
}
.cover-controls button[aria-pressed='true'] {
  background: #ede9df;
  color: #203743;
  border-color: #ede9df;
}
.cover-controls .cover-number {
  font-size: 12px;
  width: 35px;
  height: 35px;
  background: transparent;
}
.micro {
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #646b5f;
}
.intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding: 100px 6% 95px;
}
.intro h2 {
  font:
    400 clamp(36px, 4.6vw, 69px)/1.12 Georgia,
    serif;
  letter-spacing: -2px;
  margin: 0 0 28px;
  max-width: 870px;
}
.intro p {
  max-width: 520px;
  font-size: 15px;
  color: #5e6658;
  line-height: 1.8;
}
.text-link {
  display: inline-flex;
  gap: 35px;
  border-bottom: 1px solid #707965;
  padding: 8px 0;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 15px;
}
.text-link:hover {
  color: #875536;
}
.work {
  padding: 0 6% 90px;
}
.work-head {
  border-top: 1px solid #b9bdae;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 45px;
}
.work-head h2 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.filters button {
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 7px 0;
  font-size: 12px;
  color: #5e6658;
}
.filters button[aria-pressed='true'] {
  border-bottom-color: #333c2b;
  color: #22281d;
}
.work-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 80px 8%;
  align-items: start;
}
.study-card {
  min-width: 0;
}
.study-card:nth-child(2) {
  margin-top: 150px;
}
.study-card:nth-child(3) {
  grid-column: 1/-1;
  max-width: 900px;
  width: 75%;
  margin: 0 0 0 12%;
}
.image-button {
  padding: 0;
  border: 0;
  background: #c5cbbb;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.image-button img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1.35;
  object-fit: cover;
  transition: transform 0.65s;
}
.study-card:nth-child(2) .image-button img {
  aspect-ratio: 0.82;
}
.study-card:nth-child(3) .image-button img {
  aspect-ratio: 1.65;
}
.image-button:hover img {
  transform: scale(1.025);
}
.image-button .zoom-label {
  position: absolute;
  right: 13px;
  bottom: 13px;
  background: #ede9df;
  color: #293223;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.image-button:hover .zoom-label,
.image-button:focus-visible .zoom-label {
  opacity: 1;
  transform: none;
}
.study-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}
.study-caption .index {
  font-size: 12px;
  color: #505b48;
  padding-top: 7px;
}
.study-caption h3 {
  font:
    400 32px/1.15 Georgia,
    serif;
  letter-spacing: -0.9px;
  margin: 0 0 10px;
}
.study-caption p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #505b48;
}
.study-caption a:hover h3 {
  color: #875536;
}
.work-count {
  font-size: 12px;
  color: #505b48;
  margin: 25px 0 0;
}
.filtered .study-card {
  margin: 0;
  width: 100%;
  max-width: none;
  grid-column: auto;
}
.filtered .image-button img {
  aspect-ratio: 1.35;
}
.statement {
  background: #263b3c;
  color: #eeefe2;
  padding: 80px 6%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
}
.statement .micro {
  color: #c0cec2;
}
.statement h2 {
  font:
    italic 400 clamp(45px, 5.6vw, 83px)/1.08 Georgia,
    serif;
  letter-spacing: -2px;
  margin: 0 0 30px;
  max-width: 850px;
}
.statement p {
  max-width: 570px;
  font-size: 14px;
  line-height: 1.8;
  color: #c1cfc4;
}
.statement .text-link {
  color: #f2f0e2;
  border-color: #a9bcae;
}
.footer {
  padding: 45px 36px 30px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  border-bottom: 1px solid #b9bdae;
  padding-bottom: 35px;
}
.footer-top > a {
  font:
    italic 400 clamp(45px, 5.5vw, 80px)/1 Georgia,
    serif;
  letter-spacing: -2px;
}
.footer-top p {
  font-size: 12px;
  line-height: 1.8;
  max-width: 250px;
  margin: 0;
  color: #5e6658;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding-top: 24px;
  font-size: 12px;
  color: #5e6658;
}
.footer-bottom nav {
  display: flex;
  gap: 25px;
}
.page-title {
  padding: 65px 6% 55px;
}
.page-title h1 {
  font:
    400 clamp(60px, 8.5vw, 130px)/1.02 Georgia,
    serif;
  letter-spacing: -0.055em;
  margin: 30px 0;
}
.page-title p {
  font-size: 16px;
  color: #5e6658;
  line-height: 1.8;
  max-width: 560px;
}
.case-title {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
}
.case-title h1 {
  max-width: 920px;
}
.case-title > div:last-child {
  max-width: 250px;
  padding-bottom: 20px;
}
.case-full {
  padding: 0 3%;
}
.case-full .image-button img {
  aspect-ratio: 1.85;
}
.case-full figcaption {
  font-size: 12px;
  color: #636c5b;
  margin-top: 12px;
}
.case-copy {
  padding: 90px 9%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12%;
}
.case-copy h2 {
  font:
    400 46px/1.12 Georgia,
    serif;
  letter-spacing: -1.5px;
  margin: 20px 0;
}
.case-copy p {
  font-size: 15px;
  color: #5e6658;
  line-height: 1.9;
  margin: 0 0 24px;
}
.case-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 7%;
  align-items: center;
  padding: 0 9% 90px;
}
.detail-frame {
  margin: 0;
  overflow: hidden;
  background: #c9cfbf;
}
.detail-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.9;
  object-fit: cover;
  transform: scale(1.13);
}
.detail-copy h2 {
  font:
    italic 400 48px/1.1 Georgia,
    serif;
  letter-spacing: -1.5px;
  margin: 18px 0 25px;
}
.detail-copy p {
  font-size: 14px;
  color: #5e6658;
  line-height: 1.9;
  max-width: 400px;
}
.palette {
  display: flex;
  gap: 8px;
  margin: 28px 0;
}
.palette span {
  height: 28px;
  width: 54px;
  border: 1px solid #0001;
}
.next-study {
  border-top: 1px solid #b9bdae;
  padding: 50px 6%;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}
.next-study strong {
  font:
    400 clamp(36px, 5.5vw, 82px)/1.1 Georgia,
    serif;
  letter-spacing: -2px;
  display: block;
  margin-top: 15px;
}
.next-study .arrow {
  font-size: 60px;
}
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  padding: 10px 6% 80px;
  align-items: center;
}
.about-split img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.85;
  object-fit: cover;
}
.about-split h2 {
  font:
    400 44px/1.15 Georgia,
    serif;
  letter-spacing: -1.4px;
}
.about-split p {
  font-size: 15px;
  line-height: 1.9;
  color: #5e6658;
}
.practice {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding: 60px 6%;
  border-top: 1px solid #b9bdae;
}
.practice-list article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 25px;
  border-top: 1px solid #b9bdae;
  padding: 28px 0;
}
.practice-list h3 {
  font:
    400 31px/1.15 Georgia,
    serif;
  margin: 0 0 15px;
}
.practice-list p {
  font-size: 14px;
  color: #5e6658;
  line-height: 1.8;
  max-width: 650px;
}
.inquiry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11%;
  padding: 65px 6% 90px;
}
.inquiry h1 {
  font:
    400 clamp(58px, 7vw, 100px)/1 Georgia,
    serif;
  letter-spacing: -4px;
  margin: 30px 0;
}
.inquiry aside p {
  max-width: 360px;
  font-size: 15px;
  color: #5e6658;
  line-height: 1.85;
}
.form label {
  display: block;
  font-size: 12px;
  margin-bottom: 28px;
}
.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #929d86;
  padding: 14px 0;
  background: none;
  border-radius: 0;
  color: #2c3526;
  margin-top: 7px;
}
.form textarea {
  resize: vertical;
  min-height: 140px;
}
.primary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #263b3c;
  color: #fff;
  border: 1px solid #263b3c;
  font-size: 12px;
}
.primary:hover {
  background: #354d4e;
}
.form-note {
  font-size: 12px;
  color: #64705a;
  line-height: 1.8;
  margin-top: 20px;
}
.draft {
  border-top: 1px solid #929d86;
  padding-top: 25px;
}
.draft h2 {
  font:
    400 36px/1.1 Georgia,
    serif;
  letter-spacing: -1px;
}
.draft pre {
  font:
    14px/1.85 Geist,
    sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}
.draft-actions button,
.draft-actions a {
  background: #263b3c;
  color: white;
  border: 0;
  padding: 12px 16px;
  font-size: 12px;
}
.draft output {
  font-size: 12px;
  display: block;
  margin-top: 15px;
}
.lightbox {
  border: 0;
  padding: 0;
  background: #172122;
  color: #f5f1e7;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100svh;
  margin: 0;
  overflow: hidden;
}
.lightbox::backdrop {
  background: #172122;
}
.lightbox-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 24px 30px;
  gap: 20px;
}
.lightbox-top,
.lightbox-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  font-size: 12px;
}
.lightbox-top button,
.lightbox-bottom button {
  background: transparent;
  border: 1px solid #71877d;
  color: #f2f0e4;
  padding: 10px 17px;
  font-size: 12px;
}
.lightbox-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  min-height: 0;
}
.lightbox-caption {
  display: flex;
  gap: 25px;
  align-items: baseline;
}
.lightbox-caption strong {
  font:
    400 26px/1.1 Georgia,
    serif;
  font-weight: 400;
}
.lightbox-caption span {
  font-size: 12px;
  color: #c4d0c5;
}
.lightbox-nav {
  display: flex;
  gap: 10px;
}
.lightbox-status {
  font-size: 12px;
  color: #c4d0c5;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
[hidden] {
  display: none !important;
}
.cover-changing .cover-photo {
  opacity: 0.6;
}
@media (max-width: 950px) {
  .header {
    padding: 0 25px;
  }
  .nav {
    gap: 25px;
  }
  .cover-body {
    padding: 120px 25px 30px;
  }
  .cover-title {
    font-size: 100px;
  }
  .intro,
  .statement {
    gap: 35px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .work {
    padding-left: 5%;
    padding-right: 5%;
  }
  .work-grid {
    gap: 55px 6%;
  }
  .study-caption h3 {
    font-size: 27px;
  }
  .case-copy {
    padding: 65px 6%;
    gap: 8%;
  }
  .case-detail {
    padding: 0 6% 65px;
    gap: 6%;
  }
  .case-title {
    display: block;
  }
  .case-title > div:last-child {
    max-width: 500px;
  }
  .about-split {
    gap: 7%;
  }
  .inquiry {
    gap: 7%;
  }
  .footer {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (max-width: 700px) {
  .header {
    height: 72px;
    padding: 0 18px;
  }
  .wordmark {
    font-size: 27px;
  }
  .nav {
    gap: 17px;
    font-size: 12px;
  }
  .cover {
    min-height: 650px;
    height: 90svh;
  }
  .cover-body {
    padding: 105px 20px 25px;
  }
  .cover-kicker {
    font-size: 12px;
    gap: 25px;
  }
  .cover-kicker span:last-child {
    max-width: 120px;
    text-align: right;
  }
  .cover-title {
    font-size: clamp(63px, 12vw, 90px);
    letter-spacing: -3.5px;
    margin: 40px 0 28px;
  }
  .cover-bottom {
    align-items: end;
    gap: 15px;
  }
  .cover-controls {
    gap: 7px;
  }
  .cover-controls button {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .cover-controls .cover-number {
    display: none;
  }
  .cover-caption {
    font-size: 12px;
  }
  .intro {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 50px 20px;
  }
  .intro h2 {
    font-size: 40px;
    letter-spacing: -1.4px;
  }
  .intro p {
    font-size: 14px;
  }
  .work {
    padding: 0 20px 55px;
  }
  .work-head {
    flex-direction: column;
    align-items: start;
    margin-bottom: 28px;
    gap: 17px;
  }
  .filters {
    gap: 19px;
  }
  .filters button {
    font-size: 12px;
  }
  .work-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .study-card:nth-child(2),
  .study-card:nth-child(3) {
    margin: 0;
    width: 100%;
    max-width: none;
    grid-column: auto;
  }
  .study-card:nth-child(2) .image-button img {
    aspect-ratio: 1.05;
  }
  .study-card:nth-child(3) .image-button img {
    aspect-ratio: 1.35;
  }
  .image-button .zoom-label {
    opacity: 1;
    transform: none;
  }
  .study-caption {
    margin-top: 15px;
  }
  .study-caption h3 {
    font-size: 29px;
  }
  .statement {
    padding: 50px 20px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .statement h2 {
    font-size: 46px;
    letter-spacing: -1.6px;
  }
  .statement p {
    font-size: 13px;
  }
  .footer {
    padding: 35px 20px 25px;
  }
  .footer-top {
    gap: 25px;
    flex-direction: column;
    padding-bottom: 25px;
  }
  .footer-top > a {
    font-size: 51px;
  }
  .footer-bottom {
    gap: 17px;
    flex-direction: column;
  }
  .footer-bottom nav {
    gap: 22px;
  }
  .page-title {
    padding: 40px 20px 30px;
  }
  .page-title h1 {
    font-size: 62px;
    letter-spacing: -3px;
    margin: 24px 0;
  }
  .page-title p {
    font-size: 14px;
  }
  .case-full {
    padding: 0 20px;
  }
  .case-full .image-button img {
    aspect-ratio: 1.3;
  }
  .case-copy {
    padding: 45px 20px;
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .case-copy h2 {
    font-size: 38px;
    margin: 15px 0;
  }
  .case-copy p {
    font-size: 14px;
  }
  .case-detail {
    grid-template-columns: 1fr;
    padding: 0 20px 50px;
    gap: 30px;
  }
  .detail-frame img {
    aspect-ratio: 1.1;
  }
  .detail-copy h2 {
    font-size: 39px;
    letter-spacing: -1px;
  }
  .next-study {
    padding: 35px 20px;
    gap: 25px;
  }
  .next-study strong {
    font-size: 38px;
    letter-spacing: -1px;
  }
  .next-study .arrow {
    font-size: 35px;
  }
  .about-split {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 5px 20px 50px;
  }
  .about-split img {
    aspect-ratio: 1.15;
  }
  .about-split h2 {
    font-size: 36px;
  }
  .about-split p {
    font-size: 14px;
  }
  .practice {
    padding: 40px 20px;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .practice-list article {
    grid-template-columns: 25px 1fr;
    gap: 15px;
  }
  .practice-list h3 {
    font-size: 29px;
  }
  .inquiry {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 20px 55px;
  }
  .inquiry h1 {
    font-size: 70px;
    letter-spacing: -3px;
  }
  .inquiry aside p {
    font-size: 14px;
  }
  .lightbox-inner {
    padding: 18px 16px;
    gap: 15px;
  }
  .lightbox-top {
    font-size: 12px;
  }
  .lightbox-bottom {
    align-items: start;
    gap: 18px;
    flex-direction: column;
  }
  .lightbox-caption {
    gap: 12px;
    flex-wrap: wrap;
  }
  .lightbox-caption strong {
    font-size: 24px;
  }
  .lightbox-nav {
    width: 100%;
    justify-content: space-between;
  }
  .lightbox-top button,
  .lightbox-bottom button {
    padding: 10px 14px;
  }
  .lightbox-status {
    display: none;
  }
}
@media (max-width: 390px) {
  .nav {
    gap: 13px;
  }
  .nav a:nth-child(2) {
    display: none;
  }
  .cover-title {
    font-size: 63px;
  }
  .cover-controls {
    gap: 5px;
  }
  .cover-caption {
    max-width: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

.nav {
  font-size: 14px;
}
.filters button,
.primary,
.text-link,
.draft-actions button,
.draft-actions a,
.lightbox-top button,
.lightbox-bottom button {
  font-size: 14px;
}
.form label,
.form input,
.form select,
.form textarea {
  font-size: 16px;
}
.intro p,
.statement p,
.page-title p,
.case-copy p,
.detail-copy p,
.about-split p,
.practice-list p,
.inquiry aside p {
  font-size: 16px;
}
.cover-caption {
  font-size: 14px;
}
.footer-top p {
  font-size: 14px;
}
.lightbox-caption span,
.footer-bottom,
.micro {
  font-size: 12px;
}
@media (max-width: 700px) {
  .nav {
    font-size: 14px;
    gap: 20px;
  }
  .filters {
    gap: 16px;
  }
  .filters button {
    font-size: 14px;
  }
  .intro p,
  .statement p,
  .page-title p,
  .case-copy p,
  .detail-copy p,
  .about-split p,
  .practice-list p,
  .inquiry aside p {
    font-size: 16px;
  }
  .cover-kicker {
    font-size: 12px;
  }
  .cover-caption {
    font-size: 12px;
  }
  .cover-title {
    font-size: clamp(59px, 12vw, 84px);
  }
}

.draft pre {
  font-size: 16px;
}
.cover-controls button {
  min-width: 42px;
  min-height: 42px;
}
.lightbox-nav .text-link {
  color: #f5f1e7;
  border-color: #aabcb0;
}

.case-full {
  margin: 0;
}
.form input,
.form select,
.form textarea {
  min-height: 48px;
}
.lightbox-top button,
.lightbox-bottom button {
  min-height: 44px;
}
.cover-controls .cover-number {
  font-size: 14px;
}

.footer-bottom nav a {
  font-size: 14px;
}
@media (max-width: 700px) {
  .inquiry h1 {
    font-size: 56px;
    letter-spacing: -2.6px;
  }
  .inquiry h1 br {
    display: none;
  }
}

Reference interaction handler

const studies = JSON.parse(
  document.getElementById('monograph-data').textContent,
);
const reduced = matchMedia('(prefers-reduced-motion: reduce)');
const cover = document.querySelector('.cover');
let coverIndex = 0;
function showCover(index) {
  coverIndex = (index + studies.length) % studies.length;
  const study = studies[coverIndex];
  document.querySelector('#cover-image').src = 'assets/' + study.image;
  document.querySelector('#cover-image').alt = study.alt;
  document.querySelector('#cover-study').textContent = study.title;
  document.querySelector('#cover-category').textContent =
    study.category + ' / ' + study.year;
  document.querySelector('#cover-link').href = study.slug + '.html';
  document
    .querySelectorAll('[data-cover-index]')
    .forEach((button) =>
      button.setAttribute(
        'aria-pressed',
        String(Number(button.dataset.coverIndex) === coverIndex),
      ),
    );
  document.querySelector('#cover-status').textContent =
    `Cover ${coverIndex + 1} of ${studies.length}: ${study.title}`;
  if (!reduced.matches) {
    cover.classList.add('cover-changing');
    setTimeout(() => cover.classList.remove('cover-changing'), 250);
  }
}
if (cover) {
  document
    .querySelectorAll('[data-cover-index]')
    .forEach((button) =>
      button.addEventListener('click', () =>
        showCover(Number(button.dataset.coverIndex)),
      ),
    );
  document
    .querySelector('#cover-prev')
    .addEventListener('click', () => showCover(coverIndex - 1));
  document
    .querySelector('#cover-next')
    .addEventListener('click', () => showCover(coverIndex + 1));
}
document.querySelectorAll('[data-filter]').forEach((button) =>
  button.addEventListener('click', () => {
    const category = button.dataset.filter;
    let count = 0;
    document.querySelectorAll('[data-category]').forEach((card) => {
      card.hidden =
        category !== 'All studies' && card.dataset.category !== category;
      if (!card.hidden) count++;
    });
    document
      .querySelector('.work-grid')
      .classList.toggle('filtered', category !== 'All studies');
    document
      .querySelectorAll('[data-filter]')
      .forEach((other) =>
        other.setAttribute('aria-pressed', String(other === button)),
      );
    document.querySelector('#work-count').textContent =
      `${count} ${count === 1 ? 'study' : 'studies'} shown · Original generated photographic concepts.`;
  }),
);
const lightbox = document.querySelector('#lightbox');
let photoIndex = 0;
let previousFocus = null;
function renderPhoto() {
  const study = studies[photoIndex];
  const image = document.querySelector('#lightbox-image');
  image.src = 'assets/' + study.image;
  image.alt = study.alt;
  document.querySelector('#lightbox-title').textContent = study.title;
  document.querySelector('#lightbox-meta').textContent =
    study.category + ' / ' + study.year;
  document.querySelector('#lightbox-count').textContent =
    `${photoIndex + 1} / ${studies.length}`;
  document.querySelector('#lightbox-study').href = study.slug + '.html';
  document.querySelector('#lightbox-announcement').textContent =
    `Image ${photoIndex + 1} of ${studies.length}: ${study.title}`;
}
function movePhoto(direction) {
  photoIndex = (photoIndex + direction + studies.length) % studies.length;
  renderPhoto();
}
document.querySelectorAll('[data-lightbox]').forEach((button) =>
  button.addEventListener('click', () => {
    photoIndex = Math.max(
      0,
      studies.findIndex((study) => study.slug === button.dataset.lightbox),
    );
    previousFocus = button;
    renderPhoto();
    lightbox.showModal();
    document.body.style.overflow = 'hidden';
  }),
);
lightbox?.addEventListener('close', () => {
  document.body.style.overflow = '';
  previousFocus?.focus();
});
document
  .querySelector('#lightbox-close')
  ?.addEventListener('click', () => lightbox.close());
document
  .querySelector('#lightbox-prev')
  ?.addEventListener('click', () => movePhoto(-1));
document
  .querySelector('#lightbox-next')
  ?.addEventListener('click', () => movePhoto(1));
lightbox?.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowRight') {
    event.preventDefault();
    movePhoto(1);
  }
  if (event.key === 'ArrowLeft') {
    event.preventDefault();
    movePhoto(-1);
  }
});
const form = document.querySelector('#inquiry-form');
let draft = '';
let draftUrl = '';
function readText(data, key) {
  const value = data.get(key);
  return typeof value === 'string' ? value.trim() : '';
}
if (form) {
  for (const field of ['name', 'idea']) {
    const control = form.elements.namedItem(field);
    control?.addEventListener('input', () => control.setCustomValidity(''));
  }
  const requested = new URLSearchParams(location.search).get('study');
  if (studies.some((study) => study.slug === requested))
    document.querySelector('#interest').value = requested;
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const idea = form.elements.namedItem('idea');
    const name = form.elements.namedItem('name');
    if (idea instanceof HTMLTextAreaElement)
      idea.setCustomValidity(
        idea.value.trim().length >= 20
          ? ''
          : 'Describe the idea in at least 20 characters.',
      );
    if (name instanceof HTMLInputElement)
      name.setCustomValidity(name.value.trim() ? '' : 'Add your name.');
    if (!form.reportValidity()) return;
    const data = new FormData(form);
    const chosen = studies.find(
      (study) => study.slug === readText(data, 'interest'),
    );
    draft = `MONOGRAPH — INQUIRY DRAFT\n\nName: ${readText(data, 'name')}\nEmail: ${readText(data, 'email')}\nInterest: ${chosen ? chosen.title : 'A new direction'}\nTiming: ${readText(data, 'timing')}\n\nThe idea\n${readText(data, 'idea')}\n\nLocal, unsent draft. Monograph is a fictional creative practice using original generated photographic studies.`;
    document.querySelector('#draft-text').textContent = draft;
    if (draftUrl) URL.revokeObjectURL(draftUrl);
    draftUrl = URL.createObjectURL(
      new Blob([draft], { type: 'text/plain;charset=utf-8' }),
    );
    document.querySelector('#download-draft').href = draftUrl;
    form.hidden = true;
    const result = document.querySelector('#draft-result');
    result.hidden = false;
    result.focus();
  });
}
document.querySelector('#edit-draft')?.addEventListener('click', () => {
  document.querySelector('#draft-result').hidden = true;
  form.hidden = false;
  form.querySelector('input').focus();
});
document.querySelector('#copy-draft')?.addEventListener('click', async () => {
  const output = document.querySelector('#copy-status');
  try {
    await navigator.clipboard.writeText(draft);
    output.textContent = 'Draft copied.';
  } catch {
    output.textContent =
      'Copy is unavailable here. Download the draft instead.';
  }
});