@font-face { font-family: "Alfa Slab One"; src: url("../../fonts/new/alfa-slab-one.woff2?h=a67b5351") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 500; src: url("../../fonts/new/zilla-slab-500i.woff2?h=564445bb") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-weight: 500; src: url("../../fonts/new/zilla-slab-500.woff2?h=0f56d6e8") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-weight: 600; src: url("../../fonts/new/zilla-slab-600.woff2?h=9914c0a5") format("woff2"); font-display: swap; }
@font-face { font-family: "Zilla Slab"; font-weight: 700; src: url("../../fonts/new/zilla-slab-700.woff2?h=c9111882") format("woff2"); font-display: swap; }
/* ── The kiosk site's page below and over the hero (his call, 2026-11-05): Sweet Mae's craft feel
   (refs/sweetmaes: a printed-fabric ground, fabric ribbons, stitched lines, a frame round the
   screen, rays breathing behind the product, a ribbon sliding under the nav link), in Sama's
   palette from her concept board and with her own motifs (img/c/, tools/k_craft.py). */

:root {
  --slate: #677b86; --slate-2: #74899a; --mist: #9aadb4;
  --peach: #dcbaa1; --blush: #dbc8ba; --cream: #efe6da; --paper: #f6f0e8;
  --terra: #ac8460; --olive: #7c7451; --sand: #a99f83; --char: #5d5a53;
  --wood: #b98e63; --wood-d: #8d6845;
  --frame: clamp(10px, 1.6vw, 24px);
  --fab-blush: url("../img/c/fabric-blush.webp?h=d16fa165"); --fab-slate: url("../img/c/fabric-slate.webp?h=213ae5d9"); --fab-terra: url("../img/c/fabric-terra.webp?h=29e61ea1");
  --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-back-io: cubic-bezier(.68, -.6, .32, 1.6);
}
html { background: var(--blush) var(--fab-blush) 0 0 / 240px 240px; color: var(--char); scroll-behavior: smooth; }
body { margin: 0; background: transparent !important; font: 400 18px/1.6 "Zilla Slab", Georgia, serif; }
.k-hero { background: var(--wall); }
a { color: inherit; }

/* the frame (Sweet Mae's): a line round the hero only, top and sides, open at the bottom, part of the page (it scrolls away) */
.k-frame { position: absolute; top: var(--frame); left: var(--frame); right: var(--frame); bottom: 0; z-index: 4; pointer-events: none;
  border: 3px solid rgba(172, 132, 96, .85); border-bottom: 0; }
.k-switch { right: calc(var(--frame) + clamp(14px, 2vw, 28px)); bottom: calc(var(--frame) + clamp(14px, 2.4vh, 28px)); }

/* ── the nav: over the hero, fixed; the badge hangs from the frame's top edge ───────────── */
.k-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 55; pointer-events: none; }
.k-nav nav { position: relative; display: grid; grid-template-columns: 1fr clamp(80px, 12vw, 220px) 1fr; align-items: center; height: clamp(84px, 9vw, 120px); pointer-events: auto; }
.k-nav-list { display: flex; justify-content: space-evenly; list-style: none; margin: 0; padding: 0; }
.k-nav-list a { position: relative; z-index: 2; display: block; padding: .7em 1.1em; text-decoration: none;
  font: 400 clamp(12px, 1vw, 15px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .22em; text-transform: uppercase; color: var(--char);
  transition: color .5s cubic-bezier(.33, 0, .2, 1); }
.k-nav-list a.is-hot { color: var(--paper); }
.k-nav-r { grid-column: 3; padding-right: clamp(110px, 11vw, 200px); }
.k-nav-l { padding-left: clamp(110px, 11vw, 200px); }
.k-badge { position: relative; z-index: 3; align-self: start; display: grid; place-items: center; width: clamp(108px, 11vw, 168px); aspect-ratio: 1;
  margin-top: calc(-1 * var(--frame) - 2px); filter: drop-shadow(0 6px 10px rgba(60, 40, 25, .22)); transition: transform .5s var(--ease-back); }
.k-badge::before { content: ""; position: absolute; inset: 0; background: var(--terra) var(--fab-terra) 0 0 / 180px 180px;
  -webkit-mask: url("../img/c/scallop.svg?h=073c2c05") center / contain no-repeat; mask: url("../img/c/scallop.svg?h=073c2c05") center / contain no-repeat; }
.k-badge::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed rgba(246, 240, 232, .7); }
.k-badge img { position: relative; width: 52%; height: auto; }
.k-badge:hover { transform: rotate(-6deg) scale(1.04); }
.k-nav-ribbon { position: absolute; z-index: 1; left: 0; top: 50%; height: 2.9em; width: 0; margin-top: -1.45em; pointer-events: none;
  background: var(--slate) var(--fab-slate) 0 0 / 200px 200px; box-shadow: 4px 5px 10px rgba(50, 40, 30, .16);
  transform-origin: 50% 50%; transition: transform .5s var(--ease-back-io), width .5s var(--ease-back), opacity .2s; opacity: 0; font-size: clamp(12px, 1vw, 15px); }
.k-nav-ribbon::before { content: ""; position: absolute; inset: 4px; border-top: 1.5px dashed rgba(246, 240, 232, .55); border-bottom: 1.5px dashed rgba(246, 240, 232, .55); }
.k-nav-ribbon.is-on { opacity: 1; }
/* over the hero at night the nav goes light */
html.k-night .k-nav-list a:not(.is-hot) { color: var(--paper); }
html.k-night .k-frame { border-color: rgba(246, 240, 232, .5); }
/* once past the hero the nav sits on a strip of the ground fabric */
.k-nav::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(84px, 9vw, 120px); background: var(--blush) var(--fab-blush) 0 0 / 240px 240px;
  border-bottom: 1.5px solid rgba(172, 132, 96, .5); opacity: 0; transition: opacity .5s; pointer-events: none; }
.k-nav.is-past::before { opacity: 1; }
html.k-night .k-nav.is-past .k-nav-list a:not(.is-hot) { color: var(--char); }

/* the order flag: a fabric tag hanging from the frame at the right */
.k-flag { position: absolute; top: 0; right: clamp(18px, 4vw, 70px); z-index: 3; pointer-events: auto; display: grid; place-items: center;
  width: clamp(96px, 9vw, 150px); padding: 1.8em 0 2.4em; text-align: center; text-decoration: none;
  background: var(--terra) var(--fab-terra) 0 0 / 180px 180px; color: var(--paper); box-shadow: 4px 6px 12px rgba(60, 40, 25, .2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 1.3em), 0 100%);
  font: 400 clamp(11px, .9vw, 14px)/1.5 "Zilla Slab", Georgia, serif; letter-spacing: .2em; text-transform: uppercase;
  transform-origin: 50% 0; transition: transform .6s var(--ease-back); }
.k-flag::before { content: ""; position: absolute; inset: 6px 6px 1.7em; border-left: 1.5px dashed rgba(246, 240, 232, .6); border-right: 1.5px dashed rgba(246, 240, 232, .6); }
.k-flag:hover { transform: rotate(-4deg) translateY(4px); }

/* ── the magazine stand ───────────────────────────────────────────────────────────────── */
.k-stand { position: relative; padding: clamp(80px, 10vw, 150px) calc(var(--frame) + 4vw) clamp(60px, 8vw, 120px); overflow: hidden; }
.k-stand-stage { position: relative; height: clamp(480px, 48vw, 740px); max-width: 1280px; margin: 0 auto; }
.k-rays { position: absolute; left: 50%; top: 52%; width: min(118vw, 1180px); aspect-ratio: 1; translate: -50% -50%; opacity: .9;
  animation: k-grow 3s ease-in-out infinite alternate, k-spin 140s linear infinite; }
@keyframes k-grow { from { scale: .95; } to { scale: 1.05; } }
@keyframes k-spin { to { rotate: 1turn; } }
/* the line the magazines hang from: a twine sagging between the frame's sides */
.k-line { position: absolute; left: -6%; right: -6%; top: 8%; height: 16%; border-bottom: 2px solid #7f6a55; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  filter: drop-shadow(0 3px 2px rgba(60, 40, 25, .18)); }
.k-hang { position: absolute; top: 20%; width: clamp(180px, 21vw, 310px); margin: 0; }
.k-hang-1 { right: calc(50% + 2.5%); }
.k-hang-2 { left: calc(50% + 2.5%); }
.k-sway { position: relative; transform-origin: 50% 0; animation: k-sway 4.2s ease-in-out infinite alternate; }
.k-hang-1 .k-sway { rotate: -4deg; }
.k-hang-2 .k-sway { rotate: 3deg; animation-delay: -2.1s; animation-duration: 4.8s; }
@keyframes k-sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.k-sway img { display: block; width: 100%; height: auto; filter: drop-shadow(6px 12px 14px rgba(60, 40, 25, .28)); }
/* the wooden peg, drawn: two jaws and a steel spring */
.k-peg { position: absolute; z-index: 2; left: 50%; top: -9%; width: 9%; aspect-ratio: .3; translate: -50% 0; border-radius: 3px 3px 4px 4px;
  background: var(--wood); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12), inset 3px 0 0 rgba(255, 255, 255, .12), 2px 4px 5px rgba(60, 40, 25, .25); }
.k-peg::before { content: ""; position: absolute; left: 47%; top: 4%; bottom: 36%; width: 6%; background: var(--wood-d); }
.k-peg::after { content: ""; position: absolute; left: -14%; right: -14%; top: 46%; height: 9%; border-radius: 3px; background: #9aa0a2; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }

/* the ribbon across the stand: cream cotton, swallow-tailed, stitched, floating */
.k-banner { position: absolute; z-index: 4; left: 50%; bottom: 6%; width: min(92%, 900px); translate: -50% 0; }
.k-banner h2 { margin: 0; display: flex; justify-content: center; gap: 0; animation: k-float 3s ease-in-out 1s infinite alternate; }
.k-banner span { position: relative; display: block; padding: .5em 1.6em .45em; background: var(--paper);
  font: italic 400 clamp(26px, 3.6vw, 56px)/1 "Zilla Slab", Georgia, serif; color: var(--slate); white-space: nowrap;
  box-shadow: 5px 6px 12px rgba(60, 40, 25, .16); }
.k-banner span::before { content: ""; position: absolute; inset: 7px 0; border-top: 1.5px dashed rgba(172, 132, 96, .7); border-bottom: 1.5px dashed rgba(172, 132, 96, .7); }
.k-banner span:first-child { rotate: -4deg; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%); margin-right: -.4em; }
.k-banner span:last-child { rotate: 3deg; translate: 0 .5em; clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%); }
@keyframes k-float { from { transform: translateY(-.6rem); } to { transform: translateY(.6rem); } }
.k-stand-text { position: relative; max-width: 640px; margin: clamp(30px, 4vw, 60px) auto 0; text-align: center; }
.k-kicker { margin: 0 0 .4em; font: 400 clamp(34px, 3.4vw, 52px)/1 "Zilla Slab", Georgia, serif; color: var(--terra); }
.k-lede { margin: 0; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; color: var(--char); }

/* ── the prices: each magazine in its own little shop box ─────────────────────────────── */
.k-prices { position: relative; padding: clamp(40px, 6vw, 90px) calc(var(--frame) + 4vw) clamp(90px, 10vw, 160px); text-align: center; }
.k-strip { display: inline-block; margin: 0 0 clamp(60px, 7vw, 100px); padding: .55em 1.8em; rotate: -3deg; color: var(--paper);
  background: var(--slate) var(--fab-slate) 0 0 / 200px 200px; box-shadow: 5px 6px 12px rgba(50, 40, 30, .18);
  font: 400 clamp(16px, 1.4vw, 22px)/1.2 "Zilla Slab", Georgia, serif; letter-spacing: .24em; text-transform: uppercase; position: relative; }
.k-strip::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(246, 240, 232, .55); }
.k-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); max-width: 1320px; margin: 0 auto; padding: 0; list-style: none; }
.k-card { position: relative; }
.k-card > a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 14% 9% 10%; text-decoration: none;
  background: var(--paper); box-shadow: 6px 10px 18px rgba(60, 40, 25, .14);
  transform-origin: 50% 0; transition: transform .6s var(--ease-back), box-shadow .6s; }
.k-card:nth-child(odd) > a { rotate: -1.6deg; }
.k-card:nth-child(even) > a { rotate: 1.4deg; }
.k-card > a::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(172, 132, 96, .6); pointer-events: none; }
.k-card > a:hover { transform: rotate(var(--hr, 1.6deg)) translateY(-6px); box-shadow: 10px 18px 26px rgba(60, 40, 25, .2); }
.k-card:nth-child(even) > a:hover { --hr: -1.4deg; }
.k-card .k-peg { top: -3.5%; width: 7%; z-index: 3; }
.k-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; filter: drop-shadow(4px 8px 10px rgba(60, 40, 25, .22)); }
.k-card-name { font: 400 clamp(17px, 1.35vw, 21px)/1.25 "Zilla Slab", Georgia, serif; color: var(--char); }
.k-tag { position: relative; display: inline-block; padding: .45em 1.3em .45em 1.9em; color: var(--paper); background: var(--terra) var(--fab-terra) 0 0 / 160px 160px;
  font: 400 clamp(14px, 1.05vw, 16px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .14em; clip-path: polygon(.9em 0, 100% 0, 100% 100%, .9em 100%, 0 50%);
  box-shadow: 3px 4px 8px rgba(60, 40, 25, .18); }
.k-tag::before { content: ""; position: absolute; left: .75em; top: 50%; width: .42em; height: .42em; margin-top: -.21em; border-radius: 50%; background: var(--paper); }
.k-tag s { opacity: .7; margin-right: .5em; }

/* ── coming in as you scroll: up from 3rem with a little overshoot (Sweet Mae's page enter) ── */
[data-in] { opacity: 0; transform: translateY(3rem); transition: opacity .9s cubic-bezier(.33, 0, .2, 1), transform 1.1s var(--ease-back); }
[data-in].is-in { opacity: 1; transform: none; }
.k-banner[data-in] { transform: translate(0, 3rem); }
.k-banner[data-in].is-in { transform: none; }

@media (max-width: 900px) {
  .k-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .k-nav nav { grid-template-columns: 1fr 24px 1fr; height: 74px; }
  .k-nav-list { flex-direction: column; align-items: center; gap: 2px; }
  .k-nav-list a { padding: .45em .6em; font-size: 10.5px; letter-spacing: .16em; }
  .k-nav-ribbon { font-size: 10.5px; height: 2.4em; margin-top: -1.2em; }
  .k-badge { width: 92px; }
  .k-flag { display: none; }
  .k-nav-r, .k-nav-l { padding: 0; }
  .k-stand-stage { height: 128vw; }
  .k-hang { width: 40vw; top: 16%; }
  .k-rays { width: 150vw; }
  .k-banner { bottom: 2%; width: 100%; }
  .k-shelf { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-rays, .k-sway, .k-banner h2 { animation: none; }
  [data-in] { opacity: 1; transform: none; transition: none; }
}

/* ── our magazines: Huey's "Our Bestsellers" boxes (as css/bs.css on the main site), Sama's ink ── */
.k-mag { --ink: #46555e; position: relative; padding: clamp(50px, 6vw, 90px) 0 clamp(80px, 9vw, 130px); color: var(--ink); counter-reset: km; }
.k-mag-h { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; padding: 0 clamp(20px, 3.4vw, 64px);
  font: 400 clamp(14px, 1.15vw, 18px)/1.3 "Zilla Slab", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.k-mag-icon { width: 24px; height: 14px; }
.k-mag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); margin: 0; padding: 0 clamp(20px, 3.4vw, 64px); list-style: none; }
.k-mag-item { position: relative; counter-increment: km; }
.k-mag-item::before { content: counter(km, decimal-leading-zero) "."; position: absolute; top: 6%; left: 12%; z-index: 10; pointer-events: none;
  font: 400 clamp(11px, .9vw, 15px)/1.8 "Zilla Slab", Georgia, serif; letter-spacing: .6px; color: var(--ink); transition: color .1s; }
.k-mag-card { position: relative; display: flow-root; color: inherit; text-decoration: none; }
.k-mag-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("../img/c/frame.svg?h=52d04450") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.k-mag-inner { position: relative; overflow: hidden; width: 100%; aspect-ratio: 242 / 300; margin: 6px 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='242' height='316' viewBox='0 0 242 316' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 297.5L0.5 22L1 21.5L25.5 0L214 1L241.5 20L240.5 294.5L216.5 315.5L23.5 315L0 297.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='242' height='316' viewBox='0 0 242 316' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 297.5L0.5 22L1 21.5L25.5 0L214 1L241.5 20L240.5 294.5L216.5 315.5L23.5 315L0 297.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.k-mag-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1);
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1); }
.k-mag-inner img + img { opacity: 0; }
.k-mag-info { position: absolute; left: 5%; right: 5%; bottom: 3px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; column-gap: 8px;
  padding: 0 7% 9%; box-sizing: border-box; text-wrap: balance; }
.k-mag-name { margin: 0; font: 400 clamp(11px, .95vw, 15px)/1.3 "Zilla Slab", Georgia, serif; letter-spacing: .05em; text-transform: uppercase; transition: color .1s; }
.k-mag-price { margin: 0; text-align: right; white-space: nowrap; font: italic 400 clamp(11px, .95vw, 15px)/1.5 "Zilla Slab", Georgia, serif; transition: color .1s; }
.k-mag-price s { display: block; opacity: .6; }
@media (hover: hover) {
  .k-mag-card:hover .k-mag-inner img:first-child { opacity: 0; }
  .k-mag-card:hover .k-mag-inner img { transform: scale(1.03); }
  .k-mag-card:hover .k-mag-inner img + img { opacity: 1; }
  .k-mag-card:hover .k-mag-name, .k-mag-card:hover .k-mag-price, .k-mag-item:hover::before { color: var(--paper); }
}
@media (max-width: 989px) {
  .k-mag-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 16px; }
  .k-mag-grid::-webkit-scrollbar { display: none; }
  .k-mag-item { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
  .k-mag-name, .k-mag-price { font-size: 13px; }
}

/* the butterfly: a stitched fabric patch (his ChatGPT butterfly on a cream cotton border with a
   terracotta running stitch, tools/k_butterfly.py), pinned at the last card's top corner, still,
   breathing like Sweet Mae's birds (float, 3 s, alternate) */
.k-fly { position: absolute; z-index: 6; top: -7%; right: -10%; width: 42%; height: auto; pointer-events: none; rotate: 12deg;
  filter: drop-shadow(4px 8px 8px rgba(60, 40, 25, .22)); animation: k-bf-float 3s ease-in-out 1s infinite alternate; }
@keyframes k-bf-float { from { transform: translate3d(0, -.5rem, 0) rotate(-2deg); } to { transform: translate3d(0, .5rem, 0) rotate(2deg); } }
@media (max-width: 989px) { .k-fly { top: -5%; right: -4%; width: 34%; } }
@media (prefers-reduced-motion: reduce) { .k-fly { animation: none; } }

/* the ground v2: magazine paper with Sama's paving pattern printed on it (img/c/paper.webp) */
html { background: #ece2d6 url("../img/c/paper.webp?h=30797c53") 0 0 / 360px 360px; }
.k-nav::before { background: #ece2d6 url("../img/c/paper.webp?h=30797c53") 0 0 / 360px 360px; }

/* while the splash runs the nav and the switch wait; they come in over it in its last moments
   (js/splash.js), so the hand-over to the hero changes nothing on screen */
html.k-splashing .k-nav, html.k-splashing .k-switch { opacity: 0; z-index: 120; transition: opacity .8s cubic-bezier(.33, 0, .2, 1); }
html.k-splashing.k-ui-in .k-nav, html.k-splashing.k-ui-in .k-switch { opacity: 1; }

/* the magazines' ground (his ChatGPT fabric collage in Sama's palette: patchwork with stitched seams,
   magazine-studio appliques round the edges, the middle calm): the whole picture, cards in its middle */
.k-mag { min-height: 56.25vw; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  background: #ece2d6 url("../img/c/ground-2560.webp?h=f17e5d47") center / cover no-repeat; }
.k-mag-h, .k-mag-grid { width: min(80%, 1320px); margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 0; padding-right: 0; }
@media (max-width: 1280px) { .k-mag { background-image: url("../img/c/ground-1280.webp?h=6aba0540"); } }
@media (max-width: 989px) {
  .k-mag { min-height: 0; background-size: auto 100%; }
  .k-mag-h { width: auto; padding: 0 20px; }
  .k-mag-grid { width: auto; padding: 0 16px; }
}

/* on the collage the boxes are cards of cream linen (the frame's own shape), so the appliques pass
   behind them, never through them; the nav strip is the same linen with a stitched seam */
.k-mag-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #f4ebdd;
  box-shadow: 0 0 0 0 transparent; filter: drop-shadow(4px 8px 10px rgba(60, 40, 25, .14));
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='255' height='328' viewBox='0 0 255 328' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M2.2 24.5 L26.5 1.8 L228.4 2.4 L253.1 21.6 L252.6 303.4 L229.2 326.1 L24.6 325.6 L1.8 305.8 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='255' height='328' viewBox='0 0 255 328' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M2.2 24.5 L26.5 1.8 L228.4 2.4 L253.1 21.6 L252.6 303.4 L229.2 326.1 L24.6 325.6 L1.8 305.8 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.k-mag-inner, .k-mag-info { z-index: 1; }
.k-mag-item { filter: drop-shadow(5px 9px 10px rgba(60, 40, 25, .16)); }
.k-nav::before { background: #f2e8da; border-bottom: 0; }
.k-nav::after { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(84px, 9vw, 120px) - 7px); border-top: 1.5px dashed rgba(172, 132, 96, .7); opacity: 0; transition: opacity .5s; pointer-events: none; }
.k-nav.is-past::after { opacity: 1; }

/* ── the cards v2 (his call): his ChatGPT stitched fabric frames (tools/k_cards.py), one print each,
   instead of Huey's line frame. The frame IS the card; the magazine and the words sit on its linen. ── */
.k-mag-card { aspect-ratio: 963 / 1355; background: url("../img/c/card-1-640.webp?h=38dce46c") 0 0 / 100% 100% no-repeat; }
.k-card-2 { background-image: url("../img/c/card-2-640.webp?h=f90e10c5"); }
.k-card-3 { background-image: url("../img/c/card-3-640.webp?h=7f5c8abe"); }
.k-card-4 { background-image: url("../img/c/card-4-640.webp?h=d875c2cd"); }
@media (min-width: 1700px), (min-resolution: 2dppx) {
  .k-mag-card { background-image: url("../img/c/card-1.webp?h=1d90eef8"); } .k-card-2 { background-image: url("../img/c/card-2.webp?h=d86b5c15"); }
  .k-card-3 { background-image: url("../img/c/card-3.webp?h=14cd62de"); } .k-card-4 { background-image: url("../img/c/card-4.webp?h=72eea1ae"); }
}
.k-mag-card::before, .k-mag-card::after { display: none; }
.k-mag-item { filter: drop-shadow(5px 9px 9px rgba(60, 40, 25, .18)); }
.k-mag-inner { position: absolute; left: 11%; right: 11%; top: 15%; height: 64%; width: auto; aspect-ratio: auto; margin: 0; -webkit-mask: none; mask: none; overflow: visible; }
.k-mag-inner img { object-fit: contain; transform: scale(1.32); filter: drop-shadow(3px 6px 6px rgba(60, 40, 25, .22)); }
.k-mag-card:hover .k-mag-inner img { transform: scale(1.36); }
.k-mag-inner img + img { transform: none; }
.k-mag-card:hover .k-mag-inner img + img { transform: scale(1.02); }
.k-mag-inner img + img { object-fit: cover; border-radius: 2px; }
.k-mag-info { left: 12%; right: 12%; bottom: 9%; padding: 0; }
.k-mag-item::before { top: 11%; left: 12%; }
.k-mag-card:hover .k-mag-name, .k-mag-card:hover .k-mag-price, .k-mag-item:hover::before { color: var(--ink); }
.k-mag-card { transition: transform .5s var(--ease-back); }
.k-mag-card:hover { transform: rotate(-1.2deg) translateY(-6px); }
.k-mag-item:nth-child(even) .k-mag-card:hover { transform: rotate(1.2deg) translateY(-6px); }
.k-fly { top: -5%; right: -12%; }

/* the title (his note: in the middle, a colour that belongs): a cream linen label sewn on, slate type,
   swallow-tailed like Sweet Mae's ribbons, a little tilt, floating */
.k-mag-h { display: flex; justify-content: center; width: auto; margin: 0 auto clamp(26px, 3vw, 46px); padding: 0; }
.k-mag-h span { position: relative; display: block; padding: .62em 2.4em .58em; rotate: -2deg; color: #4f6672;
  background: #f4ebdd; font: 400 clamp(17px, 1.5vw, 24px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .24em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); filter: drop-shadow(4px 6px 6px rgba(60, 40, 25, .16));
  animation: k-float 3s ease-in-out 1s infinite alternate; }
.k-mag-h span::before { content: ""; position: absolute; inset: 6px 6%; border-top: 1.5px dashed rgba(172, 132, 96, .75); border-bottom: 1.5px dashed rgba(172, 132, 96, .75); }

/* ── the quilt: one tall collage (img/c/page-*.webp, 1672 x 1581 at the source) behind the magazines and
   the customize label; each section is the height of its piece, so the label sits on the drawn label ── */
.k-quilt { container-type: inline-size; position: relative; background: #ece2d6 url("../img/c/page-2560.webp?h=e1eed10f") center top / 100% auto no-repeat; }
@media (max-width: 1280px) { .k-quilt { background-image: url("../img/c/page-1280.webp?h=fa153bcc"); } }
.k-quilt .k-mag { background: none; min-height: 0; height: calc(100cqw * 941 / 1672); }
.k-cust { position: relative; height: calc(100cqw * 640 / 1672); }
.k-cust-label { position: absolute; left: 50%; top: calc(100cqw * (1167 - 941) / 1672); translate: -50% -50%; width: calc(100cqw * 760 / 1672);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1.2vw, 22px); }
.k-cust-label h2 { margin: 0; font: 400 clamp(30px, 3.6vw, 64px)/1.08 "Zilla Slab", Georgia, serif; letter-spacing: .06em; text-transform: uppercase;
  color: #4f6672; text-shadow: 2px 2px 0 rgba(172, 132, 96, .25); }
.k-cust-label p { margin: 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.55; color: var(--char); }
.k-btn { position: relative; display: inline-block; margin-top: .3em; padding: .95em 2.4em; border-radius: 14px; text-decoration: none;
  background: linear-gradient(rgba(70, 92, 106, .5), rgba(70, 92, 106, .5)), #9aadb4 url("../img/c/btn-gingham.webp?h=52acdff5") center / cover; color: #fbf6ee;
  font: 400 clamp(13px, 1vw, 17px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(40, 50, 60, .45);
  box-shadow: 3px 5px 8px rgba(60, 40, 25, .2); transition: transform .45s var(--ease-back), box-shadow .45s; }
.k-btn::before { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: 1.5px dashed rgba(247, 241, 230, .8); pointer-events: none; }
.k-btn:hover { transform: rotate(-2deg) scale(1.05); box-shadow: 5px 9px 12px rgba(60, 40, 25, .24); }
@media (max-width: 989px) {
  .k-quilt { background-size: 240vw auto; }
  .k-quilt .k-mag { height: auto; }
  .k-cust { height: auto; padding: 60px 16px 80px; }
  .k-cust-label { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 0 auto; max-width: 520px; padding: 46px 28px;
    background: #f4ebdd; border-radius: 40px; box-shadow: 0 0 0 10px #e7b9a6, 0 0 0 11px rgba(172, 132, 96, .5), 6px 10px 18px rgba(60, 40, 25, .2); }
}

/* ── our story: on the slate felt of the collage's third piece (tall rows 1581..2394; the felt's middle
   at x 1306, y 2103 of 1672) ── */
.k-story { position: relative; height: calc(100cqw * 813 / 1672); }
.k-story-text { position: absolute; left: calc(100cqw * 1306 / 1672); top: calc(100cqw * (2103 - 1581) / 1672); translate: -50% -50%;
  width: calc(100cqw * 600 / 1672); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 1.6vw, 28px); }
.k-story-text h2 { display: flex; flex-direction: column; align-items: center; gap: .55em; margin: 0 0 .2em; }
.k-story-text h2 span { position: relative; display: block; padding: .6em 1.6em .55em; color: #fbf6ee;
  background: linear-gradient(rgba(196, 112, 92, .42), rgba(196, 112, 92, .42)), #e6b5a2 url("../img/c/strip-pink.webp?h=076b554d") center / cover;
  font: 400 clamp(20px, 2vw, 34px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 1px 2px 0 rgba(120, 60, 45, .55);
  box-shadow: 4px 6px 10px rgba(30, 40, 50, .3); }
.k-story-text h2 span::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(251, 246, 238, .85); }
.k-story-text h2 span:first-child { rotate: -3deg; translate: .6em 0; }
.k-story-text h2 span:last-child { rotate: 2deg; translate: -.4em 0; }
.k-story-text p { margin: 0; max-width: 26em; color: #f3ece2; font-size: clamp(17px, 1.35vw, 23px); line-height: 1.6; }
.k-btn-cream { background: #f2e3c8; color: #4f6672; text-shadow: none; }
.k-btn-cream::before { border-color: rgba(172, 132, 96, .75); }
@media (max-width: 989px) {
  .k-story { height: auto; padding: 60vw 16px 70px; }
  .k-story-text { position: relative; left: auto; top: auto; translate: none; width: auto; max-width: 520px; margin: 0 auto; padding: 36px 22px;
    background: #57728a; border-radius: 22px; box-shadow: 6px 10px 18px rgba(30, 40, 50, .25); }
}

/* ── how an order works (Sweet Mae's "From the Blog"): on the pink linen of the 4th piece; the magazine
   sits on the leafy edge, then a round stitched badge, the title, the button, a stitched rule, 3 steps ── */
.k-order { --u: calc(100cqw / 1672); position: relative; height: calc(var(--u) * var(--k-order-h, 760)); }
.k-order-feat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  width: calc(var(--u) * 900); margin: 0 auto; padding-top: calc(var(--u) * 10); }
.k-order-mag { width: calc(var(--u) * 270); height: auto; rotate: -9deg; margin-top: calc(var(--u) * -150);
  filter: drop-shadow(10px 16px 14px rgba(60, 40, 25, .3)); transition: rotate .6s var(--ease-back); }
.k-order-feat:hover .k-order-mag { rotate: -4deg; }
.k-badge2 { position: relative; display: grid; place-items: center; width: clamp(84px, 7.4vw, 130px); aspect-ratio: 1; margin: calc(var(--u) * -70) 0 0; border-radius: 50%;
  background: #b07a5c; color: #fbf6ee; text-align: center;
  font: 400 clamp(11px, .9vw, 15px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .2em; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(120, 60, 45, .4);
  box-shadow: 3px 5px 9px rgba(60, 40, 25, .22); z-index: 2; }
.k-badge2::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(251, 246, 238, .85); }
.k-badge2 span { display: block; font-size: 2.2em; letter-spacing: .02em; margin-bottom: -.35em; }
.k-kick { margin: calc(var(--u) * 16) 0 0; font: 400 clamp(26px, 2.4vw, 42px)/1 "Zilla Slab", Georgia, serif; color: #a1664c; }
.k-order h2 { margin: .2em 0 0; max-width: 16em; font: 400 clamp(24px, 2.5cqw, 44px)/1.12 "Zilla Slab", Georgia, serif; letter-spacing: .07em; text-transform: uppercase;
  color: #4f6672; text-shadow: 2px 2px 0 rgba(172, 132, 96, .22); }
.k-order-lede { margin: .7em 0 1em; max-width: 30em; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.55; color: var(--char); }
.k-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 50); width: calc(var(--u) * 900); margin: calc(var(--u) * 34) auto 0;
  padding: calc(var(--u) * 28) 0 0; list-style: none; border-top: 2px dashed rgba(172, 132, 96, .75); text-align: center; }
.k-steps li { display: flex; flex-direction: column-reverse; align-items: center; gap: .6em; }
.k-steps a { color: #4f6672; text-decoration: none; font: 400 clamp(15px, 1.15vw, 19px)/1.35 "Zilla Slab", Georgia, serif; transition: color .3s; }
.k-steps a:hover { color: #a1664c; }
.k-step-n { font: 400 clamp(12px, .85vw, 14px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .24em; text-transform: uppercase; color: #a1664c; }
@media (max-width: 989px) {
  .k-order { height: auto; padding: 40px 16px 70px; }
  .k-order-feat, .k-steps { width: auto; }
  .k-order-mag { width: 44vw; margin-top: 0; }
  .k-badge2 { margin-top: -40px; }
  .k-steps { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; padding-top: 30px; }
}

/* ── the last piece: order ends at the closing frame, the frame holds her photo (tall y 3261..3642),
   the footer is the cream linen with the sprigs and the stitched rays (tall 3700..4028) ── */
.k-order { --k-order-h: 806; }
.k-close { --u: calc(100cqw / 1672); position: relative; height: calc(var(--u) * 500); }
.k-close-quote { position: absolute; left: 50%; top: calc(var(--u) * (3451 - 3200)); translate: -50% -50%; margin: 0; width: calc(var(--u) * 820); text-align: center;
  font: italic 400 clamp(26px, 2.9vw, 50px)/1.15 "Zilla Slab", Georgia, serif; color: #fbf3e6; text-shadow: 0 2px 12px rgba(70, 40, 20, .45); }
.k-close-quote span { display: block; font: 400 clamp(30px, 3.2vw, 56px)/1.1 "Zilla Slab", Georgia, serif; font-style: normal; color: #fff6ea; margin-bottom: .1em; }
.k-quilt { padding-bottom: 0; }
.k-foot { --u: calc(100cqw / 1672); position: relative; height: calc(var(--u) * 328);
  background: #f3e9d8 url("../img/c/page-2560.webp?h=e1eed10f") center bottom / 100% auto no-repeat; display: flex; flex-direction: column; align-items: center; color: #8a5a44; }
.k-quilt { background-size: 100% auto; background-position: center top; }
.k-seal { position: relative; display: grid; place-items: center; width: clamp(80px, 7vw, 120px); aspect-ratio: 1; margin-top: calc(var(--u) * 20);
  filter: drop-shadow(3px 6px 8px rgba(60, 40, 25, .22)); transition: transform .5s var(--ease-back); }
.k-seal::before { content: ""; position: absolute; inset: 0; background: #b07a5c;
  -webkit-mask: url("../img/c/scallop.svg?h=073c2c05") center / contain no-repeat; mask: url("../img/c/scallop.svg?h=073c2c05") center / contain no-repeat; }
.k-seal::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed rgba(246, 240, 232, .75); }
.k-seal img { position: relative; width: 50%; height: auto; }
.k-seal:hover { transform: rotate(-8deg) scale(1.05); }
.k-foot-bf { position: absolute; top: calc(var(--u) * 26); width: clamp(70px, 6.4vw, 110px); height: auto; filter: drop-shadow(3px 6px 6px rgba(60, 40, 25, .2));
  animation: k-bf-float 3s ease-in-out infinite alternate; }
.k-foot-bf-l { left: calc(50% - var(--u) * 330); rotate: -14deg; transform: scaleX(-1); }
.k-foot-bf-r { left: calc(50% + var(--u) * 330 - clamp(70px, 6.4vw, 110px)); rotate: 14deg; animation-delay: -1.5s; }
.k-copy { margin: calc(var(--u) * 18) 0 0; font: 400 clamp(11px, .85vw, 14px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .22em; text-transform: uppercase; }
.k-copy-2 { margin-top: .9em; display: flex; align-items: center; gap: .7em; }
.k-ig { color: inherit; display: inline-flex; }
.k-ig:hover { color: #4f6672; }
@media (max-width: 989px) {
  .k-close { height: 70vw; }
  .k-close-quote { top: 50%; width: 86vw; }
  .k-foot { height: auto; padding: 30px 16px 120px; background-size: 240vw auto; }
  .k-foot-bf-l { left: 6%; } .k-foot-bf-r { left: auto; right: 6%; }
}

/* ── the phone (his pass, 2026-11-06) ───────────────────────────────────────────────────────── */
@media (max-width: 989px) {
  /* auto side margins in the column flexbox turned off the stretch: the slider took its full content
     width (1233px) and the phone zoomed the whole page out */
  .k-quilt .k-mag-grid { width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; min-width: 0; }
  .k-quilt .k-mag { overflow: hidden; }
}
@media (max-width: 989px) {
  .k-quilt { background-image: none !important; background-color: #ece2d6; }
  .k-quilt .k-mag { height: auto; padding: 70px 0 60px; }
  .k-fly { top: -4%; right: -3%; width: 30%; }
  .k-mag-item { flex-basis: min(72vw, 320px); }
  .k-cust { padding: 70px 18px 80px; }
  .k-story { padding: 96vw 16px 60px; }
  .k-order { padding: 130px 16px 70px; }
  .k-order-mag { margin-top: -110px; width: 46vw; }
  .k-close { height: auto; padding: 70px 16px; display: grid; place-items: center; }
  .k-close-quote { position: relative; left: auto; top: auto; translate: none; width: auto; padding: 40px 22px; border-radius: 24px; overflow: hidden;
    background: url("../img/c/page-1280.webp?h=fa153bcc") 0 0 / 1px 1px no-repeat; }
  .k-foot { height: auto; padding: 36px 16px 150px; }
  .k-foot-bf { top: 30px; width: 64px; }
}
@media (max-width: 989px) {
  [data-rows] { background-image: url("../img/c/page-1280.webp?h=fa153bcc"); background-repeat: no-repeat; }
}
/* his notes (2026-11-06): the nav stays at the top of the page and doesn't follow the scroll; the frame's
   middle says SAMAWYAT (her own wordmark from the render, in cream) */
.k-nav { position: absolute; }
.k-nav::before, .k-nav::after { display: none; }
.k-close-name { position: absolute; left: 50%; top: calc(var(--u) * (3451 - 3200)); translate: -50% -50%; width: calc(var(--u) * 560); aspect-ratio: 387.5 / 100;
  background: #fbf3e6; -webkit-mask: url("../img/name.png?h=036a5bd2") center / contain no-repeat; mask: url("../img/name.png?h=036a5bd2") center / contain no-repeat;
  filter: drop-shadow(0 3px 10px rgba(70, 40, 20, .5)); }
@media (max-width: 989px) { .k-close-name { position: relative; left: auto; top: auto; translate: none; width: 78vw; } }
.sronly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-close-name { margin: 0; }

/* the nav v3 (his note: the places and the font): Sweet Mae's set, a slab serif in bold caps (theirs is
   FF Ernestine; ours Zilla Slab, OFL), the four links in one centred row with even gaps and a wider gap
   in the middle, the order flag at the right */
.k-nav nav { display: flex; justify-content: center; align-items: center; gap: 0; }
.k-nav-list { justify-content: center; gap: clamp(28px, 3.4vw, 64px); padding: 0 !important; }
.k-nav-l { margin-right: clamp(60px, 9vw, 180px); }
.k-nav-list a { font: 600 clamp(13px, 1vw, 16px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .16em; color: #5b4636; padding: .75em 1em; }
.k-nav-ribbon { font-size: clamp(13px, 1vw, 16px); }
.k-flag { font-family: "Zilla Slab", Georgia, serif; font-weight: 600; letter-spacing: .14em; }
@media (max-width: 560px) { .k-nav-l { margin-right: 14px; } .k-nav-list { gap: 2px; } .k-nav-list a { font-size: 11px; letter-spacing: .1em; } }

/* the seal: his ChatGPT embroidered patch with her cloud logo sewn on its centre (img/c/seal.webp) */
.k-seal { width: clamp(96px, 8.4cqw, 150px); }
.k-seal::before, .k-seal::after { display: none; }
.k-seal img { width: 100%; }

/* ── the footer v2: the last piece (tall rows 3700..4734): seal, butterflies and words on the cream
   between the sprigs; the patchwork roof with @samawyat_gallery in its little frame; two of Sama's real
   magazines peeking over the felt bushes (Sweet Mae's cookies), the bushes cut out to sit in front ── */
.k-foot { height: calc(var(--u) * 1034); display: block; }
.k-foot > * { position: absolute; }
.k-seal { left: 50%; top: calc(var(--u) * 40); translate: -50% 0; margin: 0; width: calc(var(--u) * 150); }
.k-foot-bf { top: calc(var(--u) * 70); width: calc(var(--u) * 110); }
.k-foot-bf-l { left: calc(var(--u) * 506); } .k-foot-bf-r { left: calc(var(--u) * 1056); }
.k-copy { left: 0; right: 0; top: calc(var(--u) * 212); margin: 0; text-align: center; font-family: "Zilla Slab", Georgia, serif; font-weight: 600; letter-spacing: .2em; color: #8a5a44; }
.k-copy-2 { top: calc(var(--u) * 246); justify-content: center; }
.k-sign { left: calc(var(--u) * 718); top: calc(var(--u) * (4341 - 3700)); width: calc(var(--u) * 236); height: calc(var(--u) * 147); display: grid; place-items: center;
  font: 600 clamp(11px, 1cqw, 17px)/1.2 "Zilla Slab", Georgia, serif; letter-spacing: .06em; color: #4f6672; text-decoration: none; text-align: center; }
.k-sign:hover { color: #a1664c; }
.k-peek { width: calc(var(--u) * 330); height: auto; filter: drop-shadow(6px 10px 12px rgba(60, 40, 25, .25)); transition: translate .6s var(--ease-back); }
.k-peek-l { left: calc(var(--u) * 90); top: calc(var(--u) * (4290 - 3700)); rotate: -10deg; }
.k-peek-r { left: calc(var(--u) * 1260); top: calc(var(--u) * (4290 - 3700)); rotate: 9deg; }
.k-foot:hover .k-peek { translate: 0 calc(var(--u) * -40); }
.k-bush { pointer-events: none; }
.k-bush-l { left: 0; top: calc(var(--u) * (4473 - 3700)); width: calc(var(--u) * 466); }
.k-bush-r { left: calc(var(--u) * 1220); top: calc(var(--u) * (4472 - 3700)); width: calc(var(--u) * 452); }
@media (max-width: 989px) {
  .k-foot { height: auto; min-height: 120vw; padding: 0; }
  .k-seal { width: 26vw; top: 20px; } .k-foot-bf { top: 40px; width: 16vw; } .k-foot-bf-l { left: 8vw; } .k-foot-bf-r { left: auto; right: 8vw; }
  .k-copy { top: calc(26vw + 36px); } .k-copy-2 { top: calc(26vw + 60px); }
  .k-sign, .k-peek, .k-bush { display: none; }
}

/* ── type, Sweet Mae's way (2026-11-06, his call: one family set over the whole site). Theirs: Oxtail for
   the big titles, FF Ernestine for everything else (both Adobe Fonts, licensed to them). Ours, free:
   Alfa Slab One for the titles, Zilla Slab for the rest. Titles: caps, tight, a soft letterpress shadow;
   labels and buttons: Zilla Slab 700 caps, spaced; text: Zilla Slab 500. ── */
body { font: 500 18px/1.6 "Zilla Slab", Georgia, serif; }
.k-cust-label h2, .k-order h2, .k-story-text h2 span, .k-mag-h span {
  font-family: "Alfa Slab One", "Zilla Slab", Georgia, serif; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
.k-cust-label h2, .k-order h2 { color: #4a5f6b; text-shadow: 2px 2px 0 rgba(172, 132, 96, .28); line-height: 1.12; }
.k-cust-label h2 { font-size: clamp(28px, 3.2cqw, 56px); }
.k-order h2 { font-size: clamp(24px, 2.6cqw, 46px); }
.k-mag-h span { font-size: clamp(16px, 1.4cqw, 23px); letter-spacing: .12em; }
.k-story-text h2 span { font-size: clamp(18px, 1.8cqw, 30px); letter-spacing: .08em; }
.k-cust-label p, .k-order-lede, .k-story-text p, .k-lede { font-family: "Zilla Slab", Georgia, serif; font-weight: 500; }
.k-kick { font: italic 500 clamp(20px, 1.7cqw, 30px)/1.1 "Zilla Slab", Georgia, serif; letter-spacing: .02em; }
.k-btn, .k-mag-name, .k-step-n, .k-copy, .k-switch, .k-nav-list a, .k-flag, .k-tag, .k-strip {
  font-family: "Zilla Slab", Georgia, serif; font-weight: 700; text-transform: uppercase; }
.k-btn { letter-spacing: .14em; }
.k-mag-name { letter-spacing: .06em; }
.k-mag-price { font: italic 500 clamp(12px, 1cqw, 16px)/1.4 "Zilla Slab", Georgia, serif; }
.k-steps a { font: 600 clamp(15px, 1.15cqw, 19px)/1.35 "Zilla Slab", Georgia, serif; }
.k-sign { font-weight: 700; }

@media (max-width: 989px) { .k-quilt .k-mag[data-rows] { background-image: url("../img/c/page-1280.webp?h=fa153bcc"); background-repeat: no-repeat; } }

/* the order section's product (his note: like Sweet Mae's cookies): two of Sama's real magazines lying
   on the table, fanned, seen a little from above (CSS 3D), a soft contact shadow, crossing the green
   edge above; the stitched badge sits on them */
.k-order-pile { position: relative; width: calc(var(--u) * 760); height: calc(var(--u) * 400); margin-top: calc(var(--u) * -170); perspective: calc(var(--u) * 1400); }
.k-order-pile img { position: absolute; top: 0; width: calc(var(--u) * 330); height: auto; transform-origin: 50% 60%;
  filter: drop-shadow(0 calc(var(--u) * 26) calc(var(--u) * 18) rgba(60, 35, 20, .38)); transition: transform .8s var(--ease-back); }
.k-pile-a { left: calc(var(--u) * 90); transform: rotateX(48deg) rotateZ(-24deg) translateZ(0); }
.k-pile-b { left: calc(var(--u) * 340); transform: rotateX(48deg) rotateZ(17deg) translateZ(calc(var(--u) * 10)); }
.k-order-feat:hover .k-pile-a { transform: rotateX(42deg) rotateZ(-28deg) translateZ(calc(var(--u) * 20)); }
.k-order-feat:hover .k-pile-b { transform: rotateX(42deg) rotateZ(21deg) translateZ(calc(var(--u) * 30)); }
.k-order-pile::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 6%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 35, 20, .28), transparent); filter: blur(calc(var(--u) * 8)); z-index: -1; }
.k-badge2 { margin-top: calc(var(--u) * -120); }
@media (max-width: 989px) {
  .k-order-pile { width: 92vw; height: 52vw; margin-top: -24vw; perspective: 900px; }
  .k-order-pile img { width: 42vw; }
  .k-pile-a { left: 4vw; } .k-pile-b { left: 40vw; }
  .k-badge2 { margin-top: -12vw; }
}

.k-order-pile { width: calc(var(--u) * 820); height: calc(var(--u) * 430); margin-top: calc(var(--u) * -230); }
.k-order-pile img { width: calc(var(--u) * 440); }
.k-pile-a { left: calc(var(--u) * 40); transform: rotateX(38deg) rotateZ(-14deg); }
.k-pile-b { left: calc(var(--u) * 330); transform: rotateX(38deg) rotateZ(11deg) translateZ(calc(var(--u) * 14)); }
.k-order-feat:hover .k-pile-a { transform: rotateX(32deg) rotateZ(-17deg) translateZ(calc(var(--u) * 20)); }
.k-order-feat:hover .k-pile-b { transform: rotateX(32deg) rotateZ(14deg) translateZ(calc(var(--u) * 34)); }
.k-badge2 { margin-top: calc(var(--u) * -150); }

/* ── the nav v4 (his call, 2026-11-06: "a proper nav bar, with a way back, in our look"): a strip of cream
   linen across the top with a scalloped hem and a running stitch, her embroidered seal hanging from its middle
   (it goes home), the four links either side, the order flag at the right and, on every page but the home
   page, a gingham "Home" tag at the left. It sits over the top of the hero and scrolls away with the page. ── */
.k-nav.k-bar { --bh: clamp(70px, 5.6vw, 92px); position: absolute; height: var(--bh); filter: drop-shadow(0 4px 7px rgba(90, 55, 35, .2)); }
.k-nav.k-bar::before { display: block; content: ""; position: absolute; inset: 0; height: auto; opacity: 1; border: 0; transition: none;
  background: url("../img/c/story-linen.webp?h=0207da0f") center / 420px auto, #f6efe2;
  -webkit-mask: radial-gradient(circle at 50% 0, #000 9.5px, transparent 10px) left bottom / 22px 10px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat;
          mask: radial-gradient(circle at 50% 0, #000 9.5px, transparent 10px) left bottom / 22px 10px repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat; }
.k-nav.k-bar::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: 17px; opacity: 1; border-top: 1.5px dashed rgba(162, 96, 63, .55); }
.k-bar nav { height: var(--bh); padding-bottom: 8px; box-sizing: border-box; }
.k-bar .k-nav-l { margin-right: 0; }
.k-bar-seal { position: relative; z-index: 3; align-self: flex-start; width: clamp(84px, 7vw, 118px); margin: 6px clamp(26px, 3.6vw, 64px) 0; pointer-events: auto;
  filter: drop-shadow(0 5px 8px rgba(70, 40, 25, .25)); transition: transform .5s var(--ease-back); }
.k-bar-seal img { display: block; width: 100%; height: auto; }
.k-bar-seal:hover { transform: rotate(-6deg) scale(1.04); }
html.k-night .k-bar .k-nav-list a:not(.is-hot) { color: #5b4636; }
/* the way back: a stitched gingham tag, its point to the left */
.k-back { position: absolute; z-index: 3; left: clamp(16px, 3vw, 56px); top: calc((var(--bh) - 8px) / 2); translate: 0 -50%; pointer-events: auto;
  display: flex; align-items: center; gap: .6em; padding: .78em 1.3em .78em 1.7em; text-decoration: none; color: #3f5563;
  background: url("../img/c/fab-1-soft-320.webp?h=0fe66348") 0 0 / 96px auto, #dfe7ec; clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
  font: 700 clamp(11px, .85vw, 14px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; transition: translate .4s var(--ease-back); }
.k-back::before { content: ""; position: absolute; inset: 4px 5px 4px 17px; border: 1.5px dashed rgba(63, 85, 99, .45); pointer-events: none; }
.k-back svg { position: relative; flex: none; }
.k-back:hover { translate: -5px -50%; }
.k-bar .k-flag { z-index: 4; }
@media (max-width: 989px) {
  .k-nav.k-bar { --bh: 104px; }
  .k-bar nav { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 54px 38px; align-items: center; padding: 0; height: calc(var(--bh) - 12px); }
  .k-bar .k-nav-list { flex-direction: row; gap: 0; grid-row: 2; }
  .k-bar .k-nav-l { grid-column: 1; justify-content: flex-end; }
  .k-bar .k-nav-r { grid-column: 3; justify-content: flex-start; }
  .k-bar .k-nav-list a { font-size: 10.5px; letter-spacing: .1em; padding: .7em .55em; }
  .k-bar-seal { grid-column: 2; grid-row: 1 / 3; align-self: start; width: 68px; margin: 8px 6px 0; }
  .k-back { top: 27px; left: 12px; font-size: 10px; padding: .7em .9em .7em 1.4em; }
  .k-back svg { width: 13px; }
  .k-bar .k-flag { display: grid; top: 0; right: 12px; width: 78px; padding: .9em 0 1.5em; font-size: 9px; line-height: 1.35; }
}
@media (max-width: 380px) { .k-bar .k-nav-list a { font-size: 9.5px; padding: .7em .4em; } }
/* nav v4, its behaviour (his note 2026-11-06): fixed, it slips up out of sight while you scroll down and comes
   back on the way up; over the home hero it is the words only (no strip, no seal), so SAMAWYAT shows */
.k-nav.k-bar { position: fixed; transition: translate .5s cubic-bezier(.33, 0, .2, 1), opacity .8s cubic-bezier(.33, 0, .2, 1); }
.k-nav.k-bar.is-hid { translate: 0 calc(-100% - 70px); }
.k-nav.k-bar::before, .k-nav.k-bar::after, .k-bar-seal { transition: opacity .4s; }
.k-nav.k-bar.is-bare { filter: none; }
.k-nav.k-bar.is-bare::before, .k-nav.k-bar.is-bare::after { opacity: 0; }
.k-bar.is-bare .k-bar-seal { opacity: 0; pointer-events: none; }
html.k-night .k-bar.is-bare .k-nav-list a:not(.is-hot) { color: var(--paper); }
/* Shop now: on the hero's bottom left, across from the day / night switch */
.k-shopnow { position: absolute; z-index: 5; left: calc(var(--frame) + clamp(14px, 2vw, 28px)); bottom: calc(var(--frame) + clamp(14px, 2.4vh, 28px)); margin: 0; }
.k-shopall { display: table; margin: clamp(28px, 3vw, 48px) auto 0; }
@media (max-width: 989px) { .k-shopnow { left: 16px; bottom: 16px; padding: .85em 1.8em; } }
/* his notes (2026-11-06, later): the order flag is off; the links spread further out to the sides, with the seal
   exactly in the middle; over the home hero the middle holds "Shop all" on the gingham cloud of the footer's sign */
.k-flag { display: none !important; }
.k-bar nav { justify-content: center; }
.k-bar .k-nav-list { flex: 1 1 0; gap: clamp(40px, 5.4vw, 104px); }
.k-bar .k-nav-l { justify-content: flex-end; }
.k-bar .k-nav-r { justify-content: flex-start; }
.k-bar-seal { flex: none; margin-left: clamp(56px, 7.4vw, 140px); margin-right: clamp(56px, 7.4vw, 140px); }
.k-cloud { position: absolute; z-index: 3; left: 50%; top: calc((var(--bh) - 8px) / 2); translate: -50% -50%; width: clamp(128px, 10.4vw, 176px); aspect-ratio: 207 / 113;
  display: grid; place-items: center; padding-top: 3%; box-sizing: border-box; text-decoration: none; pointer-events: none; opacity: 0;
  background: url("../img/c/cloud-tag.webp?h=cd2ce387") center / 100% 100% no-repeat; filter: drop-shadow(0 5px 8px rgba(40, 55, 70, .28));
  transition: opacity .4s, transform .5s var(--ease-back); }
.k-cloud span { padding: .35em .7em; border-radius: 99px; background: rgba(247, 241, 230, .9);
  font: 700 clamp(11px, .86vw, 14px)/1 "Zilla Slab", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #3f5563; }
.k-bar.is-bare .k-cloud { opacity: 1; pointer-events: auto; }
.k-cloud:hover { transform: rotate(-4deg) scale(1.05); }
@media (max-width: 989px) {
  .k-bar .k-nav-list { flex: none; gap: 0; }
  .k-bar-seal { margin: 8px 6px 0; }
  .k-cloud { top: 28px; width: 104px; }
  .k-cloud span { font-size: 10px; }
}
/* "Shop all" lives on the big gingham cloud the collage has at the top left of the bestsellers (centre 232, 140
   of the 1672-wide picture); the nav's middle stays empty over the hero, and the button under the cards is
   for phones only, where that cloud is not on screen */
.k-cloud { display: none !important; }
.k-mag .k-qcloud { --u: calc(100cqw / 1672); position: absolute; z-index: 3; left: calc(var(--u) * 232); top: calc(var(--u) * 140); translate: -50% -50%;
  display: grid; place-items: center; width: calc(var(--u) * 300); height: calc(var(--u) * 170); text-decoration: none;
  font: 400 calc(var(--u) * 34)/1 "Alfa Slab One", "Zilla Slab", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #f7f1e6;
  text-shadow: 0 2px 0 rgba(47, 66, 84, .55), 0 0 14px rgba(47, 66, 84, .35); transition: transform .5s var(--ease-back); }
.k-mag .k-qcloud::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 31%; border-top: 2px dashed rgba(247, 241, 230, .8); }
.k-mag .k-qcloud:hover { transform: rotate(-3deg) scale(1.06); }
.k-shopall { display: none; }
@media (max-width: 989px) { .k-mag .k-qcloud { display: none; } .k-shopall { display: table; } }

/* the splash holds the page still (his iPhone note: the last picture and the hero didn't meet when the page moved
   under it), and the hero's Shop now waits for it like the switch does */
html.k-splashing .k-shopnow { opacity: 0; z-index: 120; transition: opacity .8s cubic-bezier(.33, 0, .2, 1); }
html.k-splashing.k-ui-in .k-shopnow { opacity: 1; }

/* the phone (his note, 2026-11-12): every bestseller in view, two across, no sideways slider */
@media (max-width: 989px) {
  .k-quilt .k-mag-grid, .k-mag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; overflow: visible; scroll-snap-type: none; padding: 0 14px; }
  .k-mag-item, .k-quilt .k-mag-item { flex: none; min-width: 0; }
  .k-mag-item::before { font-size: 11px; }
  .k-mag-name { font-size: 11px; letter-spacing: .04em; line-height: 1.2; }
  .k-mag-price { font-size: 11px; }
  .k-fly { width: 34%; top: -6%; right: -4%; }
}
@media (max-width: 989px) { .k-mag-info { flex-direction: column; align-items: flex-start; row-gap: 2px; } .k-mag-price { text-align: left; } }

/* "Made by hand" on the phone (his note, 2026-11-12: "like the PC exactly"): the kiosk picture whole at the top
   (the left 900 of the 1672 collage, rows 1581-2394), and the words on the same navy field under it, no floating card */
@media (max-width: 989px) {
  .k-quilt .k-story, .k-story { background-image: none !important; background-color: rgb(97 121 144); padding: 0 0 56px; }
  .k-story::before { content: ""; display: block; aspect-ratio: 900 / 813; margin: 0 0 6px;
    background: url("../img/c/page-1280.webp?h=fa153bcc") no-repeat; background-size: calc(100cqw * 1672 / 900) auto; background-position: 0 calc(-100cqw * 1581 / 900); }
  .k-story-text { background: none; box-shadow: none; border-radius: 0; padding: 4px 22px 0; }
}