/* Hallmark · shape: app screen · theme: brand Horizon · genre: modern-minimal · signature: public service artwork beside an explicit access action · nav: BLOCK wordmark · footer: none · redesign: full · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · weakest: E, public service context and both access actions must remain visible without JavaScript and on compact screens */
:root {
  --access-paper: var(--background);
  --access-surface: var(--background-subtle);
  --access-ink: var(--foreground);
  --access-muted: var(--muted-foreground);
  --access-line: var(--border);
  --access-focus: var(--ring);
  --access-font: var(--font-family);
}

html, body { overflow-x: clip; }
.page-access-body { margin: 0; min-height: 100svh; background: var(--access-paper); color: var(--access-ink); font-family: var(--access-font); font-size: var(--fs-body); line-height: var(--lh-body); }
.page-access-body *, .page-access-body *::before, .page-access-body *::after { box-sizing: border-box; }
.page-access-body [hidden] { display: none !important; }
.page-access-body :is(a, button, select):focus-visible { outline: 2px solid var(--access-focus); outline-offset: var(--space-1); transition: none; }
.page-access-body :is(a, button):active { transform: translateY(1px); }
.page-access-body :is(button, select):disabled { cursor: not-allowed; opacity: .55; transform: none; }
.page-access-header { min-height: var(--main-header-height); }
.page-access-header-inner { width: 100%; max-width: var(--page-max); min-height: var(--main-header-height); margin-inline: auto; padding-inline: var(--keyline-x); display: flex; align-items: center; justify-content: center; }
.page-access-brand { display: inline-flex; align-items: center; min-width: 0; min-height: var(--control-h-l); flex-shrink: 0; }
.page-access-main { width: 100%; max-width: var(--page-max); min-height: calc(100svh - var(--main-header-height)); margin-inline: auto; padding: var(--space-8) var(--keyline-x); display: grid; align-content: center; }
.page-access-layout { width: 100%; max-width: var(--content-max); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-10); }
.page-access-media { min-width: 0; margin: 0; display: grid; place-items: center; overflow: clip; border-radius: var(--radius-md); background: var(--access-surface); }
.page-access-media img { display: block; width: 100%; height: auto; max-height: calc(var(--space-12) * 8); object-fit: contain; }
.page-access-content { display: grid; gap: var(--space-5); min-width: 0; }
.page-access-intro { display: grid; gap: var(--space-3); }
.page-access-content :is(h1,h2,p) { margin: 0; }
.page-access-content :is(h1,h2) { min-width: 0; overflow-wrap: break-word; word-break: keep-all; text-wrap: balance; font-weight: 600; }
.page-access-content h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.page-access-content h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.page-access-description { color: var(--access-muted); overflow-wrap: anywhere; }
.page-access-description, .page-access-requirement { word-break: keep-all; text-wrap: pretty; }
.page-access-condition { display: grid; gap: var(--space-2); border-top: 1px solid var(--access-line); padding-top: var(--space-5); }
.page-access-requirement { color: var(--access-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.page-access-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.page-access-actions .btn { min-height: var(--control-h-m); }

@media (max-width: 640px) {
  .page-access-main { min-height: 0; padding-block: var(--space-6); }
  .page-access-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .page-access-media img { max-height: calc(var(--space-12) * 4); }
  .page-access-content { gap: var(--space-4); }
  .page-access-condition { padding-top: var(--space-4); }
}

@media (max-height: 560px) and (min-width: 641px) {
  .page-access-main { padding-block: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .page-access-body *, .page-access-body *::before, .page-access-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}