/* ============================================================================
   CLIFF538 POLAROID SHORTCODE  —  static/css/polaroid.css
   ----------------------------------------------------------------------------
   Was section 23 of custom.css until 2026-08-10, when it was moved out to a
   theme file: at 33,335 bytes it was 52% of Custom CSS and had taken that field
   to within 687 bytes of its limit.

   Loaded from layouts/partials/microhook-head.html alongside
   static/css/polaroid-archive.css. Companion shortcode:
   layouts/shortcodes/polaroid.html.

   Content below is byte-for-byte what was in custom.css — no rules changed.
   ============================================================================ */

/* ============================================================================
   23 · CLIFF538 POLAROID SHORTCODE — VERSION 2.0
   ----------------------------------------------------------------------------
   Changes from 1.1:
     1. Geometry pinned to exact SX-70 / 600 spec (88 x 107 mm outer,
        4.5 mm border, 79 x 79 mm image, 23.5 mm chin). Yours was already
        within half a millimetre — this just removes the rounding and, more
        usefully, centres the caption in the chin instead of letting a
        min-height push it high.
     2. Real paper grain via an inline SVG feTurbulence noise tile instead of
        repeating-linear-gradient hatching. Gradient hatching reads as stripes
        at 2x; turbulence reads as fibre.
     3. No film simulation on the photo. Earlier versions faked instant film
        over the top of it; every photo that goes in here is already a scan of
        real instant film, so the treatment only ever double-applied.
     4. Handwriting: real self-hosted webfont + an SVG displacement filter that
        roughens glyph edges so type stops looking like type.
     5. Silver marker on the black backing is drawn as a clipped metallic
        gradient, not flat off-white.
     6. Optional scan hooks: set --polaroid-front-scan / --polaroid-back-scan
        and the CSS-generated paper steps aside for your own scans.
        Recommended: CSS front, scanned back.
     7. Contact shadow instead of a triple drop shadow, plus a per-post tilt
        driven by --polaroid-tilt from the shortcode.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONTS
   Live on cliff538.com — both verified 200 with valid wOF2 headers.
   Self-hosting beats a Google Fonts @import here: @import must be the first
   rule in custom.css, and yours is a long file.
   Caveat carries the written metadata, Permanent Marker the front title.
   Both are SIL Open Font License.

   For 365pixels.xyz: upload the same two files to that blog and change the
   year folder in the two paths below to match the URLs it returns. Uploads
   are per-site, so /uploads/2026/... on cliff538.com will not resolve there.
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: "CliffHand";
  src: url("/uploads/2026/caveat-600.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CliffMarker";
  src: url("/uploads/2026/permanent-marker.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   ROOT
   ============================================================================ */
.cliff-polaroid {
  /* Paper. Measured off Cliff's 5054x6179 scan of a real frame front:
     clean paper regions average #e3e5eb, the chin sits at #dee1e9, and the
     brightest border reads #edeff4 (scanner hot spot). The important finding
     is the CAST — b minus r is consistently +6 to +10, so the stock is a cool
     blue-white from optical brighteners, not the warm cream this file used to
     assume. Warm the set toward #efe7d8 only if you want 1970s SX-70 pack
     film, which really was cream. */
  --polaroid-paper: #e6e8ee;
  --polaroid-paper-light: #f1f2f6;
  --polaroid-paper-dark: #dcdee6;
  --polaroid-edge: rgba(60, 48, 36, 0.13);
  --polaroid-shade: 0.04;           /* corner shading on the front. Drop toward
                                       0.01 when the back is a flat scan, or the
                                       front's shaded corner reads as dimmer. */

  --polaroid-ink: #17120d;          /* black Sharpie */
  --polaroid-silver: #e8e5dc;       /* silver marker */
  --polaroid-imprint-size: 1;       /* scales the printed imprint */
  --polaroid-imprint-ink: #645759;  /* printed batch number. Measured off the
                                       real back scan. Darken toward #4e4344 if
                                       it reads too faint on your screen. */
  --polaroid-muted: #6c635a;

  /* Geometry, in mm, from a real SX-70 / 600 print. Do not round these. */
  --polaroid-w: 88;
  --polaroid-h: 107;
  --polaroid-border: 4.5;
  --polaroid-image: 79;

  --polaroid-panel-split: 79.7%;    /* Measured: the black chemistry panel
                                       ends at 79.69% of the card height. This
                                       is now a straight percentage of the
                                       card, not of a padded grid area. */

  /* Where the writing sits on the back. Both are top offsets, so raising them
     drops the text. --polaroid-details-top pushes the Camera/Film/Location/Date
     block down inside the black panel; --polaroid-note-top is a percentage of
     the lower strip's height. 24% lands the note in the clear band between the
     seam at 83.4% and the imprint at 89.6%, which is where you would actually
     write on a real print. */
  --polaroid-details-top: 16%;
  --polaroid-note-top: 24%;
  --polaroid-tilt: 0deg;            /* overridden per-post by the shortcode */
  --polaroid-flip: 720ms;

  /* ------------------------------------------------------------------
     THE WEAVE
     Polaroid frame stock is not noise, it is an embossed diamond lattice.
     Measured by FFT on the scan (57.4 px/mm), the paper contains:
        811 um lattice, FFT angles 29 / 150  (stripes at 60 and 120 deg)
        686 um lattice, FFT angles 59 / 118  (stripes at 30 and 150 deg)
       1372 um rib,     FFT angle  58
       amplitude sd 2.72% of the paper level
     Those four families are the five gradients below. Periods are in px for
     a 430 px card (4.886 px/mm); at other widths the physical scale drifts
     slightly, which is invisible at this size.
     The layer is painted on 50% grey and composited with `overlay`, which is
     the identity for mid-grey. Doing it that way keeps the weave MEAN-NEUTRAL:
     an earlier version drew dark ink straight onto the paper and pulled it
     33 levels darker, because a dark stop over near-white paper moves much
     further than a white stop does. Symmetric excursions around grey, blended
     with overlay, leave the paper colour exactly where you set it.
     --polaroid-weave-strength scales the whole thing; 0 turns it off.
     ------------------------------------------------------------------ */
  --polaroid-weave-strength: 0.35;
  --polaroid-weave:
    repeating-linear-gradient(61deg,
      rgba(0, 0, 0, 0.38) 0, rgba(255, 255, 255, 0.38) 0.460cqw, rgba(0, 0, 0, 0.38) 0.921cqw),
    repeating-linear-gradient(120deg,
      rgba(0, 0, 0, 0.36) 0, rgba(255, 255, 255, 0.36) 0.460cqw, rgba(0, 0, 0, 0.36) 0.921cqw),
    repeating-linear-gradient(31deg,
      rgba(0, 0, 0, 0.58) 0, rgba(255, 255, 255, 0.58) 0.391cqw, rgba(0, 0, 0, 0.58) 0.779cqw),
    repeating-linear-gradient(152deg,
      rgba(0, 0, 0, 0.56) 0, rgba(255, 255, 255, 0.56) 0.391cqw, rgba(0, 0, 0, 0.56) 0.779cqw),
    repeating-linear-gradient(32deg,
      rgba(0, 0, 0, 0.52) 0, rgba(255, 255, 255, 0.52) 0.779cqw, rgba(0, 0, 0, 0.52) 1.558cqw);

  /* Broadband irregularity on top of the lattice. Real paper is not perfectly
     periodic; without this the weave moires against the pixel grid. */
  --polaroid-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Coarser tile for the black chemistry panel, which has visible tooth. */
  --polaroid-grain-coarse:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

  /* NOTE ON UNITS. Every size inside the card is cqw (a percentage of the card)
     bounded by px — deliberately NOT rem. rem depends on the site's root
     font-size, and Micro.blog themes disagree about it: Tiny Theme on cliff538
     leaves the 16px default, Mnml on 365Pixels sets html{font-size:10px}. With
     rem bounds the clamp ceiling fell 37.5% on 365Pixels and capped the front
     title at 14.2px when the card was asking for 22.7px — the card looked right
     but all its writing was shrunk. px bounds make the print self-contained: its
     proportions depend only on its own width, on any theme. */
  position: relative;
  width: min(100%, 430px);
  margin: 3rem auto;
  perspective: 1600px;

  /* Everything inside is sized in cqw — percentages of the CARD, not the
     viewport. That is the difference between a print that looks the same
     shape at every screen width and one whose handwriting grows relative to
     the frame as the frame shrinks. The old vw-based clamps made the note
     wrap to four lines on a phone and spill off the bottom of the card. */
  container-type: inline-size;
}

/* ============================================================================
   ACCESSIBLE FLIP CONTROL
   ============================================================================ */
.cliff-polaroid__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cliff-polaroid__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--polaroid-w) / var(--polaroid-h);
  margin: 0;
  color: var(--polaroid-ink);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--polaroid-tilt));
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}

.cliff-polaroid__card:hover {
  transform: rotate(var(--polaroid-tilt)) translateY(-3px) scale(1.008);
}

.cliff-polaroid__toggle:focus-visible + .cliff-polaroid__card {
  outline: 2px solid var(--accent1, #c08457);
  outline-offset: 10px;
  border-radius: 3px;
}

/* ============================================================================
   FLIP MECHANISM
   ============================================================================ */
.cliff-polaroid__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--polaroid-flip) cubic-bezier(.2, .72, .22, 1);
}

.cliff-polaroid__toggle:checked + .cliff-polaroid__card .cliff-polaroid__inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* ============================================================================
   SHARED FACE
   ----------------------------------------------------------------------------
   Real prints have a hard cut edge, not a hairline border. A 1px inset ring
   plus a very small radius sells the die-cut far better than `border`.
   ============================================================================ */
.cliff-polaroid__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--polaroid-ink);
  background-color: var(--polaroid-paper);
  border-radius: 2.5px;
  box-shadow:
    inset 0 0 0 1px var(--polaroid-edge),
    inset 0 0 24px rgba(90, 72, 52, 0.03),
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 6px 12px rgba(0, 0, 0, 0.24),
    0 22px 38px rgba(0, 0, 0, 0.20);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Broadband irregularity. Also mid-grey + overlay, for the same reason. */
.cliff-polaroid__face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: #808080;
  background-image: var(--polaroid-grain);
  background-size: 25.6cqw 25.6cqw;
  opacity: 0.60;
  mix-blend-mode: overlay;
}

/* The embossed lattice. */
.cliff-polaroid__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: #808080;
  background-image: var(--polaroid-weave);
  opacity: var(--polaroid-weave-strength);
  mix-blend-mode: overlay;
}

/* ============================================================================
   FRONT
   ============================================================================ */
.cliff-polaroid__front {
  z-index: 2;
  padding:
    calc(var(--polaroid-border) / var(--polaroid-w) * 100%)
    calc(var(--polaroid-border) / var(--polaroid-w) * 100%)
    0;
  background:
    radial-gradient(ellipse at 16% 8%, rgba(255, 255, 255, 0.55), transparent 34%),
    radial-gradient(ellipse at 88% 96%, rgba(120, 96, 68, var(--polaroid-shade)), transparent 42%),
    linear-gradient(157deg,
      var(--polaroid-paper-light) 0%,
      var(--polaroid-paper) 55%,
      var(--polaroid-paper-dark) 100%);
  transform: rotateY(0deg) translateZ(0.6px);
  -webkit-transform: rotateY(0deg) translateZ(0.6px);
}

/* Optional scan of a real frame front. Set --polaroid-front-scan on the
   .cliff-polaroid element and this takes over from the gradients. */
.cliff-polaroid--scan-front .cliff-polaroid__front {
  background:
    var(--polaroid-front-scan) center / 100% 100% no-repeat,
    var(--polaroid-paper);
}
/* A scan carries its own paper texture — don't multiply ours on top of it.
   Scoped to the scanned face only; scanning one side must not strip the grain
   off the other. */
.cliff-polaroid--scan-front .cliff-polaroid__front::before,
.cliff-polaroid--scan-front .cliff-polaroid__front::after { opacity: 0; }

/* ----------------------------------------------------------------------------
   PHOTO AREA — 79 x 79 mm
   ---------------------------------------------------------------------------- */
.cliff-polaroid__photo-area {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #141110;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    inset 0 0 14px rgba(0, 0, 0, 0.18);
}

/* No film simulation here. Cliff only posts scans of real instant film, which
   already carry the lifted blacks, uneven development and colour shift — adding
   ours on top applied the look twice. The photo goes in as shot.
   If a digital photo ever needs faking, the removed layer is in the vault note
   `Polaroid Flip - CSS Section 23 - BACKUP 2026-08-08 (v1.1).md` and in git. */

/* ----------------------------------------------------------------------------
   THE CHIN — 23.5 mm. Everything left over after the 79 mm image.
   ---------------------------------------------------------------------------- */
.cliff-polaroid__front-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: 4% 6% 3%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6px;
  text-align: center;
}

/* ============================================================================
   HANDWRITING
   ----------------------------------------------------------------------------
   Two things separate "font" from "handwriting":
     - irregular glyph edges  -> the SVG displacement filter below
     - irregular baseline     -> per-line rotate/offset, applied in the rows
   Never synthesise bold on a marker face; it fills in the counters and the
   whole thing turns to mud. Use the real weight.
   ============================================================================ */
.cliff-polaroid__front-title {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: "CliffMarker", "Permanent Marker", "Marker Felt", "Segoe Print", cursive;
  font-size: 23px;
  font-size: clamp(10px, 5.28cqw, 23px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.004em;
  color: var(--polaroid-ink);
  /* Sharpie on Polaroid paper feathers into the fibre. */
  text-shadow:
    0 0 0.4px rgba(23, 18, 13, 0.85),
    0 0 1.6px rgba(23, 18, 13, 0.18);
  transform: rotate(-0.7deg);
}

.cliff-polaroid__front-date {
  display: block;
  font-family: "CliffHand", "Caveat", "Noteworthy", "Bradley Hand", cursive;
  font-size: 16px;
  font-size: clamp(7px, 3.72cqw, 16px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--polaroid-muted);
  transform: rotate(0.5deg) translateX(2%);
}

/* Roughened ink. Add .cliff-polaroid--ink to the root to switch on.
   Kept opt-in because `filter` inside a preserve-3d chain is the one thing
   Safari still gets twitchy about — test on your own machine before shipping. */
.cliff-polaroid--ink .cliff-polaroid__front-title,
.cliff-polaroid--ink .cliff-polaroid__note,
.cliff-polaroid--ink .cliff-polaroid__value,
.cliff-polaroid--ink .cliff-polaroid__label {
  filter: var(--polaroid-ink-filter, none);
}

/* ============================================================================
   BACK — rebuilt from measurements of Cliff's 5119x6190 scan
   ----------------------------------------------------------------------------
   Everything below is measured, not invented:
     black panel   x 3.20% .. 96.25%,  y 5.11% .. 79.69% of the card
     seam ridge    y 83.39%,  bottom lip y 98.16%
     pod ridges    x 29.1% -> 34.1% and 67.1% -> 63.4% top-to-bottom of the
                   strip, i.e. a trapezoid that narrows downward, ~11 deg off
                   vertical
     printed text  x 64.4% .. 97.1%,  y 89.6% .. 94.5%, ink #645759,
                   three lines: "Polaroid Film B.V", an 11-digit batch number,
                   and a nearly illegible third line
     paper         #e2e1e1 just under the panel, #dbd9da mid strip,
                   #cfcdc8 above the panel — near neutral, very slightly warm
     texture       mottle, not weave: sd 1.8% at display size with almost no
                   directionality, so the front's lattice is switched off here
   Positions are absolute percentages of the card rather than a grid, because
   the real panel is not centred in its border: 3.20% left, 3.75% right.
   ============================================================================ */
.cliff-polaroid__back {
  z-index: 1;
  display: block;
  padding: 0;
  background:
    /* handling: a crease and two specks */
    linear-gradient(104deg,
      transparent 0 18%, rgba(74, 51, 32, 0.04) 18.2%,
      transparent 18.7% 70%, rgba(255, 255, 255, 0.05) 70.2%, transparent 70.7%),
    radial-gradient(circle at 6% 93%, rgba(65, 43, 27, 0.13) 0, transparent 1.5%),
    radial-gradient(circle at 93% 8%, rgba(65, 43, 27, 0.09) 0, transparent 1.1%),
    /* sheen */
    radial-gradient(ellipse at 18% 88%, rgba(255, 255, 255, 0.5), transparent 34%),
    radial-gradient(ellipse at 86% 96%, rgba(120, 112, 100, 0.10), transparent 38%),
    /* body: brighter just under the panel, cooler grey up top */
    linear-gradient(178deg,
      var(--polaroid-back-top, #cfcdc8) 0%,
      var(--polaroid-back-top, #cfcdc8) 4%,
      #ecebeb 21%,
      #e7e5e4 60%,
      #dfddda 88%,
      #d3d1cd 100%);
  transform: rotateY(180deg) translateZ(0.6px);
  -webkit-transform: rotateY(180deg) translateZ(0.6px);
}

/* The back is a coated surface, not the embossed frame stock — no lattice. */
.cliff-polaroid__back::after { opacity: 0; }
.cliff-polaroid__back::before { opacity: 0.42; }

.cliff-polaroid--scan-back .cliff-polaroid__back {
  background: var(--polaroid-back-scan) center / 100% 100% no-repeat, #e6dfd2;
}
.cliff-polaroid--scan-back .cliff-polaroid__back::before { opacity: 0; }
/* With a scan in place, hide the drawn furniture and keep only the writing. */
.cliff-polaroid--scan-back .cliff-polaroid__black-panel {
  background: none;
  border: 0;
  box-shadow: none;
}
.cliff-polaroid--scan-back .cliff-polaroid__black-panel::after,
.cliff-polaroid--scan-back .cliff-polaroid__imprint { display: none; }
.cliff-polaroid--scan-back .cliff-polaroid__back-footer {
  background: none;
  box-shadow: none;
}

/* ============================================================================
   BLACK CHEMISTRY PANEL — absolutely placed to the measured rectangle
   ============================================================================ */
.cliff-polaroid__black-panel {
  position: absolute;
  left: 3.2%;
  right: 3.75%;
  top: 5.11%;
  bottom: calc(100% - var(--polaroid-panel-split));
  z-index: 2;
  display: block;
  overflow: hidden;
  padding: var(--polaroid-details-top) 8.5% 7%;
  box-sizing: border-box;
  border-radius: 1px;
  /* The real panel scans as 0,0,0 almost everywhere, lifting only toward the
     bottom-right corner (to about luminance 15). */
  background:
    radial-gradient(ellipse at 88% 97%, rgba(150, 148, 150, 0.13), transparent 44%),
    radial-gradient(ellipse at 74% 82%, rgba(120, 120, 126, 0.05), transparent 38%),
    linear-gradient(168deg, #050506 0%, #000 34%, #000 72%, #060608 100%);
  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Very quiet tooth so the panel is not a flat void. */
.cliff-polaroid__black-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  background-color: #808080;
  background-image: var(--polaroid-grain-coarse);
  background-size: 46.5cqw 46.5cqw;
  mix-blend-mode: overlay;
}

/* ============================================================================
   LOWER STRIP — the pod pouch
   ----------------------------------------------------------------------------
   One seam across the top, two ridges slanting inward, one lip along the
   bottom. Each ridge is a narrow stop in an angled linear-gradient, which
   paints a straight band across the box at that angle; the percentage sets
   where the band falls.
   ============================================================================ */
.cliff-polaroid__back-footer {
  container-type: inline-size;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--polaroid-panel-split);
  bottom: 0;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  padding: 0;
  background:
    /* Left pod ridge, 29.1% at the top -> 34.1% at the bottom. On the real
       print these are soft inflated folds, not drawn lines, so the profile is
       a wide shadow / highlight / shadow ramp rather than a hard stop. */
    linear-gradient(70.1deg,
      rgba(116, 112, 108, 0.055) 0 26%,
      rgba(116, 112, 108, 0.03) 29.6%,
      rgba(126, 122, 118, 0.05) 30.9%,
      rgba(255, 255, 255, 0.62) 32.2%,
      rgba(255, 255, 255, 0.66) 32.8%,
      rgba(118, 114, 110, 0.17) 34.2%,
      rgba(118, 114, 110, 0.07) 35.4%,
      transparent 36.6% 100%),
    /* Right pod ridge, 67.1% -> 63.4%, leaning the other way. */
    linear-gradient(105.1deg,
      transparent 0 61.2%,
      rgba(126, 122, 118, 0.05) 62.4%,
      rgba(255, 255, 255, 0.62) 63.8%,
      rgba(255, 255, 255, 0.66) 64.4%,
      rgba(118, 114, 110, 0.17) 65.8%,
      rgba(118, 114, 110, 0.07) 67.0%,
      rgba(116, 112, 108, 0.03) 69.5%,
      rgba(116, 112, 108, 0.055) 73% 100%),
    /* seam across the top of the strip, at 83.39% of the card */
    linear-gradient(180deg,
      transparent 0 12.4%,
      rgba(112, 108, 104, 0.14) 14.2%,
      rgba(112, 108, 104, 0.24) 15.3%,
      rgba(255, 255, 255, 0.62) 16.4%,
      rgba(255, 255, 255, 0.24) 18.0%,
      transparent 20.0%),
    /* the flap above the seam sits proud and catches the light */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.42) 0 13.5%,
      rgba(255, 255, 255, 0.12) 15.5%,
      transparent 18%),
    /* bottom lip at 98.16% */
    linear-gradient(180deg,
      transparent 0 86.6%,
      rgba(255, 255, 255, 0.5) 87.5%,
      rgba(120, 116, 112, 0.14) 88.7%,
      transparent 89.7%);
}

/* ============================================================================
   THE IMPRINT — "Polaroid Film B.V" + batch number, bottom right
   ----------------------------------------------------------------------------
   Measured box: x 64.4%..97.1%, y 89.6%..94.5% of the card, ink #645759.
   Careful per-line measurement (masking out the pod ridge, which an earlier
   pass mistook for ink and which sent me off chasing a much wider, heavily
   tracked face):
       "Polaroid Film B.V"  x 72.61%..90.86%,  y 89.56%..91.39%
       "48117042688"        x 72.59%..88.16%,  y 91.73%..93.62%
   Both LEFT aligned at 72.6%, ~11 px at a 430 px card, essentially no
   tracking, line-height ~1.05. Sized in cqw so it tracks the card at any
   width instead of guessing against the viewport.
   ============================================================================ */
.cliff-polaroid__imprint {
  position: absolute;
  left: 72.6%;
  top: 48.6%;
  z-index: 4;
  display: block;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", Arial, sans-serif;
  /* 600 rather than 500, and a shade larger than the print measures. At the
     ~9 px this renders at on a phone, only 15% of the glyph pixels were
     reaching full ink density — the other 85% was antialiasing, which is what
     made it read washed out however dark the colour was set. Weight 600 plus
     the size bump takes solid pixels from 15% to 26% and the block 10% darker.
     A deliberate ~8% deviation from the measured print, traded for legibility
     at phone size; --polaroid-imprint-size winds it back if you prefer. */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.002em;
  /* Full opacity: at 0.88 this composited to #74686b, 17 levels lighter than
     the #645759 measured on the real print, and 4.36:1 against the paper —
     under the 4.5:1 floor for small text. At alpha 1 it is both accurate and
     legible (5.62:1). Small type looks denser than it is on a 1x or 2x screen
     because of antialiasing; at 3x you see the true colour, which is why this
     read as faded on a phone but fine on a desktop. */
  color: var(--polaroid-imprint-ink);
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.28);
  transform: rotate(-0.25deg);
}

/* Hardening. The serial has never had a colour of its own in any version of
   this file — it inherits from .cliff-polaroid__imprint — yet on Cliff's iPhone
   it renders cream while the brand line above it renders correctly. Both engines
   here paint it right, so something on the page is leaking in. These four
   properties are the complete set that can turn dark text into "shows whatever
   is behind it": an inherited -webkit-text-fill-color, or an inherited
   background-clip: text with a light background. Both are set on
   .cliff-polaroid__value for the silver marker. Pinning them here costs nothing
   and closes off the mechanism. */
.cliff-polaroid__imprint-brand,
.cliff-polaroid__imprint-serial {
  color: var(--polaroid-imprint-ink);
  -webkit-text-fill-color: var(--polaroid-imprint-ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.cliff-polaroid__imprint-brand {
  display: block;
  font-size: 11px;
  font-size: clamp(7px, calc(2.70cqw * var(--polaroid-imprint-size)), 15px);
}

.cliff-polaroid__imprint-serial {
  display: block;
  font-size: 11px;
  font-size: clamp(8px, calc(2.80cqw * var(--polaroid-imprint-size)), 16px);
  letter-spacing: 0.004em;
}

/* The third line on a real print is past legibility — suggest it, don't set it. */
.cliff-polaroid__imprint-fine {
  display: block;
  width: 12.2cqw;
  height: 0.4cqw;
  margin-top: 0.5cqw;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--polaroid-imprint-ink) 40%, transparent) 0 2px, transparent 2px 3px,
    color-mix(in srgb, var(--polaroid-imprint-ink) 40%, transparent) 3px 4px, transparent 4px 6px);
  opacity: 0.5;
}

/* ============================================================================
   SILVER MARKER METADATA
   ----------------------------------------------------------------------------
   A silver paint marker is semi-opaque and catches light unevenly — flat
   off-white is the giveaway in v1.1. Clip a metallic gradient into the glyphs.
   ============================================================================ */
.cliff-polaroid__details {
  position: relative;
  z-index: 3;
  display: block;
  font-family: "CliffHand", "Caveat", "Noteworthy", "Bradley Hand", cursive;
}

.cliff-polaroid__row {
  display: block;
  margin: 0 0 5.4%;
  line-height: 1.02;
}

.cliff-polaroid__label {
  display: block;
  margin: 0 0 1.9px;
  font-family: inherit;
  font-size: 16px;
  font-size: clamp(7px, 3.72cqw, 16px);
  font-weight: 500;
  line-height: 1.02;
  color: rgba(214, 210, 199, 0.78);
}

.cliff-polaroid__value {
  display: block;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: 20px;
  font-size: clamp(9px, 4.54cqw, 20px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.006em;
  background-image: linear-gradient(102deg,
    #b9b3a7 0%,
    #f7f5ee 26%,
    #cbc5b9 47%,
    #fbf9f3 68%,
    #b3ada1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.35));
}

/* Per-line baseline drift. Nobody writes on rails. */
.cliff-polaroid__row:nth-child(1) { margin-left: 1%; transform: rotate(-0.9deg); }
.cliff-polaroid__row:nth-child(2) { margin-left: 5%; transform: rotate(0.6deg); }
.cliff-polaroid__row:nth-child(3) { margin-left: 2%; transform: rotate(-0.35deg); }
.cliff-polaroid__row:nth-child(4) { margin-left: 7%; transform: rotate(0.65deg); }

.cliff-polaroid__row:nth-child(1) .cliff-polaroid__value { margin-left: 12%; transform: rotate(0.2deg); }
.cliff-polaroid__row:nth-child(2) .cliff-polaroid__value { margin-left: 14%; transform: rotate(-0.3deg); }
.cliff-polaroid__row:nth-child(3) .cliff-polaroid__value { margin-left: 10%; transform: rotate(0.3deg); }
.cliff-polaroid__row:nth-child(4) .cliff-polaroid__value { margin-left: 13%; transform: rotate(-0.22deg); }

/* ============================================================================
   THE HANDWRITTEN NOTE — black Sharpie on the pod pouch
   ----------------------------------------------------------------------------
   On a real print you write in the clear area left of the imprint, so the note
   is placed against the left of the strip and stops short of the batch number.
   ============================================================================ */
.cliff-polaroid__note {
  position: absolute;
  left: 4%;
  right: 4%;
  top: var(--polaroid-note-top);
  z-index: 4;
  display: block;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  font-family: "CliffHand", "Caveat", "Noteworthy", "Bradley Hand", cursive;
  font-size: 21px;
  font-size: clamp(10px, 4.99cqw, 21px);
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
  color: rgba(23, 18, 13, 0.9);
  text-shadow:
    0 0 0.35px rgba(23, 18, 13, 0.7),
    0 0 1.4px rgba(23, 18, 13, 0.16);
  transform: rotate(-0.9deg);
}

/* ============================================================================
   DEFENSIVE LIGHTBOX OVERRIDES (Tiny Theme)
   ============================================================================ */
.cliff-polaroid a,
.cliff-polaroid__photo-link {
  pointer-events: none !important;
  text-decoration: none !important;
  background: transparent !important;
}
.cliff-polaroid__image { display: none !important; }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .cliff-polaroid__inner,
  .cliff-polaroid__card { transition: none; }
  .cliff-polaroid__card:hover { transform: rotate(var(--polaroid-tilt)); }
}

/* ============================================================================
   SMALL SCREENS
   ============================================================================ */
@media (max-width: 420px) {
  .cliff-polaroid { margin: 2rem auto; }
  .cliff-polaroid__black-panel { padding-left: 7.5%; padding-right: 7.5%; padding-bottom: 6%; }
  .cliff-polaroid__row { margin-bottom: 4.6%; }
  .cliff-polaroid__note { left: 3.5%; right: 3.5%; }
}

/* ============================================================================
   DARK MODE
   Instant film sitting on a dark page needs a slightly cooler paper or it
   glows orange. Tiny Theme flips on prefers-color-scheme.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  .cliff-polaroid {
    --polaroid-paper: #eaecf1;
    --polaroid-paper-light: #f5f6f9;
    --polaroid-paper-dark: #e0e2ea;
  }
  .cliff-polaroid__face {
    box-shadow:
      inset 0 0 0 1px var(--polaroid-edge),
      inset 0 0 24px rgba(90, 72, 52, 0.03),
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 8px 18px rgba(0, 0, 0, 0.55),
      0 26px 48px rgba(0, 0, 0, 0.4);
  }
}