/* aincient-labs.com — Monograph (DECISIONS 0490). Homepage stylesheet.
   One fixed text column beside photo plates of real demo work, repeated down the page as spreads.
   Colour lives in the photographs and the mark; the page is paper and ink. */

/* ---------- Spreads: text column + plate ---------- */
.spread {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  max-width: 1920px;
  margin: 0 auto;
}
.spread + .spread { border-top: 1px solid var(--hair); }
.col {
  padding: calc(var(--pad) * 2) var(--pad) var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.col h2 { font-size: clamp(1.75rem, 1.15rem + 1.15vw, 2.375rem); line-height: 1.1; letter-spacing: -.022em; }
.col h2 + p { margin-top: 2px; }
.col > p { color: var(--ink-2); max-width: 34em; }
.note { font-size: 14px; color: var(--grey); }
.col > .note { color: var(--grey); }

/* Ledger: ruled two-column facts */
.ledger { margin: 10px 0 0; border-top: 1px solid var(--ink); font-size: 15px; }
.ledger div { display: grid; grid-template-columns: minmax(7.5em, 40%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.ledger dt { color: var(--grey); }
.ledger dd { margin: 0; }

/* ---------- Masthead (sits over the hero column on wide screens) ---------- */
@media (min-width: 961px) {
.masthead {
  position: absolute;
  top: 0; left: max(0px, calc((100vw - 1920px) / 2));
  width: var(--col);
  z-index: 5;
  padding: var(--pad) var(--pad) 0;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
}
}

/* ---------- Hero ---------- */
.hero { min-height: clamp(660px, 100svh, 1060px); }
.hero-col { padding-top: calc(var(--pad) + 250px); justify-content: flex-end; gap: 0; }
.hero-copy { display: flex; flex-direction: column; }
.hero h1 {
  font-size: clamp(2.125rem, 1.1rem + 2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 500;
  max-width: 11em;
}
.lede { margin-top: 22px; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.get { margin-top: 30px; display: grid; gap: 12px; justify-items: start; }
.req { font-size: 14px; color: var(--grey); max-width: 32em; }
.req a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--btn); color: var(--btn-ink);
  font: 600 16px/1 var(--sans); letter-spacing: .005em;
  padding: 17px 22px; border: 0; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn:hover { background: var(--mark); color: var(--mark-ink); }
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateY(2px); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); }

.phone-note { display: grid; gap: 12px; justify-items: start; }
.phone-note p:first-child { color: var(--ink-2); }
html.is-phone .phone-note { display: grid !important; }
html.is-phone .get > .btn[data-dl-cta], html.is-phone .get > .req,
html.is-phone .close > .btn[data-dl-cta], html.is-phone .close > .req { display: none; }

.plate-caption {
  margin-top: 44px; padding-top: 10px; border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font-size: 13px; color: var(--grey); min-height: 52px;
}
.pc-n { color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 6px; }
.pc-nav { display: flex; gap: 2px; margin-top: -6px; }
.pc-nav button {
  width: 40px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  transition: color .2s var(--ease-out), transform .3s var(--ease-out);
}
.pc-nav button:hover { color: var(--mark); }
.pc-nav button[data-plate-prev]:hover { transform: translateX(-2px); }
.pc-nav button[data-plate-next]:hover { transform: translateX(2px); }

/* ---------- Plates ---------- */
.plates { position: relative; overflow: hidden; background: var(--well); }
.plate { margin: 0; }
.plates .plate {
  position: absolute; inset: 0;
  background: var(--tone);
  container-type: size;
}
.plates .plate.is-current { z-index: 2; }
.plates .plate.is-leaving { z-index: 1; }
.plate-photo, .plate-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-photo img { object-fit: cover; object-position: 50% 30%; }

.dev { position: absolute; overflow: hidden; }
.dev img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen {
  left: 11cqw; top: 15cqh;
  width: min(78cqw, 124cqh);
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 34px 60px -30px rgba(20, 14, 6, .55), 0 0 0 1px rgba(0, 0, 0, .08);
}
.handset {
  left: 5cqw; bottom: 6cqh;
  width: min(18cqw, 30cqh);
  aspect-ratio: 390 / 730;
  border-radius: clamp(14px, 2.4cqw, 28px);
  border: clamp(4px, .6cqw, 7px) solid #111;
  background: #111;
  box-shadow: 0 30px 46px -22px rgba(20, 14, 6, .6);
}
.share {
  right: 5cqw; bottom: 7cqh;
  width: min(27cqw, 44cqh);
  background: #fff; color: #111;
  border-radius: 10px;
  box-shadow: 0 26px 46px -22px rgba(20, 14, 6, .5), 0 0 0 1px rgba(0, 0, 0, .06);
  font-size: clamp(11px, 1.05cqw, 13px); line-height: 1.35;
}
.share img { height: auto; aspect-ratio: 1.91 / 1; }
.share p { padding: .8em 1em .95em; display: grid; gap: .2em; }
.share .who { color: #6B6B6B; font-size: .88em; }
.share .h { font-weight: 600; }
.share .d { color: #4A4A4A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plate.is-dark .screen, .plate.is-dark .share { box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .16); }
.plate.is-dark .handset { border-color: #2A2826; }

/* The page turn: the next plate wipes in from the column edge, its screens settle after it. */
@media (prefers-reduced-motion: no-preference) {
  .plates .plate.is-entering { animation: plate-in 1s var(--ease-out) both; }
  .plates .plate.is-entering .plate-photo img { animation: plate-photo-in 1.4s var(--ease-out) both; }
  .plates .plate.is-entering .dev { animation: dev-in .9s var(--ease-out) both; }
  .plates .plate.is-entering .screen { animation-delay: .32s; }
  .plates .plate.is-entering .handset { animation-delay: .42s; }
  .plates .plate.is-entering .share { animation-delay: .5s; }
  .plates .plate.is-entering.from-right { animation-name: plate-in-r; }
}
@keyframes plate-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes plate-in-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes plate-photo-in { from { transform: scale(1.06); } to { transform: none; } }
@keyframes dev-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Staged plates: a photo with one object laid on it (Plates 3 and 4) */
.plate-staged { display: flex; flex-direction: column; min-width: 0; }
.plate-staged .stage {
  position: relative; flex: 1; min-height: 620px; overflow: hidden;
  background: var(--tone); container-type: size;
}
.plate-staged figcaption {
  font-size: 13px; color: var(--grey);
  padding: 12px var(--pad) 18px; padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--ink);
}
.plate-staged figcaption a { color: inherit; }
.plate-kelp-made { --tone: #C4B8B1; }
.plate-kelp-yours { --tone: #D9CABD; }

/* The recording, cropped to the app inside its browser window (the gradient frame and
   browser bar stay outside the crop). */
.film {
  position: absolute; overflow: hidden;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(74cqw, 960px);
  aspect-ratio: 1328 / 749;
  background: #EDEBE6;
  border-radius: 6px;
  box-shadow: 0 34px 60px -30px rgba(20, 14, 6, .55), 0 0 0 1px rgba(0, 0, 0, .08);
}
.film-video { position: absolute; width: 120.48%; max-width: none; height: auto; left: -10.24%; top: -12.82%; }
.film-play {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn); color: var(--btn-ink);
  font: 600 15px/1 var(--sans); padding: 13px 16px 13px 13px; border: 0; cursor: pointer;
  transition: background-color .25s var(--ease-out), opacity .3s var(--ease-out);
}
.film-play:hover { background: var(--mark); color: var(--mark-ink); }
.film-play .i-pause { display: none; }
.film.is-playing .film-play .i-play { display: none; }
.film.is-playing .film-play .i-pause { display: block; }
.film.is-playing .film-play { opacity: .0; }
.film.is-playing:hover .film-play, .film.is-playing .film-play:focus-visible { opacity: 1; }
.film-video { cursor: pointer; }
@media (hover: none) { .film.is-playing .film-play { opacity: 1; } }

/* Export folder, laid on the packing-table plate */
.files {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(62cqw, 540px);
  background: var(--paper); color: var(--ink);
  font-size: 14.5px;
  box-shadow: 0 30px 56px -28px rgba(20, 14, 6, .5), 0 0 0 1px rgba(0, 0, 0, .06);
}
.files-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ink); font-weight: 600; }
.files-bar span:last-child { color: var(--grey); font-weight: 400; }
.files ul { list-style: none; margin: 0; padding: 0; }
.files li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--hair); }
.files li:last-child { border-bottom: 0; }
.files li span:first-child { font-family: var(--mono); font-size: .9em; }
.files li span:last-child { color: var(--grey); }
.files li.dir span:first-child::before {
  content: ""; display: inline-block; width: 13px; height: 10px; margin-right: 9px;
  border: 1.5px solid currentColor; border-top-width: 3px; vertical-align: -1px; opacity: .55;
}

/* ---------- Install ---------- */
.install-body {
  padding: calc(var(--pad) * 2) var(--pad) var(--pad);
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
  border-left: 1px solid var(--hair);
}
.steps { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 1px solid var(--ink); }
.step { padding: 22px 0 26px; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.step h3 { font-size: 20px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 14px; }
.step-n { font-size: 14px; color: var(--grey); font-variant-numeric: tabular-nums; min-width: 1ch; }
.step > p, .step > .fine { margin-left: calc(1ch + 14px); }
.step > p { color: var(--ink-2); max-width: 40em; }
.step > ul, .step > details { margin-left: calc(1ch + 14px); }
.fine { font-size: 14px; color: var(--grey); max-width: 46em; overflow-wrap: anywhere; }
.os-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.os-links a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 14px; font-size: 15px; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.os-links a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.os-links svg { width: 16px; height: 16px; }
.os-links--lg li:first-child a { background: var(--btn); color: var(--btn-ink); box-shadow: none; font-weight: 600; }
.os-links--lg li:first-child a:hover { background: var(--mark); color: var(--mark-ink); }
.os-links--lg li:first-child .fmt { color: inherit; opacity: 1; }
.fmt { color: var(--grey); font-size: 13px; }
details.more { margin-top: 4px; }
details.more summary { cursor: pointer; font-size: 15px; color: var(--ink-2); padding: 6px 0; list-style: none; display: inline-flex; align-items: flex-start; gap: 8px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: ""; flex: none; margin-top: 8px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .25s var(--ease-out); }
details.more[open] summary::before { transform: rotate(45deg); }
.term { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 0 4px; }
.term h4 { font-size: 16px; margin-top: 8px; }
.term p { color: var(--ink-2); font-size: 15px; }
.cmd { display: flex; align-items: center; gap: 10px; background: var(--well); padding: 10px 10px 10px 14px; max-width: 100%; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 13.5px; padding: 4px 0; }
.cmd-copy { flex: none; font: 600 13px var(--sans); background: var(--paper); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--hair); padding: 7px 11px; cursor: pointer; }
.cmd-copy:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cmd-copy.is-copied { background: var(--ink); color: var(--paper); box-shadow: none; }
.builders { margin-top: 26px; font-size: 15px; color: var(--grey); }

/* ---------- Close + footer ---------- */
.close {
  max-width: 1920px; margin: 0 auto;
  border-top: 1px solid var(--ink);
  padding: clamp(64px, 9vw, 140px) var(--pad);
  padding-left: calc(var(--col) + 0px);
  display: grid; gap: 22px; justify-items: start;
}
.close h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; max-width: 14em; }

/* ---------- Product page (/features): sheets, requests, points ---------- */
/* A sheet plate reproduces real captures flat on the well, like a book's reproduction pages:
   square, a hairline frame, no shadow (nothing here lies on a photograph). */
.plate-sheet { display: flex; flex-direction: column; min-width: 0; background: var(--well); }
.sheet {
  flex: 1; display: grid; gap: clamp(10px, 1.1vw, 18px); align-content: center;
  padding: calc(var(--pad) * 2) var(--pad);
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.sheet img { width: 100%; height: auto; background: var(--paper); outline: 1px solid var(--hair); outline-offset: -1px; }
.plate-sheet > figcaption {
  font-size: 13px; color: var(--grey);
  padding: 12px var(--pad) 18px; padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--ink); background: var(--paper);
}

.sheet-sites { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet-sites img:first-child { grid-column: 1 / -1; }

.sheet-type { justify-items: start; gap: clamp(14px, 1.6vw, 26px); }
.sheet-type img { width: min(100%, 800px); }

.sheet-images { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sheet-images img { aspect-ratio: 4 / 3; object-fit: cover; }

.sheet-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.sheet-pair figure { margin: 0; display: grid; gap: 8px; }
.sheet-pair figcaption { font-size: 13px; color: var(--grey); }

/* Requests you can type, under the spread heading. */
.asks { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 34em; }
.asks li { padding: 12px 0 13px; border-bottom: 1px solid var(--hair); display: grid; gap: 4px; justify-items: start; }
.asks q, .asks p { color: var(--ink); font-size: 16px; line-height: 1.45; }
.asks q { quotes: "\201C" "\201D"; }
.asks p { color: var(--ink-2); }
.asks a { font-size: 14px; color: var(--grey); }
.asks a:hover { color: var(--ink); }

/* Points: the install-step list without numbers (the order carries nothing). */
.points .step > p, .points .step > .fine { margin-left: 0; }
.points .fine a { color: inherit; }

/* ---------- Narrow screens: column above plate ---------- */
@media (max-width: 960px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .spread + .spread { border-top: 1px solid var(--ink); }
  .col { padding: 44px var(--gutter) 28px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }


  .hero { min-height: 0; }
  .hero-col { padding-top: 36px; }
  .hero h1 { font-size: clamp(2.125rem, 1.4rem + 3.4vw, 2.75rem); }
  .lede { font-size: 17px; }
  .plate-caption { margin-top: 32px; }
  .plates { aspect-ratio: 4 / 5; max-height: 92svh; width: 100%; }
  .screen { left: 6cqw; top: 9cqh; width: min(88cqw, 100cqh); }
  .handset { left: 5cqw; bottom: 5cqh; width: min(28cqw, 26cqh); }
  .share { right: 5cqw; bottom: 6cqh; width: min(50cqw, 46cqh); font-size: clamp(10px, 2.9cqw, 13px); }
  .share .d { display: none; }

  .plate-staged .stage { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
  .plate-kelp-yours .stage { aspect-ratio: 4 / 5; }
  .film { width: 90cqw; }
  .files { width: 90cqw; font-size: 13px; }
  .files li { padding: 7px 12px; }
  .files-bar { padding: 10px 12px; }
  .plate-staged figcaption { padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .sheet { padding: 28px var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .plate-sheet > figcaption { padding: 10px max(var(--gutter), env(safe-area-inset-right, 0px)) 16px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .sheet-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sheet-pair { grid-template-columns: 1fr; }
  .install-body { padding: 24px var(--gutter) 36px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .install-body { border-left: 0; padding-top: 0; }
  .step > p, .step > .fine, .step > ul, .step > details { margin-left: 0; }
  .film-play { left: 10px; bottom: 10px; font-size: 14px; padding: 11px 13px 11px 11px; }
  .files { font-size: 13.5px; }
  .close { padding: 64px max(var(--gutter), env(safe-area-inset-right, 0px)) 64px max(var(--gutter), env(safe-area-inset-left, 0px)); }
}

/* Stacked but wide (a phone on its side, a small landscape tablet): square and 4:5 plates would be
   twice the screen height, so staged plates go wide and their objects size to the height. */
@media (max-width: 960px) and (min-aspect-ratio: 4/3) {
  .plate-staged .stage, .plate-kelp-yours .stage { aspect-ratio: auto; width: 100%; height: max(380px, 100svh); }
  .film { width: min(90cqw, 140cqh); }
  .files { width: min(80cqw, 520px); font-size: 13px; }
  .files li { padding: 5px 12px; }
  .files-bar { padding: 8px 12px; }
}

/* Phones: the recording is small, so its button keeps only the play/pause glyph (the label stays
   for screen readers) instead of covering a quarter of the frame. */
@media (max-width: 560px) {
  .film-play { padding: 11px; }
  .film-play [data-film-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .share { font-size: clamp(11px, 3.1cqw, 13px); }
  .share .who { font-size: .92em; }
}

/* Touch: every control is at least 44px tall, without changing how it looks. */
@media (pointer: coarse) {
  .pc-nav { margin-top: -10px; margin-right: -8px; }
  .pc-nav button { width: 44px; height: 44px; }
  .os-links a { min-height: 44px; }
  details.more summary { min-height: 44px; padding: 10px 0; }
  details.more summary::before { margin-top: 8px; }
  .cmd { padding-block: 6px; }
  .cmd-copy { min-height: 44px; padding: 0 14px; }
}

@media (min-width: 961px) and (max-height: 860px) {
  .hero-col { padding-top: calc(var(--pad) + 210px); }
  .btn { padding: 15px 20px; }
  .hero h1 { font-size: clamp(2rem, 1rem + 1.6vw, 2.5rem); }
  .lede { margin-top: 14px; font-size: 16px; }
  .get { margin-top: 22px; }
  .plate-caption { margin-top: 28px; }
}

/* Plate fallback tones: the average of each photo's calm zone (plates README, 0498). */
.plate-kelp { --tone: #D8D0C9; }
.plate-vinyl { --tone: #23170B; }

/* Touch screens keep :hover after a tap; don't leave buttons stuck in the hover colour. */
@media (hover: none) {
  .btn:hover, .film-play:hover { background: var(--btn); color: var(--btn-ink); }
  .btn-quiet:hover { background: transparent; color: var(--ink); }
  .btn:hover svg { transform: none; }
}

/* ---------- /agencies: listings on a sheet plate ---------- */
/* A listing reproduces a file or a terminal flat on the well, framed like the sheet captures
   (square, hairline, no shadow); the bar mirrors the export listing on /features. */
.sheet-listings { justify-items: start; gap: clamp(14px, 1.6vw, 26px); }
.listing {
  width: min(100%, 680px); min-width: 0;
  background: var(--paper); color: var(--ink); font-size: 14.5px;
  outline: 1px solid var(--hair); outline-offset: -1px;
}
.listing-bar { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--ink); }
.listing-bar span:first-child { font-family: var(--mono); font-size: .9em; font-weight: 600; }
.listing-bar span:last-child { color: var(--grey); }
.listing pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.listing pre code { font-size: inherit; }
.listing ul { list-style: none; margin: 0; padding: 0; }
.listing li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 9px 16px; border-bottom: 1px solid var(--hair); }
.listing li:last-child { border-bottom: 0; }
.listing li span:first-child { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.listing li span:last-child { color: var(--grey); white-space: nowrap; }
@media (max-width: 560px) {
  .listing li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}