/* ── Our story (story.html): sweetmaescookies.com/story, ours. Each section is one ChatGPT collage at its
   own aspect; lengths in cqw of the section so the words sit on the drawn labels at any width. ── */
.k-storypage { background: #e9c3b6; }
.k-sp { container-type: inline-size; }
.k-sp { background: url("../img/c/story-intro-2560.webp?h=9fca3fd6") center top / 100% auto no-repeat,
  url("../img/c/story-ground.webp?h=f53ea0f6") left top / 14.354% auto repeat, #e9b7a6; padding-bottom: 6%; }
@media (max-width: 1280px) { .k-sp { background-image: url("../img/c/story-intro-1280.webp?h=c2938d20"), url("../img/c/story-ground.webp?h=f53ea0f6"); } }
.k-sp > section { --u: calc(100cqw / 1672); position: relative; }
.k-sp-hero { height: calc(var(--u) * 1016); }
/* the scenes: Sweet Mae's story grid (their style.css .story__scene / __content / __img), in % of the page */
.k-scene { position: relative; display: flex; justify-content: space-between; padding: 0 7.5%; margin-top: 5%; }
.k-scene:first-child { margin-top: 0; }
/* the pallets wear his ChatGPT fabrics (tools/k_fabrics.py: each cut to repeat), at .55 of their drawn size */
.k-pal { width: 47.0588%; aspect-ratio: 40 / 33.1; display: grid; place-items: center;
  background: var(--fab) left top / calc(var(--u) * var(--fw) * .55) auto repeat, #e9c3b6;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(110, 60, 40, .16); }
.k-pal--1 { --fab: url("../img/c/fab-1-soft.webp?h=330b63a3"); --fw: 328; }
.k-pal--2 { --fab: url("../img/c/fab-2-soft.webp?h=3070c6c1"); --fw: 360; }
.k-pal--3 { --fab: url("../img/c/fab-5-soft.webp?h=d37c3cec"); --fw: 360; }
.k-pal--4 { --fab: url("../img/c/fab-3-soft.webp?h=c59e13f7"); --fw: 299; }
.k-pal--5 { --fab: url("../img/c/fab-4-soft.webp?h=45d13462"); --fw: 342; }
.k-pal--6 { --fab: url("../img/c/fab-1-soft.webp?h=330b63a3"); --fw: 328; }
.k-pal--7 { --fab: url("../img/c/fab-6-soft.webp?h=18b4729c"); --fw: 291; }
.k-pal--8 { --fab: url("../img/c/fab-5-soft.webp?h=d37c3cec"); --fw: 360; }
.k-pal--9 { --fab: url("../img/c/fab-2-soft.webp?h=3070c6c1"); --fw: 360; }
.k-pal--10 { --fab: url("../img/c/fab-3-soft.webp?h=c59e13f7"); --fw: 299; }
.k-sc-img, .k-sc-text { position: relative; margin: 0; width: 86.5%; aspect-ratio: 5 / 4; box-sizing: border-box; }
/* the stitched edge both cards wear (theirs: four dashed gradients 2 px, 2 rem period) */
.k-sc-img::before { inset: 0 !important; }
.k-sc-img::before, .k-sc-text::before { content: ""; position: absolute; inset: calc(var(--u) * 10); pointer-events: none; z-index: 1;
  --d: #a2603f; background: linear-gradient(90deg, var(--d) 50%, transparent 0) repeat-x left top / calc(var(--u) * 30) 2px,
    linear-gradient(90deg, var(--d) 50%, transparent 0) repeat-x left bottom / calc(var(--u) * 30) 2px,
    linear-gradient(0deg, var(--d) 50%, transparent 0) repeat-y left top / 2px calc(var(--u) * 30),
    linear-gradient(0deg, var(--d) 50%, transparent 0) repeat-y right top / 2px calc(var(--u) * 30); }
/* the picture lies inside its stitch, on the pallet (theirs: the art inset within the dashed line) */
.k-sc-img img { position: absolute; inset: calc(var(--u) * 26); width: calc(100% - var(--u) * 52); height: calc(100% - var(--u) * 52); object-fit: cover;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(90, 55, 35, .18); }
.k-sc-img.is-empty { background: url("../img/c/story-linen.webp?h=0207da0f") center / 50% auto; }
.k-sc-img.is-empty::before { --d: #c9a98f; }
.k-badge-sama { position: absolute; left: 0; top: 0; width: 20%; aspect-ratio: 1; translate: -50% -50%; rotate: -15deg; z-index: 2; border-radius: 50%;
  background: url("../img/c/sama-badge.webp?h=b79d7fc7") center / 100% no-repeat; box-shadow: 3px 3px 6px rgba(0, 0, 0, .15); }
.k-scene:nth-child(even) .k-badge-sama { left: 100%; rotate: 12deg; }
/* the ending (rows 3100..4734 of the home collage): the frame, then the home footer at its own rows */
.k-sp > .k-sp-tail { --u: calc(100cqw / 1672); margin-top: 5%; background: url("../img/c/story-end-2560.webp?h=be3c7f86") center top / 100% auto no-repeat; }
@media (max-width: 1280px) { .k-sp > .k-sp-tail { background-image: url("../img/c/story-end-1280.webp?h=b9363f69"); } }
.k-sp { padding-bottom: 0; }
.k-sp-cta { position: relative; height: calc(var(--u) * 600); }
.k-sp-cta-in { position: absolute; left: 50%; top: calc(var(--u) * 352); translate: -50% -50%; width: calc(var(--u) * 760);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 26); text-align: center; }
.k-sp-cta h2 { margin: 0; font: 400 calc(var(--u) * 46)/1.15 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em; text-transform: uppercase;
  color: #7a4a3a; text-shadow: 2px 2px 0 rgba(172, 132, 96, .22); }
.k-sp-tail .k-foot { --u: calc(100cqw / 1672); position: relative; background: none; }
.k-sc-text { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 9%;
  background: url("../img/c/story-linen.webp?h=0207da0f") center / 50% auto, #f6efe2; }
.k-sc-text h2 { margin: 0 0 calc(var(--u) * 20); font: 400 calc(var(--u) * 44)/1.12 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em;
  text-transform: uppercase; color: #7a4a3a; text-shadow: 2px 2px 0 rgba(172, 132, 96, .22); }
.k-sc-text p { margin: 0; font: 500 calc(var(--u) * 21)/1.55 "Zilla Slab", Georgia, serif; color: #5d5a53; }
.k-sp-label { position: absolute; left: 50%; top: calc(var(--u) * 250); translate: -50% -50%; width: calc(var(--u) * 820);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 22); }
.k-sp-label h1 { margin: 0; font: 400 clamp(26px, 3.2cqw, 58px)/1.1 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .05em;
  text-transform: uppercase; color: #4a5f6b; text-shadow: 2px 2px 0 rgba(172, 132, 96, .28); }
.k-sp-label p { margin: 0; max-width: 34em; font: 500 clamp(13px, 1.15cqw, 20px)/1.55 "Zilla Slab", Georgia, serif; color: #5d5a53; }
/* the names follow their ribbons' arcs (paths measured off the picture, in its own 1672 x 941 pixels) */
.k-sp-names { position: absolute; inset: 0 0 auto; width: 100%; height: calc(var(--u) * 941); pointer-events: none; overflow: visible; }
.k-sp-names text { font: 700 17px "Zilla Slab", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; fill: #8a5a44;
  text-anchor: middle; dominant-baseline: central; }
.k-sp-names text.is-sama { fill: #4a5f6b; }
.k-sp-phonepic { display: none; }
.k-sp-phonepic text { font: 700 21px "Zilla Slab", Georgia, serif; letter-spacing: .08em; text-transform: uppercase; fill: #8a5a44; text-anchor: middle; dominant-baseline: central; }
.k-sp-phonepic text.is-sama { fill: #4a5f6b; }
.k-storypage .k-nav-list a[aria-current] { color: #a1664c; }
@media (max-width: 989px) {
  /* on a phone each part wears its own slice of the ending, like the home page (js/nav.js slices) */
  .k-sp > .k-sp-tail { background: none; }
  .k-sp-cta, .k-sp-tail .k-foot { background: url("../img/c/story-end-1280.webp?h=b9363f69") no-repeat; }
  .k-sp-cta { height: auto; padding: 22vw 0; }
  .k-sp-cta-in { position: relative; left: auto; top: auto; translate: none; width: 70vw; margin: 0 auto; }
  .k-sp-cta h2 { font-size: 6vw; }
  /* their phone grid: the pallets stack, 90% wide, the picture before its words */
  .k-sp > .k-scenes { --u: calc(100cqw / 760); }
  .k-scene { flex-direction: column; align-items: center; gap: 5vw; padding: 0; margin-top: 8vw; }
  .k-scene:nth-child(even) .k-pal:first-child { order: 2; }
  .k-pal { width: 90%; }
  .k-scene:nth-child(even) .k-badge-sama { left: 0; rotate: -15deg; }
  /* the phone hero: the words on their own cream card under the nav, then the people and their ribbons */
  .k-sp { background: url("../img/c/story-ground.webp?h=f53ea0f6") left top / 62vw auto repeat, #e9b7a6; }
  .k-sp-hero { height: auto; padding-top: 130px; display: flex; flex-direction: column; align-items: center; }
  .k-sp-label { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 0 16px; padding: 30px 22px 28px; gap: 14px;
    background: url("../img/c/story-linen.webp?h=0207da0f") center / 360px auto, #f6efe2; border-radius: 26px; box-shadow: 0 6px 16px rgba(110, 60, 40, .16); }
  .k-sp-label::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(162, 96, 63, .45); border-radius: 20px; pointer-events: none; }
  .k-sp-label h1 { font-size: 30px; }
  .k-sp-label p { font-size: 15.5px; }
  .k-sp-phonepic { display: block; width: 100%; height: auto; margin-top: 18px; }
  .k-sp-names { display: none; }
}
/* the frame above the footer on Customize and Order: her SAMAWYAT wordmark in its middle (the home page's
   .k-close-name, in slate here because the frame's inside is cream) */
.k-sp-mark { position: absolute; left: 50%; top: calc(var(--u) * 352); translate: -50% -50%; width: calc(var(--u) * 560); margin: 0; }
.k-sp-mark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(60, 50, 40, .25));
  -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
@media (max-width: 989px) { .k-sp-name { min-height: 44vw; } .k-sp-mark { top: 46%; width: 62vw; } }

/* Customize and Order: the frame holds the home page's SAMAWYAT photograph (tools/k_story_end.py --photo) */
.k-czpage .k-sp > .k-sp-tail { background-image: url("../img/c/story-end-name-2560.webp?h=89a7185c"); }
@media (max-width: 1280px) { .k-czpage .k-sp > .k-sp-tail { background-image: url("../img/c/story-end-name-1280.webp?h=79b8fd47"); } }
@media (max-width: 989px) { .k-czpage .k-sp-cta, .k-czpage .k-sp-tail .k-foot { background-image: url("../img/c/story-end-name-1280.webp?h=79b8fd47") !important; } .k-sp-name { height: 70vw; min-height: 0; padding: 0; } }