/* ARCHIVE for business (/archive): archive.family's skeleton in Mulholland's dark look. The name, one promise, the hall of records, one way in; two lines with pictures; the
   sovereignty shout and its three spec cards; any agent; then the ask. */

body { background: #000; }
.as { --as-bone: #f1f0ea; --as-line: rgba(255, 255, 255, 0.2); --as-quiet: rgba(255, 255, 255, 0.68); background: #000; color: #fff; font-family: var(--font-sans); }
.as h1, .as h2, .as p { margin: 0; }

/* the door, on the page margin as the site's other pages open (hero-wm), in their proportions: the label, the
   wordmark in their title box at their wordmark height, the line at t-lg; then the hall the page's full width, one
   line under it */
.as-door { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); padding: var(--page-top-dynamic, var(--page-top)) var(--page-margin) var(--space-24); text-align: left; }
.as-label { color: #fff; }
.as-word { display: flex; align-items: center; height: calc(var(--type-h1-size) * var(--type-h1-leading)); }
.as-word svg { display: block; width: auto; height: var(--wordmark-height); color: #fff; }
.as-sub { max-width: 44rem; text-wrap: pretty; }
.as-stage { position: relative; width: 100%; margin-top: calc(var(--spacing-2xl) - var(--spacing-md)); }
.as-caption { max-width: 34rem; margin-top: var(--space-4); color: var(--as-quiet); }

@media (max-width: 767.98px) { .as-word svg { height: var(--wordmark-height-mobile); } }

/* the hall of records (archive.js), the door's picture: a long hall in CSS 3D, both walls shelved with what a company keeps (tables, PDFs, spreadsheets, decks, emails,
   threads, reports, folders; lab/37/a/archive/sheet/hall.html), the aisle clear, an engraved floor in the dark globe's paper and rules, ARCHIVE's split A small at its far end; the cards fade into the dark with distance */
/* the frame: 16:9 but never taller than most of the window (an ultrawide gets a wider band), dark at its centre and
   black at its edges so it melts into the page; archive.js scales the scene and its perspective to the frame */
.as-hall { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; min-height: 360px; overflow: hidden; background: radial-gradient(ellipse 62% 70% at 50% 46%, #000 0 14%, #0b0e14 48%, #050608 78%, #000 100%); perspective: 760px; perspective-origin: 50% 46%; }
.as-hall__world { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; }
.as-hall__card { position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; background: url("/vendor/archive/business/hall-2048.webp") no-repeat; background-size: 800% 400%; background-position: calc(var(--c) * 100% / 7) calc(var(--r) * 100% / 3); backface-visibility: hidden; will-change: transform, opacity; }
.as-hall__floor { position: absolute; left: -900px; top: 300px; width: 1800px; height: 4000px; overflow: hidden; transform-origin: 50% 0; transform: rotateX(-90deg); background:
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(140, 140, 136, .5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), #12161e; }
/* the floor's rules, a layer of their own that archive.js slides by one rule's pitch, on the compositor */
.as-hall__lines { position: absolute; left: 0; right: 0; top: -40px; bottom: 0; background: repeating-linear-gradient(0deg, rgba(140, 140, 136, .22) 0 1px, transparent 1px 40px); will-change: transform; }
.as-hall__mark { position: absolute; z-index: 1; left: 50%; top: 46%; width: clamp(28px, 4.2%, 52px); transform: translate(-50%, -62%); pointer-events: none; }
.as-hall__end { display: block; width: 100%; height: auto; color: #f1f0ea; opacity: .9; }
/* the A at the end of the hall, still; archive.js draws light drifting out of it behind the shelves */
.as-hall__streaks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.as-hall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 16% 22% at 50% 46%, #000 0 35%, rgba(0, 0, 0, .85) 60%, transparent),
  linear-gradient(90deg, #000, transparent 9%, transparent 91%, #000),
  linear-gradient(#000, transparent 12%, transparent 86%, #000); }

/* lines, each a drawn scene (lab/37/a/archive/sheet/rows.html) and one sentence */
.as-rows { display: flex; flex-direction: column; gap: var(--space-24); max-width: 62rem; margin: 0 auto; padding: 0 var(--page-margin) var(--space-28); }
.as-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); }
.as-row h2 { text-wrap: balance; }
.as .as-row__tag { margin-bottom: var(--space-4); color: var(--as-quiet); }
.as-row p { margin-top: var(--space-4); max-width: 24rem; color: var(--as-quiet); }
.as-pic { display: block; width: 100%; height: auto; aspect-ratio: 1; background: #111; }

/* sovereignty: one shout, a line, three spec cards with a corner cut off each; each card's picture is drawn in squares
   (the split-A pyramid, a rack, a key) that archive.js scatters and lets settle into the shape on scroll */
.as-sov { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 0 var(--page-margin) var(--space-28); text-align: center; }
.as-shout { font-weight: var(--font-normal); font-size: clamp(3.25rem, 10vw, 9rem); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.as-sov__sub { max-width: 36rem; text-wrap: balance; }
.as-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); width: min(100%, 76rem); margin-top: var(--space-12); text-align: left; }
.as-spec { display: flex; flex-direction: column; padding: var(--space-8); background: var(--as-bone); color: #000; clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.as-spec h3 { margin: var(--space-3) 0 0; }
.as-spec__px { position: relative; width: 44%; aspect-ratio: 1; margin: var(--space-12) auto; }
.as-spec__px i { position: absolute; display: block; }
.as-spec__px--live i { transition: transform 1100ms cubic-bezier(.2, .8, .2, 1), opacity 700ms ease; }
.as-spec dl { margin: auto 0 0; }
.as-spec dl div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid #000; }
.as-spec dd { margin: 0; text-align: right; }

/* the ask */
.as-setup { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 0 var(--page-margin) var(--space-24); text-align: center; }
.as-setup p { max-width: 30rem; color: var(--as-quiet); }

/* the wordmark, and the one line for families */
.as-mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: 0 var(--page-margin) var(--space-24); }
.as-mark svg { width: min(100%, 64rem); height: auto; color: #fff; }
.as-mark p { color: var(--as-quiet); }
.as-mark a { color: #fff; }

@media (max-width: 767.98px) {
  .as-row { grid-template-columns: 1fr; gap: var(--space-8); }
  .as-specs { grid-template-columns: 1fr; }
  .as-spec__px { width: 26%; margin: var(--space-6) auto; }
  .as-hall { aspect-ratio: 4 / 5; }
  .as-row p { max-width: none; }
}

/* the strawberry banner over the nav (home-announcement.css), its icon the split A instead of the tooth */
.as-banner__mark { flex-shrink: 0; inline-size: var(--announcement-icon-size); block-size: var(--announcement-icon-size); }