/* ══════════════════════════════════════════════════════════════
   paper.css — Grandma's recipe card and her note.
   The emotional centre of the piece. Aged paper is built from a
   warm base, foxing blotches, and a fibre speckle; the writing is
   a cursive system font stack tinted the blue-black of old ink.
   ══════════════════════════════════════════════════════════════ */

/* Shared: a cursive that exists on Windows, macOS and Linux. No
   webfont, so this has to degrade through several real options
   before hitting the generic. */
.card,
.note {
  /* Ordered most-legible-first. Segoe Print and Comic Sans are
     plain hands that stay readable at small sizes; the loopy
     script faces (Brush Script, Apple Chancery) come last because
     they turn to mush below ~14px. Legibility beats period charm
     here — the text is the point of these two objects. */
  font-family:
    "Segoe Print", "Bradley Hand", "Chalkboard", "Comic Sans MS",
    "Segoe Script", "Lucida Handwriting", cursive;
  /* Never let the browser synthesise a bolder weight — it closes
     up the counters and makes cursive unreadable. */
  font-synthesis: none;
}

/* Shared aged-paper surface, used by both card and note. */
.card__paper,
.note__paper {
  position: absolute;
  inset: 0;
  background:
    /* foxing — the brown age-spots on old paper */
    radial-gradient(
      22% 30% at 82% 18%,
      rgba(150, 106, 56, 0.16),
      transparent 70%
    ),
    radial-gradient(
      18% 24% at 12% 74%,
      rgba(150, 106, 56, 0.13),
      transparent 72%
    ),
    radial-gradient(
      14% 18% at 62% 88%,
      rgba(150, 106, 56, 0.1),
      transparent 74%
    ),
    /* fibre speckle */
    radial-gradient(
        0.6px 0.6px at 24% 32%,
        rgba(120, 88, 48, 0.22),
        transparent
      ),
    radial-gradient(
      0.6px 0.6px at 68% 56%,
      rgba(120, 88, 48, 0.18),
      transparent
    ),
    radial-gradient(
      0.6px 0.6px at 44% 78%,
      rgba(120, 88, 48, 0.2),
      transparent
    ),
    /* the sheet itself, warmer toward the shaded edge */
    linear-gradient(152deg, #f6ecd2 0%, #efe0c0 46%, #e2cfa8 78%, #cfb98d 100%);
  background-size:
    auto,
    auto,
    auto,
    9px 9px,
    13px 13px,
    17px 17px,
    auto;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -2px 5px rgba(140, 108, 62, 0.22);
}

/* ══ RECIPE CARD ════════════════════════════════════════════════ */

.card {
  position: absolute;
  left: 30%;
  top: 1%;
  width: 16.5%;
  aspect-ratio: 0.78;
  rotate: -6deg;
  /* Above the pie: in the reference the card is fully readable,
     never tucked under the dish. */
  z-index: 21;
  /* Much less defocus than other background objects: these two
     carry the artwork's only readable text, so legibility wins
     over strict depth-of-field consistency. */
  filter: blur(calc((1 - var(--px)) * 0.5px));
}

.card__shadow {
  position: absolute;
  inset: -5% -6% -8% -4%;
  border-radius: 3px;
  background: radial-gradient(
    ellipse at 44% 46%,
    hsl(var(--shadow-hue) / 0.5),
    transparent 72%
  );
  filter: blur(9px);
  transform: rotate(var(--sun-angle)) translateY(5%) scaleX(1.08)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
}

.card__paper {
  border-radius: 2px 3px 2px 4px;
  padding: 7% 8% 6%;
  overflow: hidden;
  /* Card stock is thicker than notepaper — a harder edge shadow. */
  box-shadow:
    0 2px 5px hsl(var(--shadow-hue) / 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.75),
    inset 0 -2px 6px rgba(140, 108, 62, 0.25);
}

/* Ruled lines belong to the CARD, not the ingredient list — an
   index card is ruled edge to edge, top to bottom. Putting them on
   the <ul> made them start and stop with the text and mis-align
   with its baseline. Drawn here, behind everything, and faded at
   both ends so they don't collide with the title or signature. */
.card__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 calc(var(--rule, 1.28em) - 1px),
    rgba(122, 134, 168, 0.26) calc(var(--rule, 1.28em) - 1px) var(--rule, 1.28em)
  );
  /* Line pitch must equal the list's font-size × line-height, or
     the rules drift out of register with the writing. */
  --rule: calc(var(--frame-w) * 0.0094 * 1.6);
  -webkit-mask: linear-gradient(
    180deg,
    transparent 16%,
    #000 24%,
    #000 82%,
    transparent 92%
  );
  mask: linear-gradient(
    180deg,
    transparent 16%,
    #000 24%,
    #000 82%,
    transparent 92%
  );
  pointer-events: none;
}
/* A red margin rule down the left, as ruled cards have. */
.card__paper::after {
  content: "";
  position: absolute;
  left: 13%;
  top: 18%;
  bottom: 10%;
  width: 1px;
  background: rgba(168, 82, 78, 0.22);
  pointer-events: none;
}

/* A ring where a cup once sat on the card.
   Kept fully inside the card and made uneven: a real coffee ring
   is darkest where the cup sat longest, and it fades out rather
   than closing as a clean circle. The old version sat half off
   the right edge, which read as a tear rather than a stain. */
.card__stain {
  position: absolute;
  right: 6%;
  bottom: 15%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* the ring itself */
    radial-gradient(
      circle,
      transparent 60%,
      rgba(132, 86, 40, 0.2) 68%,
      rgba(118, 74, 32, 0.26) 75%,
      rgba(132, 86, 40, 0.12) 80%,
      transparent 86%
    ),
    /* faint tide-mark inside it */
    radial-gradient(circle, rgba(140, 98, 52, 0.07) 0 58%, transparent 64%);
  /* Thin the ring unevenly so it isn't a perfect annulus. */
  -webkit-mask: conic-gradient(
    from 40deg,
    #000 0deg 70deg,
    rgba(0, 0, 0, 0.45) 90deg 140deg,
    #000 170deg 300deg,
    rgba(0, 0, 0, 0.6) 330deg 360deg
  );
  mask: conic-gradient(
    from 40deg,
    #000 0deg 70deg,
    rgba(0, 0, 0, 0.45) 90deg 140deg,
    #000 170deg 300deg,
    rgba(0, 0, 0, 0.6) 330deg 360deg
  );
  mix-blend-mode: multiply;
  filter: blur(0.7px);
  /* Above the ruled lines, below the writing — the cup was set
     down on a card that was already written on. */
  z-index: 2;
}

.card__title {
  position: relative;
  z-index: 1;
  margin: 0 0 5%;
  font-size: calc(var(--frame-w) * 0.0138);
  line-height: 1.16;
  font-weight: 400;
  color: #34285a; /* violet-black fountain-pen ink */
  text-align: center;
}

.card__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--frame-w) * 0.0094);
  line-height: 1.6;
  /* Darker, bluer ink: the old violet-grey sat too close to the
     paper's own value to read cleanly at this size. */
  color: #2f2748;
  /* Rules now live on .card__paper::before, so the list carries no
     background of its own — it just sits on top of them. */
  position: relative;
  z-index: 1;
}
.card__lines li {
  /* Clear of the red margin rule at 13%. */
  padding-left: 7%;
}

.card__bake,
.card__sign {
  position: relative;
  z-index: 1;
  margin: 5% 0 0;
  font-size: calc(var(--frame-w) * 0.0091);
  color: #2f2748;
  text-align: center;
}
.card__sign {
  margin-top: 5%;
  font-size: calc(var(--frame-w) * 0.0102);
  color: #34285a;
}

.heart {
  color: #a8324a;
}

/* Lifted lower-left corner. */
.card__curl {
  position: absolute;
  left: -1%;
  bottom: -1%;
  width: 22%;
  aspect-ratio: 1.15;
  background: linear-gradient(
    48deg,
    #fbf3df 0%,
    #f0e2c4 44%,
    #dbc79f 78%,
    #bda67c 100%
  );
  clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
  border-radius: 0 0 0 3px;
  box-shadow: 2px -2px 6px hsl(var(--shadow-hue) / 0.3);
}

/* ══ GRANDMA'S NOTE ═════════════════════════════════════════════
   Smaller, looser, more hurried than the recipe card — this one
   was scribbled, not copied out. Slight per-line rotation sells
   that more than any font choice. */

.note {
  position: absolute;
  right: 4.5%;
  bottom: 6%;
  width: 13.6%;
  aspect-ratio: 1.24;
  rotate: 7deg;
  z-index: 13;
  /* Much less defocus than other background objects: these two
     carry the artwork's only readable text, so legibility wins
     over strict depth-of-field consistency. */
  filter: blur(calc((1 - var(--px)) * 0.5px));
}

.note__shadow {
  position: absolute;
  inset: -6% -7% -9% -5%;
  border-radius: 3px;
  background: radial-gradient(
    ellipse at 46% 48%,
    hsl(var(--shadow-hue) / 0.46),
    transparent 72%
  );
  filter: blur(8px);
  transform: rotate(var(--sun-angle)) translateY(6%)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
}

.note__paper {
  border-radius: 2px 4px 3px 2px;
  padding: 11% 9% 8%;
  /* A torn-off scrap: the bottom edge is ragged, not cut. */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 88% no-repeat,
    radial-gradient(2.2% 60% at 6% 100%, transparent 48%, #000 52%) bottom /
      100% 13% repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 88% no-repeat,
    radial-gradient(2.2% 60% at 6% 100%, transparent 48%, #000 52%) bottom /
      100% 13% repeat-x;
  box-shadow:
    0 2px 4px hsl(var(--shadow-hue) / 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

.note__line1,
.note__line2,
.note__line3 {
  margin: 0;
  color: #322656;
  line-height: 1.32;
}
.note__line1 {
  font-size: calc(var(--frame-w) * 0.0128);
  rotate: -1.6deg;
  margin-bottom: 9%;
}
.note__line2 {
  font-size: calc(var(--frame-w) * 0.0102);
  rotate: 0.8deg;
  margin-left: 5%;
}
.note__line3 {
  font-size: calc(var(--frame-w) * 0.0114);
  rotate: -0.7deg;
  margin-left: 10%;
}

.note__curl {
  position: absolute;
  right: -1%;
  top: -1%;
  width: 20%;
  aspect-ratio: 1.1;
  background: linear-gradient(
    212deg,
    #fbf4e1 0%,
    #f1e3c6 46%,
    #d9c59c 80%,
    #bca67b 100%
  );
  clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
  border-radius: 0 2px 0 0;
  box-shadow: -2px 2px 5px hsl(var(--shadow-hue) / 0.28);
}