/* Depth pass - the page should read as a sheet of stock on a surface, not as a
 * screen. All of it is CSS: no JS required, nothing to fail.
 *
 * Loads AFTER each page's inline <style>, so it can only add. Every value is
 * derived from tokens.css so a retheme still carries.
 */

:root {
  /* Laid-paper grain. The token exists in tokens.css and was set to `none` when
   * the gallery retheme landed; this is what it was designed to hold. Two octaves
   * of fractal noise, heavily desaturated - visible as tooth, never as pattern. */
  --paper-texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.038'/%3E%3C/svg%3E");

  --lift-sheet: 0 1px 2px rgba(28, 26, 23, .04), 0 12px 34px -14px rgba(28, 26, 23, .16);
  --lift-plate: 0 2px 4px rgba(28, 26, 23, .06), 0 22px 48px -22px rgba(28, 26, 23, .3);
}

body {
  background-color: var(--color-paper-2);       /* the surface the sheet lies on */
  background-image: var(--paper-texture);
}

/* The frame is the sheet. Give it its own stock and a shadow so it sits above. */
.frame {
  background: var(--color-paper) var(--paper-texture);
  box-shadow: var(--lift-sheet);
}

/* Letterpress: the type is struck INTO the paper, so the light catches the top
 * edge of the impression. One highlight, no dark shadow - a dark drop shadow
 * reads as embossed-upward and looks like a 2009 web template. */
h1, h2, .mark, .price, .bundle-price strong {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* Plates and product renders are objects resting on the sheet. */
.plate img, .hero figure img, figure.scan img,
img[src*="plates/"], img[src*="scans/"] {
  box-shadow: var(--lift-plate);
  background: var(--color-paper-3);
}

/* Cards lift very slightly, and further on hover - the only motion in this file. */
.card {
  background: var(--color-paper-3) var(--paper-texture);
  box-shadow: var(--lift-sheet);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(28, 26, 23, .05), 0 20px 44px -18px rgba(28, 26, 23, .26);
}

.orderbox, .bundle, .guarantee, .cta, blockquote {
  background-color: var(--color-paper-3);
  background-image: var(--paper-texture);
}

/* A rule should look like an impression in the sheet, not a 1px line. */
.band { border-top-color: color-mix(in srgb, var(--color-rule) 78%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Print: strip the staging. The document is the thing being printed, not a page. */
@media print {
  body { background: #fff; }
  .frame { box-shadow: none; background: #fff; }
  .plate img, .hero figure img, figure.scan img,
  img[src*="plates/"], img[src*="scans/"] { box-shadow: none; }
  h1, h2, .mark, .price { text-shadow: none; }
}

/* Comparison table - lived only in the product pages' inline styles; hoisted here
 * so any page can use it (the index counter-positioning table needs it). */
table.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.compare th, table.compare td {
  border-bottom: var(--rule-hairline); padding: 10px 8px; text-align: left; vertical-align: top; }
table.compare thead th {
  font-family: var(--font-caps); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-deep); border-bottom: 2px solid var(--color-accent); }
table.compare tbody th { font-weight: 400; font-family: var(--font-body); }
table.compare td.own {
  background: var(--color-paper-3); color: var(--color-ink); }
table.compare td.other { color: var(--color-ink-dim); font-style: italic; }
@media (max-width: 860px) { table.compare { display: block; overflow-x: auto; } }

/* The product pages uppercase td.own because those cells hold one word ("yes").
 * The counter-positioning table holds sentences, where all-caps is unreadable. */
table.compare.verdict td.own { text-transform: none; letter-spacing: normal;
  font-family: var(--font-body); }