/* The play screen: a hand-lettered sentence whose blank is the name, one ink drawing where Kiki
   throws a key onto the keychain for every letter, and a row of outlined pills under it. Ink on
   the shop's cream; pastel only as off-register patches inside the drawn shapes. Everything is
   scoped to .pf and prefixed pf- so none of it can touch the shop's own parts. */
.pf{--pf-ink:#1B1917;--pf-ink2:#5F594F;--pf-cream:#F6F1EA;--pf-lilac:#C9BCEB;
  display:flex;flex-direction:column;background:var(--pf-cream);color:var(--pf-ink)}
.pf-line{font:700 clamp(30px,3.9vw,56px)/1.08 Gaegu,cursive;text-transform:uppercase;letter-spacing:.02em;
  width:min(92vw,1000px);margin:clamp(6px,2.2vh,24px) auto 0;padding-left:clamp(0px,12vw,170px);filter:url(#pf-boil)}
.pf-l1,.pf-l2{display:block}
.pf-l2{padding-left:clamp(28px,6vw,110px)}
.pf-nb{white-space:nowrap}
/* while the play screen is on a phone, the builder's bottom bar stays down: the screen has its own button */
body.pf-in-view .sticky-preview-bar{transform:translateY(100%);pointer-events:none}
.pf-ch{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
.pf-blank{position:relative;display:inline-block;min-width:1.2em;vertical-align:baseline}
.pf-mirror{visibility:hidden;white-space:pre;padding:0 .03em 0 .1em}
.pf-blank input{position:absolute;inset:0;width:100%;font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--pf-ink);
  background:transparent;border:0;padding:0 .03em 0 .1em;outline:0;border-radius:0}
.pf-blank::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.2em;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M2 6 C 20 2, 30 9, 50 5 S 80 2, 98 6' fill='none' stroke='%231B1917' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat}
.pf-blank:focus-within::after{filter:drop-shadow(0 3px 0 var(--pf-lilac))}
.pf-blank input::placeholder{color:#b3ada2}
/* the empty blank waiting for a name: a cursor at the start of it */
.pf.pf-wait .pf-blank::before{content:"";position:absolute;left:.1em;top:.14em;bottom:.14em;width:.08em;border-radius:.04em;background:var(--pf-ink);z-index:1;pointer-events:none}
.pf-stage{flex:1;display:grid;place-items:center;padding:0 16px;min-height:0}
.pf-scene{width:min(1120px,100%);height:auto;max-height:max(240px,calc(100svh - 500px));display:block;overflow:visible}
.pf-scene.pf-is-h .pf-only-v,.pf-scene.pf-is-v .pf-only-h{display:none}
.pf-key[data-i]{cursor:pointer}
.pf-key[data-i]:focus{outline:none}
.pf-key[data-i]:focus-visible{outline:3px solid var(--pf-lilac)}
.pf-ghost{opacity:0}
/* under the drawing: the colours on one side, the button on the other, each with its words */
.pf-bar{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:22px clamp(28px,6vw,96px);padding:10px clamp(16px,2.4vw,32px) 26px}
.pf-colours,.pf-go{display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-go{align-items:flex-start}
.pf-label{font:700 22px/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.03em}
.pf-label b{font-weight:700;margin-left:6px;padding:2px 10px 1px;border:1.5px solid var(--pf-ink);border-radius:999px;font-size:17px;vertical-align:2px}
.pf-label b:empty{display:none}
.pf-dots{display:flex;gap:10px;flex-wrap:wrap}
.pf-dot{width:38px;height:38px;border-radius:50%;border:2px solid var(--pf-ink);padding:0;cursor:pointer}
.pf-dot[aria-checked="true"]{box-shadow:0 0 0 3px var(--pf-cream),0 0 0 5px var(--pf-ink)}
.pf-tip,.pf-facts,.pf-more{margin:0;font-size:13.5px;line-height:1.45;color:var(--pf-ink2);max-width:40ch}
.pf-facts b{color:var(--pf-ink)}
.pf-more a,.pf-link{color:var(--pf-ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.pf-pills{display:flex;gap:10px;flex-wrap:wrap}
.pf-pill{font:600 13px/1 Archivo,sans-serif;letter-spacing:.05em;text-transform:uppercase;min-height:44px;padding:0 22px;border:2px solid var(--pf-ink);
  border-radius:999px;background:transparent;color:var(--pf-ink);display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none}
.pf-pill.pf-big{min-height:54px;padding:0 28px;font-size:15px}
.pf-pill:hover{background:#ebe6de}
.pf-pill:active{transform:translateY(2px)}
.pf-pill.pf-ink{background:var(--pf-ink);color:var(--pf-cream);box-shadow:5px 5px 0 var(--pf-lilac)}
.pf-pill.pf-ink:hover{background:#34302b}
.pf-pill:focus-visible,.pf-dot:focus-visible,.pf-link:focus-visible{outline:3px solid var(--pf-lilac);outline-offset:3px}
/* Kiki's words: hand-lettered, inside the bubble drawn in the scene */
.pf-said{height:100%;display:flex;align-items:center;font-family:Gaegu,cursive;font-weight:700;line-height:1.08;text-transform:uppercase;letter-spacing:.02em;color:var(--pf-ink);text-wrap:balance}
.pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the 3D view in a sheet over the page */
.pf-3d{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px 22px 22px;border:3px solid var(--pf-ink);border-radius:26px;
  background:var(--pf-cream);color:var(--pf-ink);box-shadow:10px 9px 0 var(--pf-lilac)}
.pf-3d::backdrop{background:rgba(27,25,23,.5)}
.pf-3d-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pf-3d-head h2{margin:0;font:700 clamp(28px,4vw,38px)/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.02em}
.pf-3d-host{position:relative;height:min(52vh,420px);margin:12px 0 8px;border:2px solid var(--pf-ink);border-radius:18px;background:#FFFDF9;overflow:hidden;cursor:grab}
.pf-3d-host[data-state="loading"]::after,.pf-3d-host[data-state="fail"]::after{position:absolute;inset:0;display:grid;place-items:center;font:700 24px Gaegu,cursive;text-transform:uppercase}
.pf-3d-host[data-state="loading"]::after{content:"Loading the 3D view‚6"}
.pf-3d-host[data-state="fail"]::after{content:"The 3D view isn9t available on this browser"}
.pf-3d-note{margin:0 0 14px;font-size:13px;color:var(--pf-ink2)}
@media (prefers-reduced-motion:no-preference){
  .pf-kbody{animation:pf-breathe 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
  .pf-eyes{animation:pf-blink 4.4s infinite;transform-box:fill-box;transform-origin:center}
  .pf-tail{animation:pf-sway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
  .pf-spare{animation:pf-spare 9s ease-in-out 5s infinite;transform-box:fill-box;transform-origin:50% 100%}
  .pf-held{transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
  .pf-held.pf-gone{opacity:0;transform:scale(.3)}
  .pf-kiki.pf-hop{animation:pf-hop .38s ease-out;transform-box:fill-box;transform-origin:50% 100%}
  .pf-key.pf-land{animation:pf-land .32s ease-out;transform-box:fill-box;transform-origin:50% 100%}
  .pf-key.pf-press{animation:pf-press .24s ease-out;transform-box:fill-box;transform-origin:50% 100%}
  .pf-key.pf-wig{animation:pf-wig .42s ease-in-out both;transform-box:fill-box;transform-origin:50% 100%}
  .pf-clk{animation:pf-clk .55s ease-out forwards;transform-box:fill-box;transform-origin:center}
  .pf-caret,.pf.pf-wait .pf-blank::before{animation:pf-caret 1.1s steps(1) infinite}
  .pf-kiki.pf-dance{animation:pf-dance .9s ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
  .pf-bubble.pf-pop{animation:pf-pop .42s cubic-bezier(.3,1.5,.5,1)}
  .pf-nudge{animation:pf-nudge .7s ease-in-out 2}
  .pf-line.pf-writing .pf-ch{animation:pf-write .38s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 32ms)}
}
@keyframes pf-breathe{50%{transform:scaleY(1.018)}}
@keyframes pf-blink{0%,91%,100%{transform:none}94%{transform:scaleY(.1)}}
@keyframes pf-sway{50%{transform:rotate(9deg)}}
@keyframes pf-spare{0%,85%,100%{transform:none}89%{transform:translateY(-26px) rotate(-12deg)}94%{transform:scale(1.08,.9)}97%{transform:none}}
@keyframes pf-hop{40%{transform:translateY(-26px) scale(.97,1.04)}75%{transform:scale(1.05,.93)}}
@keyframes pf-land{40%{transform:scale(1.12,.84)}75%{transform:scale(.96,1.05)}}
@keyframes pf-press{45%{transform:translateY(6px) scale(1.04,.92)}}
@keyframes pf-wig{25%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}}
@keyframes pf-clk{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes pf-dance{20%{transform:rotate(-7deg) translateY(-10px)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg) translateY(-6px)}}
@keyframes pf-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes pf-nudge{25%{transform:rotate(-2.5deg) scale(1.03)}60%{transform:rotate(2deg) scale(1.03)}}
@keyframes pf-caret{50%{opacity:0}}
@keyframes pf-write{from{opacity:0;transform:translateY(-.4em) rotate(-14deg)}}
@media (max-width:760px){
  .pf{min-height:0}
  .pf-line{padding-left:0;font-size:clamp(28px,8vw,40px)}
  .pf-l2{padding-left:.8em}
  .pf-scene{max-height:none;width:100%}
  .pf-bar{flex-direction:column;align-items:stretch;gap:20px;padding-bottom:26px}
  .pf-go{align-items:stretch}
  .pf-go .pf-pills{flex-direction:column}
  .pf-pill.pf-big{justify-content:center}
  .pf-dot{width:42px;height:42px}
  .pf-3d{padding:16px}
  .pf-3d-host{height:300px}
}
/* the series tabs (top of the play screen and on the builder): each tab carries a few of its own keys */
.series-switch{display:inline-flex;gap:4px;padding:4px;border:2.5px solid #1B1917;border-radius:999px;background:#FFFDF9;max-width:100%}
.pf-series{align-self:center;margin-top:clamp(8px,1.6vh,18px)}
#build .series-switch{margin-top:14px}
.ss-tab{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 12px;border:0;border-radius:999px;background:transparent;color:#1B1917;
  font:700 20px/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.ss-tab:hover{background:#ebe6de}
.ss-bold[aria-pressed="true"]{background:#1B1917;color:#F6F1EA}
.ss-dreamy[aria-pressed="true"]{background:#C9BCEB}
.ss-tab:focus-visible{outline:3px solid #C9BCEB;outline-offset:2px}
.ss-keys{display:inline-flex;padding-left:4px}
.ss-keys i{width:15px;height:15px;margin-left:-4px;border-radius:4px;border:2px solid #1B1917;transform:rotate(var(--r))}
.ss-bold[aria-pressed="true"] .ss-keys i{border-color:#F6F1EA}
@media (max-width:420px){ .ss-tab{font-size:17px;gap:7px;padding:0 12px 0 9px} .ss-keys i:nth-child(n+4){display:none} }
/* Dreamy Wonderland's sky: in with the series, out with Bold */
.pf-dm{opacity:0;transform:translateY(26px) scale(.5);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s,transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d) * 80ms)}
html[data-series="dreamy"] .pf-dm{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html[data-series="dreamy"] .pf-dm > g{animation:pf-float 5.5s ease-in-out infinite;animation-delay:calc(var(--d) * -.8s);transform-box:fill-box;transform-origin:center}
}
@media (prefers-reduced-motion:reduce){ .pf-dm{transition:none} }
@keyframes pf-float{50%{transform:translateY(-9px) rotate(4deg)}}
@media (max-width:420px){ #build .series-switch{display:flex} #build .ss-tab{flex:1 1 auto;justify-content:center;padding:0 10px} #build .ss-keys{display:none} }
/* the letter colour row (Dreamy only): dots, each with an "A" in ink so a pale one still reads */
.pf-letters{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pf-dots--sm .pf-dot{display:grid;place-items:center;font:700 19px/1 Gaegu,cursive;color:#1B1917}

/* the tabs under the drawing: Base, Letters (Dreamy), Accessory; each wears a swatch of its pick */
.pf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pf-tabs [data-pt]{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px 0 8px;border:2px solid #1B1917;border-radius:999px;
  background:transparent;color:#1B1917;font:700 18px/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.pf-tabs [data-pt][hidden]{display:none}
.pf-tabs [aria-selected="true"]{background:#1B1917;color:#F6F1EA}
.pf-tabs [data-pt]:focus-visible{outline:3px solid #C9BCEB;outline-offset:2px}
.pf-tsw{width:20px;height:20px;border-radius:6px;border:2px solid currentColor;flex:none;display:grid;place-items:center;font-style:normal;font-size:15px;line-height:1}
.pf-tsw--a{border-color:transparent;-webkit-text-stroke:1.4px #1B1917;paint-order:stroke}
.pf-pane{display:flex;flex-direction:column;gap:8px;min-height:88px}
.pf-pane[hidden]{display:none}
/* the accessory keys: a drawing of each, its name and its price */
.pf-carry{display:flex;gap:8px;flex-wrap:wrap}
.pf-cs{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;min-height:48px;padding:5px 12px 5px 8px;
  border:2px solid #1B1917;border-radius:14px;background:#FFFDF9;color:#1B1917;cursor:pointer;text-align:left}
.pf-cs svg{grid-row:1 / 3;width:46px;height:20px;color:#F6F1EA}
.pf-cs b{font:700 17px/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.02em}
.pf-cs small{font-size:12px;color:#5F594F}
.pf-cs[aria-checked="true"]{background:#B6DCC8;box-shadow:4px 4px 0 #1B1917}
.pf-cs:focus-visible{outline:3px solid #C9BCEB;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .pf-carry-art.pf-drop{animation:pf-drop .5s cubic-bezier(.3,1.5,.5,1)}
}
@keyframes pf-drop{0%{transform:translate(-14px,-46px) rotate(-14deg);opacity:0}60%{opacity:1}}
@media (max-width:760px){ .pf-tabs [data-pt]{flex:1 1 auto;justify-content:center;padding:0 10px 0 7px;font-size:17px} .pf-cs{flex:1 1 30%} }

/* a little photo button on each accessory key; hover, focus or a tap pins up a polaroid of the real one */
.pf-cs-wrap{position:relative;display:flex}
.pf-peek{position:absolute;top:-9px;right:-9px;z-index:2;width:28px;height:28px;padding:0;border:2px solid #1B1917;border-radius:50%;background:#F1D488;cursor:zoom-in;display:grid;place-items:center}
.pf-peek::after{content:"";position:absolute;inset:-8px}
.pf-peek svg{width:16px;height:16px;fill:none;stroke:#1B1917;stroke-width:2.2;stroke-linejoin:round}
.pf-peek:focus-visible{outline:3px solid #C9BCEB;outline-offset:2px}
.pf-polaroid{position:absolute;z-index:30;bottom:calc(100% + 12px);right:-30px;width:210px;padding:8px 8px 6px;background:#fff;border:2px solid #1B1917;border-radius:6px;
  box-shadow:6px 6px 0 #C9BCEB;transform:rotate(-3deg) translateY(8px) scale(.9);transform-origin:80% 100%;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s,transform .2s cubic-bezier(.3,1.5,.5,1),visibility .16s}
.pf-polaroid::before{content:"";position:absolute;top:-10px;left:50%;width:62px;height:18px;margin-left:-31px;background:rgba(201,188,235,.75);transform:rotate(4deg)}
.pf-polaroid img{display:block;width:100%;height:auto;border:1.5px solid #1B1917}
.pf-polaroid em{display:block;margin-top:4px;text-align:center;font:700 18px/1 Gaegu,cursive;font-style:normal;text-transform:uppercase;color:#1B1917}
.pf-peek:hover .pf-polaroid,.pf-peek:focus .pf-polaroid{opacity:1;visibility:visible;transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){.pf-polaroid{transition:none}}
@media (max-width:760px){ .pf-cs-wrap{flex:1 1 30%} .pf-cs-wrap .pf-cs{flex:1} .pf-cs-wrap:first-child .pf-polaroid{right:auto;left:-6px;transform-origin:20% 100%} }
/* a short window (a small laptop with its browser bars): a smaller headline and drawing, so the tabs,
   the choices and the button all sit in the first screen */
@media (max-height:820px) and (min-width:761px){
  .pf-line{font-size:clamp(26px,3.2vw,44px)}
  .pf-series .ss-tab{min-height:38px;font-size:18px}
  .pf-scene{max-height:max(200px,calc(100svh - 470px))}
  .pf-pane{min-height:80px}
}
/* short and wide (most laptops): the choices stand beside the drawing instead of under it, so the
   drawing keeps its size and the whole hook fits the first screen */
@media (max-height:820px) and (min-width:1100px){
  .pf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:8px;
    width:min(1320px,100%);margin:0 auto;padding:0 clamp(12px,2vw,28px)}
  .pf-series,.pf-line{grid-column:1 / -1}
  .pf-series{justify-self:center}
  .pf-stage{grid-column:1;padding:0}
  .pf-scene{max-height:calc(100svh - 330px)}
  .pf-bar{grid-column:2;flex-direction:column;align-items:stretch;justify-content:center;gap:18px;padding:0 0 18px}
  .pf-go{align-items:flex-start}
}
/* the NEW! sticker on the newest series' tab: a hand-drawn starburst, stuck on at a tilt, that
   gives a little wiggle now and then */
.ss-tab{position:relative}
.ss-new{position:absolute;top:-24px;right:-26px;width:56px;height:56px;display:grid;place-items:center;transform:rotate(12deg);pointer-events:none;z-index:2}
.ss-new svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ss-new b{position:relative;font:700 15px/1 Gaegu,cursive;color:#1B1917;letter-spacing:.02em}
.ss-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){ .ss-new{animation:ss-wiggle 3.2s ease-in-out infinite} }
@keyframes ss-wiggle{0%,78%,100%{transform:rotate(12deg)}84%{transform:rotate(-4deg) scale(1.12)}90%{transform:rotate(18deg) scale(1.05)}95%{transform:rotate(9deg)}}
@media (max-width:420px){ .ss-new{top:-18px;right:-8px;width:42px;height:42px} .ss-new b{font-size:12px} }

/* what it is, in one plain line under the headline */
.pf-value{margin:8px auto 0;padding:0 16px;max-width:60ch;text-align:center;font-size:clamp(14px,1.25vw,17px);line-height:1.4;color:#5F594F}
.pf-value b{color:#1B1917}
/* the shop's real numbers beside the button */
.pf-proof{margin:0;font-size:13.5px;color:#5F594F}
.pf-proof b{color:#1B1917;font-weight:700}
/* the polaroid in the drawing */
.pf-pol{cursor:zoom-in}
.pf-pol:focus{outline:none}
.pf-pol:focus-visible rect:first-child{stroke:#9C86D6}
@media (prefers-reduced-motion:no-preference){ .pf-pol > g{transition:transform .2s} }
.pf-photo-stage{position:relative;margin:12px 0 8px}
.pf-photo-stage img{display:block;width:100%;height:min(62vh,520px);object-fit:contain;background:#FFFDF9;border:2px solid #1B1917;border-radius:14px;touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.pf-photo-nav{position:absolute;top:50%;left:10px;width:46px;height:46px;margin-top:-23px;border:2px solid #1B1917;border-radius:50%;background:#F6F1EA;
  font:700 30px/1 Gaegu,cursive;color:#1B1917;cursor:pointer;display:grid;place-items:center;box-shadow:3px 3px 0 #C9BCEB}
.pf-photo-next{left:auto;right:10px}
.pf-photo-nav[hidden]{display:none}
.pf-photo-nav:focus-visible{outline:3px solid #C9BCEB;outline-offset:2px}
/* the phone dock: name, price and Make it while the first screen is up and its button is not */
.pf-dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#F6F1EA;border-top:2.5px solid #1B1917}
.pf-dock[hidden]{display:none}
.pf-dock-what{display:flex;flex-direction:column;min-width:0}
.pf-dock-what b{font:700 20px/1 Gaegu,cursive;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-dock-what small{font-size:13px;color:#5F594F}
.pf-dock .pf-pill{min-height:46px;padding:0 22px}
@media (max-height:820px) and (min-width:1100px){ .pf-value{grid-column:1 / -1;margin-top:2px} }

/* a new customer photo flips in, like a card turned over */
@media (prefers-reduced-motion:no-preference){
  .pf-pol-card.pf-flip{animation:pf-flip .5s cubic-bezier(.3,1.4,.5,1);transform-box:fill-box;transform-origin:50% 0}
}
@keyframes pf-flip{0%{transform:rotate(-10deg) scale(.86);opacity:.2}100%{transform:none;opacity:1}}

/* the page's one H1: what this is, in the words people search for, small above Kiki's sentence */
.pf-eyebrow{margin:clamp(8px,1.6vh,16px) auto 0;padding:0 16px;text-align:center;font:700 clamp(15px,1.4vw,19px)/1.2 Gaegu,cursive;text-transform:uppercase;letter-spacing:.08em;color:#5F594F}
@media (max-height:820px) and (min-width:1100px){ .pf-eyebrow{grid-column:1 / -1;margin-top:6px} }