/* Hallmark · shape: Dense pinned-photo wall · genre: editorial · theme: existing Eden brand · job: visit
 * paper: warm cream · accent: original gold · display: Eden Serif · body: Eden Sans · hero: image-filled wall · nav: existing branded masthead · footer: direct contact · signature: naturally proportioned pinned photographs straighten into category selections
 * axes: cream/roman-serif/photo-led · posture: restrained · contrast: pending browser QA · fold: pending browser QA · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 · weakest: H, reduced heading and opened with actual case archive controls */
/* Hallmark · waive 83 · gallery of the user's own authorized case work · real case photographs are the requested primary content */
/* Hallmark · waive 47c · user explicitly requested densely pinned scattered photos · restrained mounting details appear only on paper margins */
/* Hallmark · answered F8 · native wall scrolling only; no automatic slideshow */
:root { --case-matte: oklch(91% .014 83); --case-white: oklch(98% .008 83); --case-backdrop: oklch(12% .008 150 / .92); --case-media-rule: color-mix(in srgb, var(--color-rule) 65%, transparent); --case-inset-rule: color-mix(in srgb, var(--color-ink) 6%, transparent); --case-paper-shadow: oklch(25% .018 80 / .18); --case-paper-shadow-soft: oklch(25% .018 80 / .09); --case-pin: oklch(48% .025 80); --case-pin-light: oklch(86% .016 80); --case-tape: oklch(87% .031 85 / .8); --case-tape-edge: oklch(74% .035 85 / .3); }
html, body { overflow-x: clip; }
.case-page :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.case-page button:active, .case-page a:active { opacity: .76; }
.case-header nav a[aria-current="page"] { color: var(--color-gold); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
/* Compact archive header: photographs, not a marketing hero, lead the first screen. */
.case-header .header-inner { min-height: 92px; }
.case-intro { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); padding-block: var(--space-lg); }
.case-intro-heading { display: flex; align-items: baseline; gap: var(--space-md); }
.case-intro h1, .case-intro h2 { margin: 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.3; text-wrap: balance; }
.case-intro-copy { font-size: var(--text-sm); line-height: 1.8; color: var(--color-ink-2); }
.case-total { font-family: var(--font-body); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.case-collection { width: 100%; max-width: 1800px; margin-inline: auto; padding: 0 var(--space-lg) var(--space-lg); }
.case-wall-module :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.case-wall { position: relative; height: clamp(400px, 70svh, 760px); overflow-y: auto; overflow-x: clip; scrollbar-gutter: stable; scrollbar-width: thin; padding: var(--space-2xs); background: var(--case-matte); border: 1px solid var(--color-rule); scroll-behavior: auto; }
.case-wall:focus-visible { outline-offset: 4px; }
.case-wall[data-mode="focus"] { height: auto; max-height: clamp(400px, 70svh, 760px); min-height: 200px; }
.case-controls { padding-top: var(--space-md); }
.case-control-label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.case-wall .case-state { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg); background: var(--color-paper); }
.case-wall-module button:active, .case-wall-module a:active { opacity: .76; }
.case-wall-module button:disabled { cursor: not-allowed; color: var(--color-muted); background: var(--color-paper-2); }
.case-wall-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.case-wall-skip:focus-visible { position: relative; display: inline-flex; align-items: center; width: auto; height: auto; min-height: 44px; clip-path: none; padding-inline: var(--space-sm); }
.case-tools { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.case-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); min-width: 0; }
.case-filter { display: inline-flex; align-items: baseline; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid transparent; background: transparent; color: var(--color-muted); font-size: 14px; cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.case-filter span { font-size: 12px; color: currentColor; opacity: .7; font-variant-numeric: tabular-nums; }
.case-filter:hover { color: var(--color-ink); border-color: var(--color-rule); }
.case-filter[aria-pressed="true"] { color: var(--color-paper); background: var(--color-ink); border-color: var(--color-ink); }
.case-search { display: flex; align-items: center; flex-shrink: 0; width: 225px; min-height: 44px; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule-2); color: var(--color-muted); }
.case-search:focus-within { border-color: var(--color-focus); }
.case-search svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; }
.case-search input { min-width: 0; width: 100%; border: 0; padding: var(--space-3xs) var(--space-2xs); background: transparent; color: var(--color-ink); font-size: 13px; border-radius: 0; }
.case-search input::placeholder { color: var(--color-muted); opacity: 1; }
.case-search input:focus-visible { outline-offset: 5px; }
.case-results-bar { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 12px; color: var(--color-muted); }
.case-clear { min-height: 44px; background: transparent; border: 0; color: var(--color-ink-2); padding: var(--space-xs) 0 var(--space-xs) var(--space-md); cursor: pointer; font-size: 12px; }
.case-grid { --case-wall-columns: 8; display: grid; grid-template-columns: repeat(var(--case-wall-columns), minmax(0, 1fr)); gap: var(--space-2xs); align-items: start; }
.case-card { min-width: 0; position: relative; transform-origin: top left; }
.case-card-link { display: block; text-decoration: none; position: relative; transform-origin: center; transition: transform var(--dur-long) var(--ease-out); }
.case-card-link:focus-visible { outline-offset: -3px; position: relative; z-index: var(--z-raised); }
.case-card-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; background: var(--case-white); border: 1px solid var(--case-media-rule); }
.case-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--space-3xs); }
.case-card-link:hover .case-card-media, .case-card-link:focus-visible .case-card-media { border-color: var(--color-accent); }
.case-card-open { display: none; }
.case-card-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-xs); text-align: center; color: var(--color-muted); font-size: 12px; background: var(--case-matte); }
.case-sequence { display: grid; grid-template-columns: repeat(var(--case-panels, 2), minmax(0, 1fr)); list-style: none; padding: var(--space-xs) 0; margin: 0; color: var(--color-muted); font-size: 12px; letter-spacing: 0; text-align: center; border-bottom: 1px solid var(--color-rule); }
.case-sequence li + li { border-left: 1px solid var(--color-rule); }
.case-card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); padding-block: var(--space-sm); }
.case-card-meta h3 { font-size: 16px; line-height: 1.3; text-wrap: balance; }
.case-card-category { font-size: 12px; color: var(--color-muted); text-align: right; }
/* Natural photo proportions and staggered column flow break the former square rows. */
.case-grid[data-mode="overview"] { display: block; columns: var(--case-wall-columns); column-gap: var(--space-2xs); padding: var(--space-sm) var(--space-sm) var(--space-lg); }
.case-grid[data-mode="overview"] .case-card { display: block; width: 100%; break-inside: avoid; margin-bottom: var(--space-xs); vertical-align: top; z-index: var(--case-layer, 1); }
.case-grid[data-mode="overview"] .case-card-link { width: var(--case-paper-width, 100%); margin-inline: auto; transform: translate(var(--case-shift-x, 0px), var(--case-shift-y, 0px)) rotate(var(--case-tilt, 0deg)); }
.case-grid[data-mode="overview"] .case-card-media { aspect-ratio: auto; overflow: visible; border: 0; box-shadow: 0 2px 3px var(--case-paper-shadow), 0 6px 9px var(--case-paper-shadow-soft); }
.case-grid[data-mode="overview"] .case-card-media img { width: 100%; height: auto; object-fit: contain; padding: clamp(var(--space-xs), 6.5%, var(--space-md)); }
.case-card-link::before { content: ""; position: absolute; z-index: 2; left: var(--case-pin-x, 50%); top: 1px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--case-pin-light); background: var(--case-pin); box-shadow: 0 1px 2px var(--case-paper-shadow); pointer-events: none; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.case-grid[data-mode="overview"] .case-card-link::before { opacity: 1; }
.case-grid[data-mode="overview"] .case-card[data-mount="tape"] .case-card-link::before { top: -3px; width: 25%; max-width: 36px; height: 7px; border-radius: 0; border: 0; border-inline: 1px solid var(--case-tape-edge); background: var(--case-tape); box-shadow: 0 1px 1px var(--case-paper-shadow-soft); transform: translateX(-50%) rotate(-7deg); }
.case-grid[data-mode="overview"] .case-card:hover, .case-grid[data-mode="overview"] .case-card:focus-within { z-index: var(--z-raised); }
.case-grid[data-mode="focus"] .case-card-link { width: 100%; transform: none; }
.case-grid[data-mode="overview"] .case-sequence, .case-grid[data-mode="overview"] .case-card-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
.case-grid[data-mode="focus"] { grid-template-columns: repeat(var(--case-focus-columns, 4), minmax(0, 1fr)); gap: var(--space-lg); padding: var(--space-md); }
.case-grid[data-mode="focus"] .case-card { width: 100%; max-width: 520px; justify-self: center; }
.case-grid[data-mode="focus"] .case-card-media { max-height: clamp(180px, calc(70svh - 120px), 480px); }
.case-grid[data-mode="focus"] .case-card-media img { padding: var(--space-xs); }
.case-grid[data-mode="focus"][data-single="true"] { max-width: 580px; margin-inline: auto; }
.case-state { padding: var(--space-2xl) var(--space-lg); text-align: center; border-bottom: 1px solid var(--color-rule); }
.case-state h3 { margin-inline: auto; font-size: 23px; }
.case-state p { margin: var(--space-md) auto 20px; font-size: 14px; color: var(--color-muted); }
.case-state a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-md); font-size: 13px; }
.case-nojs { margin-bottom: 32px; color: var(--color-muted); font-size: 13px; }
.case-contact { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.case-contact h2 { line-height: 1.45; font-size: var(--text-title); }
.case-contact .case-note { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.case-contact-link { display: inline-flex; align-items: center; min-height: 48px; text-decoration-thickness: 1px; font-size: var(--text-md); white-space: nowrap; }
.case-footer { background: var(--color-field); color: var(--color-dark-muted); padding-block: 32px; font-size: 12px; }
.case-footer > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.case-footer a { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-lg); text-decoration: none; }
.case-modal-open { overflow: hidden; }
.case-viewer { position: fixed; width: min(1380px, calc(100% - 64px)); height: min(960px, calc(100dvh - 64px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--color-dark-rule); background: var(--color-field); color: var(--color-paper); overscroll-behavior: contain; overflow: hidden; }
.case-viewer::backdrop { background: var(--case-backdrop);  }
.case-viewer[open] { animation: case-dialog-arrive .3s var(--ease-out); }
.case-viewer-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.case-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 20px var(--space-lg); border-bottom: 1px solid var(--color-dark-rule); }
.case-viewer-header > div:first-child { flex: 1; min-width: 0; }
.case-viewer-header p { font-size: 12px; color: var(--color-dark-muted); margin-top: var(--space-2xs); }
.case-viewer-header h2 { font-size: 25px; line-height: 1.3; text-wrap: balance; }
.case-viewer button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; transition: background-color .18s ease; }
.case-viewer button:hover:not(:disabled) { background: var(--color-field-3); }
.case-viewer :focus-visible { outline-color: var(--color-gold); outline-offset: -3px; }
.case-viewer button:disabled { opacity: .4; cursor: not-allowed; color: var(--color-dark-muted); background: var(--color-field); }
.case-viewer-pagination { display: flex; align-items: center; gap: var(--space-sm); }
.case-viewer-pagination svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.case-viewer-pagination button { border-color: var(--color-dark-rule); font-size: 21px; }
#case-viewer-counter { min-width: 56px; text-align: center; font-size: 12px; color: var(--color-dark-muted); font-variant-numeric: tabular-nums; }
.case-viewer button.case-viewer-close { border-color: var(--color-dark-rule); font-size: 29px; font-weight: 400; }
.case-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; overscroll-behavior: contain; isolation: isolate; }
.case-viewer-stage.is-zoomed { touch-action: none; cursor: grab; }
.case-viewer-stage.is-dragging { cursor: grabbing; }
#case-viewer-image { flex: 0 0 auto; max-width: none; max-height: none; object-fit: contain; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transform-origin: center; }
.case-viewer-status { position: absolute; left: 20px; right: 20px; bottom: 16px; margin-inline: auto; width: fit-content; padding: var(--space-xs) var(--space-md); background: var(--color-field); color: var(--color-paper); border: 1px solid var(--color-dark-rule); font-size: 12px; text-align: center; pointer-events: none; }
.case-viewer-status:empty { display: none; }
.case-viewer-sequence .case-sequence { max-width: 720px; margin-inline: auto; padding-block: var(--space-sm); border: 0; color: var(--color-dark-muted); }
.case-viewer-sequence .case-sequence li + li { border-color: var(--color-dark-rule); }
.case-viewer-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--color-dark-rule); }
.case-viewer-footer p { font-size: 12px; color: var(--color-dark-muted); }
.case-zoom { display: flex; align-items: center; border: 1px solid var(--color-dark-rule); }
.case-zoom > button:first-child, .case-zoom > button:last-child { font-size: 24px; }
.case-zoom > button[data-case-fit] { min-width: 110px; border-inline: 1px solid var(--color-dark-rule); display: flex; gap: var(--space-xs); font-size: 12px; }
#case-zoom-label { font-variant-numeric: tabular-nums; }
.case-fit-label { color: var(--color-dark-muted); }
@keyframes case-dialog-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 70rem) {
  .case-tools { flex-wrap: wrap; gap: var(--space-md); }
  .case-search { width: 100%; max-width: 300px; }
  .case-grid { --case-wall-columns: 6; }
}
@media (max-width: 45rem) {
  .case-header .header-inner { min-height: 88px; gap: var(--space-sm); }
  .case-header .wordmark { gap: var(--space-xs); }
  .case-header .wordmark img { width: 30px; height: 52px; }
  .case-header .wordmark strong { font-size: 21px; }
  .case-header .wordmark span span { font-size: 12px; }
  .case-header nav { gap: var(--space-md); font-size: 12px; }
  .case-header nav a:first-child { display: none; }
  .case-intro { align-items: start; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-lg); }
  .case-intro h1, .case-intro h2 { font-size: 32px; }
  .case-intro-copy { font-size: var(--text-sm); }
  .case-intro-copy br { display: none; }
  .case-filters { width: 100%; max-width: 100%; flex-wrap: wrap; gap: var(--space-2xs); }
  .case-filter { flex: 0 0 auto; padding-inline: var(--space-sm); font-size: var(--text-sm); white-space: nowrap; }
  .case-search { max-width: none; }
  .case-collection { padding-inline: var(--space-xs); }
  .case-wall { height: clamp(360px, 62svh, 600px); }
  .case-wall[data-mode="focus"] { height: auto; max-height: clamp(360px, 62svh, 600px); }
  .case-grid { --case-wall-columns: 4; }
  .case-grid[data-mode="focus"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); padding: var(--space-xs); }
  .case-grid[data-mode="focus"][data-single="true"] { grid-template-columns: minmax(0, 1fr); }
  .case-controls { padding-inline: var(--space-xs); }
  .case-card-meta { flex-direction: column; gap: var(--space-2xs); }
  .case-card-category { text-align: left; }
  .case-card-meta h3 { font-size: 14px; }
  .case-sequence { font-size: 11px; }
  .case-card-meta { padding-block: var(--space-sm); }
  .case-contact { flex-direction: column; align-items: start; gap: var(--space-md); }
  .case-footer { padding-block: var(--space-lg); }
  .case-footer > div { flex-wrap: wrap; gap: var(--space-xs); }
  .case-viewer { width: 100%; height: 100dvh; margin: 0; inset: 0; border: 0; }
  .case-viewer-header { padding: max(var(--space-sm), env(safe-area-inset-top)) var(--space-sm) var(--space-sm); gap: var(--space-xs); }
  .case-viewer-header h2 { font-size: 22px; }
  .case-viewer-pagination { gap: var(--space-3xs); }
  #case-viewer-counter { min-width: 48px; font-size: 12px; }
  .case-viewer-footer { padding: var(--space-sm) var(--space-sm) max(var(--space-md), env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
  .case-viewer-footer p { width: 100%; text-align: center; font-size: 12px; order: 2; }
  .case-viewer-sequence .case-sequence { padding-block: var(--space-xs); }
  .case-viewer-status { left: var(--space-sm); right: var(--space-sm); font-size: 12px; }
}
@media (min-width: 96rem) { .case-grid { --case-wall-columns: 9; } }
@media (max-width: 25rem) { .case-grid { --case-wall-columns: 3; } }
@media (max-height: 34rem) and (min-width: 45.01rem) {
  .case-viewer { width: calc(100% - 24px); height: calc(100dvh - 24px); }
  .case-viewer-header { padding-block: var(--space-xs); }
  .case-viewer-header > div:first-child { display: flex; align-items: center; gap: var(--space-md); }
  .case-viewer-header p { margin: 0; }
  .case-viewer-header h2 { font-size: 20px; }
  .case-viewer-footer { padding-block: var(--space-2xs); }
  .case-viewer-sequence .case-sequence { padding-block: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  [data-case-wall] *, [data-case-wall] *::before, [data-case-wall] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}