/*
 * The printed sheet - the poster itself.
 *
 * Extracted from assets/create.css so the builder (/create) and the home page
 * Best Sellers block render the same object from the same rules, for exactly
 * the reason frame.css was extracted before it: two copies of a poster is how
 * the marketing page comes to advertise something the builder does not make.
 * The frame around this lives in frame.css; the geometry, type ladder and
 * theme colours arrive as CSS custom properties from
 * includes/poster-layout.php via tfs_poster_layout_css().
 *
 * Every measurement in here is in cqw - a fraction of the sheet's own width -
 * never pixels, which is what lets a 260px home page thumbnail, the ~600px
 * builder preview and the 11,820px print file carry identical proportions.
 * The fallback after each var() is the same value from poster-layout.php, kept
 * only so the sheet still renders if that injected block goes missing.
 *
 * Anything that is builder chrome - the wall scene, the zoom tools, the
 * controls - stays in create.css. Nothing page-specific may be added here.
 */

/* The two families the sheet is set in. Declared on .poster rather than :root
   because this file is loaded next to site.css on the home page, whose :root
   names its own fonts --font / --mono and would otherwise be fighting for the
   same block. The @font-face rules themselves come from whichever stylesheet
   the page already loads - both site.css and create.css declare them against
   the same files in assets/fonts. */
.poster {
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ==========================================================================
   Poster shell, frame and mat
   ========================================================================== */

.poster {
  position: relative;
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  isolation: isolate;
  filter: drop-shadow(0 26px 40px rgba(18, 16, 13, 0.22));
}

/* The frame, the rabbet and the glazing live in assets/frame.css,
   which the home page hero links too so the two cannot drift. */

/* Canvas is a stretched print: it stands off the wall instead of sitting behind
   glass, so it gets a wrapped edge rather than a moulding. */
.poster.finish-canvas .poster-base {
  box-shadow:
    2.2cqw 0 0 -0.2cqw rgba(0, 0, 0, 0.28),
    0 2.6cqw 0 -0.3cqw rgba(0, 0, 0, 0.34),
    0 30px 44px rgba(18, 16, 13, 0.3);
}

/* ==========================================================================
   The printed sheet
   ==========================================================================
   container-type sits on .poster-base rather than on .poster so every cqw
   inside the artwork is a fraction of the print itself - add a frame and the
   type stays exactly the size it will be off the press. */

.poster-base {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: var(--poster-aspect, 3 / 4);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #faf8f3, #f0ece3);
  color: #12100d;
  --poster-muted: #6f695e;
  --poster-rule: #c9c2b4;
  --poster-accent: #9a7b3f;
  --poster-stamp: #8a6a2f;
}

.poster-keyline {
  position: absolute;
  z-index: 1;
  inset: var(--poster-border-inset, 4%);
  border: var(--poster-border-width, 0.32cqw) solid var(--poster-rule);
  opacity: var(--poster-border-opacity, 0.55);
  pointer-events: none;
}

.poster-canvas {
  position: absolute;
  z-index: 2;
  inset: var(--poster-margin-top, 10.5%) var(--poster-margin-x, 11.5%) var(--poster-margin-bottom, 9.5%);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.tpl {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.poster.template-plaque .tpl-plaque,
.poster.template-receipt .tpl-receipt,
.poster.template-signal .tpl-signal,
.poster.template-order .tpl-order,
.poster.template-timestamp .tpl-timestamp {
  display: flex;
}

/* --- shared type roles ----------------------------------------------------
   font-size, line-height, letter-spacing, font-weight and text-transform for
   every .type-* role are GENERATED by tfs_poster_layout_css() and injected by
   create/index.php. They are deliberately absent here.

   They used to be written out again in this file, and that is precisely how
   the print file came to disagree with the preview: create.css uppercased and
   tracked the business name, includes/render-service.php never saw a
   stylesheet and drew it sentence-case and untracked, so the sheet a customer
   approved was not the sheet that would have been printed. Restating a value
   from poster-layout.php in this file re-opens that gap - only the fallback in
   var(--type-*, …) may name a size, and only so the page degrades rather than
   collapsing if the generated block is ever missing.

   What stays below is what the spec does not describe: colour roles and
   numeric rendering. */

.type-monument {
  font-size: var(--type-monument, 24cqw);
  font-variant-numeric: lining-nums tabular-nums;
}

.type-display {
  font-size: var(--type-display, 7.2cqw);
}

.type-title {
  font-size: var(--type-title, 4cqw);
}

.type-lead {
  font-size: var(--type-lead, 2.1cqw);
  color: var(--poster-muted);
}

.type-body {
  font-size: var(--type-body, 1.65cqw);
}

.type-label {
  font-size: var(--type-label, 1.25cqw);
  color: var(--poster-muted);
}

.type-micro {
  font-size: var(--type-micro, 1.05cqw);
  color: var(--poster-muted);
}

.mono {
  font-family: var(--font-mono);
}

.poster-rule {
  flex: none;
  width: 100%;
  height: var(--poster-rule-width, 0.22cqw);
  margin: 0;
  border: 0;
  background: var(--poster-rule);
}

.poster-rule.short {
  width: 22%;
  margin: 0 auto;
}

.poster-logo {
  max-width: var(--poster-logo-width, 34cqw);
  max-height: var(--poster-logo-height, 5.2cqw);
  margin: 0 auto;
  object-fit: contain;
  /* One ink. A full-colour logo fights the sheet; a monochrome mark sits on it
     like a maker's stamp, which is the register the whole object is in. */
  filter: grayscale(1) contrast(1.15);
  opacity: 0.92;
}

.poster-spacer {
  flex: 1;
  min-height: 0;
}

.poster-stamp {
  display: grid;
  width: var(--poster-stamp-size, 11.6cqw);
  height: var(--poster-stamp-size, 11.6cqw);
  place-items: center;
  margin: 0 auto;
  border: var(--poster-stamp-ring, 0.35cqw) solid var(--poster-stamp);
  border-radius: 999px;
  color: var(--poster-stamp);
  font-size: calc(var(--type-label, 1.25cqw) * 1.15);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

/* Two lines, hard. The field takes 140 characters, and on a short landscape
   sheet an unclamped quote is the one piece of user content long enough to
   push the whole stack off the paper. */
.poster-annotation {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--poster-muted);
  font-size: var(--type-body, 1.65cqw);
  font-style: italic;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.poster-annotation cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.82em;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The record grid: DATE / TIME / ORDER / PAID as mono columns. Shared by the
   families that present themselves as a document rather than as an award. */
.poster-record-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.2cqw;
  margin: 0;
  padding: 2.6cqw 0;
  border-top: var(--poster-rule-width, 0.22cqw) solid var(--poster-rule);
  border-bottom: var(--poster-rule-width, 0.22cqw) solid var(--poster-rule);
  font-family: var(--font-mono);
  text-align: left;
}

.poster-record-grid div {
  min-width: 0;
}

.poster-record-grid dt {
  margin: 0 0 1cqw;
  color: var(--poster-muted);
  font-size: var(--type-micro, 1.05cqw);
  letter-spacing: 0.1em;
}

.poster-record-grid dd {
  margin: 0;
  overflow: hidden;
  font-size: var(--type-body, 1.65cqw);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
  width: 100%;
  padding-top: 2.2cqw;
  border-top: var(--poster-rule-width, 0.22cqw) solid var(--poster-rule);
}

.verification-mark {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
}

.verification-mark i {
  display: grid;
  width: 2.7cqw;
  height: 2.7cqw;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-style: normal;
}

/* --- THE PLAQUE ----------------------------------------------------------
   One enormous numeral over a lot of quiet space, with the transaction
   recorded small underneath. It should read as an award, never as an invoice. */

.tpl-plaque {
  gap: 0;
  justify-content: flex-start;
}

.tpl-plaque .plaque-eyebrow {
  margin: 0;
}

.tpl-plaque .plaque-monument {
  margin: 0.32em 0 0;
  color: var(--poster-accent);
}

/* The monument is sized off the sheet's width, but a landscape sheet is wide
   and short - at full size the stack below it has no room left. This is the
   only place the ratio has to be broken. */
.poster-landscape .tpl-plaque .plaque-monument {
  font-size: calc(var(--type-monument, 24cqw) * 0.74);
}

.tpl-plaque .plaque-business {
  margin: 0.5em 0 0;
}

.tpl-plaque .plaque-statement {
  max-width: 78%;
  margin: 0.7em auto 0;
}

.tpl-plaque .plaque-record {
  display: grid;
  gap: 0.35em;
  margin: 0;
}

.tpl-plaque .plaque-record strong {
  font-weight: 600;
}

.tpl-plaque .plaque-foot {
  display: grid;
  gap: 0.6em;
  margin: 0;
}

/* --- THE RECEIPT ---------------------------------------------------------
   A till receipt at gallery scale. Everything is mono and centred, and the
   rules are the perforations. */

.tpl-receipt {
  gap: 0;
  font-family: var(--font-mono);
}

/* space-between rather than a fixed gap: the receipt is eleven rows tall, and a
   gap sized in em overruns the sheet as soon as the canvas gets short - a
   landscape sheet has half the height of a portrait one. Distributing the rows
   across whatever height exists means every shape fits by construction. */
.tpl-receipt .receipt-column {
  display: flex;
  flex: 1;
  width: 84%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.tpl-receipt .receipt-business {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

.tpl-receipt .receipt-total {
  font-size: calc(var(--type-display, 7.2cqw) * 0.62);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tpl-receipt .receipt-statement {
  font-size: calc(var(--type-display, 7.2cqw) * 0.42);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tpl-receipt .receipt-paid {
  color: var(--poster-stamp);
  letter-spacing: 0.3em;
}

/* --- THE SIGNAL ----------------------------------------------------------
   The amount at full height, left-aligned like a ledger rather than centred
   like an award, with the transaction recorded underneath as data. Built for
   software founders, where there is no product photo and the number is the
   whole story. */

.tpl-signal {
  justify-content: flex-start;
  gap: 0;
  text-align: left;
}

.tpl-signal .signal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  min-height: 6cqw;
}

.tpl-signal .poster-logo {
  margin: 0;
}

.tpl-signal .signal-monument {
  margin: 0.1em 0 0;
  font-size: calc(var(--type-monument, 24cqw) * 0.52);
}

.tpl-signal .signal-step {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 1.1em 0 0;
  padding: 0.5em 0.9em;
  border: var(--poster-rule-width, 0.22cqw) solid var(--poster-accent);
  border-radius: 999px;
  color: var(--poster-accent);
  font-family: var(--font-mono);
  font-size: var(--type-body, 1.65cqw);
  letter-spacing: 0.1em;
  align-self: flex-start;
}

.tpl-signal .signal-business {
  margin: 1.1em 0 0;
}

.tpl-signal .signal-statement {
  margin: 0.5em 0 0;
  font-size: var(--type-lead, 2.1cqw);
  letter-spacing: 0.04em;
}

/* --- THE ORDER -----------------------------------------------------------
   A deliberate nod to the admin screen the founder refreshed all night, rebuilt
   in the house typeface so it is platform-neutral and ages well. */

.tpl-order {
  justify-content: flex-start;
  gap: 0;
  text-align: left;
}

.tpl-order .order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}

.tpl-order .poster-logo {
  margin: 0;
}

.tpl-order .order-id {
  text-align: right;
}

.tpl-order .order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.5em;
  color: var(--poster-stamp);
}

.tpl-order .order-status::before {
  width: 0.62em;
  height: 0.62em;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.tpl-order .order-section {
  display: grid;
  gap: 0.45em;
  margin: 0;
}

.tpl-order .order-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.tpl-order .order-line strong {
  font-weight: 600;
}

.tpl-order .order-amount {
  font-weight: 700;
  white-space: nowrap;
}

.tpl-order .order-foot {
  display: grid;
  gap: 0.5em;
}

/* --- THE TIMESTAMP -------------------------------------------------------
   The year set in mono at full height - a machine-written number, not a
   designed one - over the exact moment. Reads like a historical marker, which
   is precisely the claim being made. */

.tpl-timestamp {
  justify-content: center;
  gap: 0;
}

.tpl-timestamp .timestamp-year {
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(var(--type-monument, 24cqw) * 0.86);
  letter-spacing: -0.06em;
}

.tpl-timestamp .timestamp-parts {
  display: flex;
  justify-content: center;
  gap: 1.6em;
  margin: 0.9em 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-lead, 2.1cqw);
  letter-spacing: 0.24em;
}

.tpl-timestamp .timestamp-business {
  margin: 1.5em 0 0;
}

.tpl-timestamp .timestamp-statement {
  margin: 0.7em 0 0;
}