/* Flavor pages (/sabores/<slug>/): editorial product page on the site's brown. One pão de mel, always slowly turning,
   cream type, dashed hairlines between blocks, no shadows. Loaded after press.css, which supplies the shared header
   (.site-head) and floating controls (cookies, contacts, back to top); everything here is scoped to html.fl. */
@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url("/wp-content/uploads/2024/12/Poppins-Light.ttf") format("truetype")}
.fl{
 --fl-cream:#f9f2e8;--fl-bg:#100904;--fl-brown:#3a2200;--fl-bark:#4c2e05;--fl-cork:#f9f2e82e;--fl-drift:#c9b59b;--fl-honey:#fdc323;
 --fl-g:calc(max(12px,(100% - 1440px) / 2) + 23px); /* content starts on the header brand: bar margin + border + padding */
 --fl-size:min(38vw,60svh,680px); /* the pão de mel: hero photo and story stage share it, so one can hand off to the other */
 --fl-x:min(25vw,440px); 
 --fl-hero-h:min(100svh,1080px); /* the hero never grows past this, even on very tall or zoomed-out screens */              /* how far the story stage travels left or right of centre */
 background:var(--fl-bg)}
.fl body{background:transparent;color:var(--fl-cream);font:300 16px/1.5 Poppins,system-ui,sans-serif}
/* The two browns of the site: the dark one is the page, the home brown glows through it in two large, slowly drifting
   light pools (one fixed layer behind everything, transform only; still with reduced motion). */
.fl body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(38% 32% at 22% 24%,var(--fl-brown),transparent 72%),radial-gradient(42% 36% at 78% 72%,#3a2200d9,transparent 72%)}
@media(prefers-reduced-motion:no-preference){.fl body::before{animation:fl-glow 28s ease-in-out infinite alternate}}
@keyframes fl-glow{50%{transform:translate(7%,-4%) rotate(6deg)}100%{transform:translate(-5%,5%) rotate(-4deg)}}
.fl :focus-visible{outline:2px solid var(--fl-cream);outline-offset:3px}
.fl :where(a,button):focus:not(:focus-visible){outline:none}
.fl main{display:block;overflow-x:clip;timeline-scope:--fl-story} /* the flying hero photo may pass the edge; clip, not a scroll container, so sticky still works */
/* uppercase, weight 400 (the lightest Poppins step above the body), tight leading: the system's label voice */
.fl :is(main h1,main h2,main h3,.fl-tag,.fl-serial,.fl-info-head,.fl-next,.fl-btn,.fl-footer nav,.fl-others span,.fl-core){font-weight:400;text-transform:uppercase;letter-spacing:0}
.fl :is(main,.fl-footer) :is(h1,h2,h3,p){margin:0}

/* Hero: name upper left with the product line under it, the pão de mel centred, serial on the right edge,
   info card lower left, next flavor lower right */
.fl-hero{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:18px;min-height:var(--fl-hero-h);padding:96px var(--fl-g) 84px}
.fl-hero-copy{grid-column:1/-1;position:relative;z-index:1}
.fl h1{max-width:none;padding-top:.08em;font-size:clamp(52px,10.4vw,168px);line-height:.9;letter-spacing:0;text-wrap:balance}
.fl-tag{margin-top:18px;font-size:12px;line-height:1.2}
.fl-object{position:relative;display:grid;place-items:center}
.fl-object::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,#5a380499,transparent);pointer-events:none}
.fl-photo{position:relative;display:block;height:auto;object-fit:contain}
.fl-hero .fl-object{view-timeline:--fl-hero block;position:absolute;inset:clamp(150px,22vh,220px) 0 0;z-index:0;pointer-events:none}
.fl-hero .fl-photo{width:var(--fl-size);aspect-ratio:1;object-fit:contain}
.fl-serial{position:absolute;right:var(--fl-g);top:50%;writing-mode:vertical-rl;translate:0 -50%;font-size:11px;line-height:1;color:var(--fl-cream)}
.fl-info{grid-column:1;grid-row:3;align-self:end;position:relative;z-index:1;max-width:380px;padding:24px;border:1px solid var(--fl-cork);border-radius:12px;background:#f9f2e80d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fl-info-head{padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--fl-cork);font-size:14px;line-height:1.1}
.fl-info p:not(.fl-info-head){font-size:16px;line-height:1.45}
.fl-next{grid-column:2;grid-row:3;align-self:end;position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-right:72px;padding:8px 20px 8px 8px;border:1px solid var(--fl-cork);border-radius:12px;color:var(--fl-cream);text-decoration:none;font-size:14px;line-height:1.1}
.fl-next-photo{width:64px;height:64px;object-fit:contain}
.fl-next-label{display:block;margin-bottom:6px;font-size:10px;color:var(--fl-drift)}
@media(hover:hover){.fl-next:hover{background:var(--fl-bark);border-color:var(--fl-bark)}}

.fl :is(.fl-story,.fl-order,.fl-others,.fl-footer){border-top:1px dashed var(--fl-cork)}
.fl main h2{font-size:clamp(34px,4.2vw,51px);line-height:.95;text-wrap:balance}

/* Story: the stage (the pão de mel) holds the whole screen while the chapters scroll over it. It moves right, left,
   centre (the filling: it opens), right, left, and each chapter's text takes the other side. On phones there is no stage:
   each chapter shows its own pão de mel above its text (.fl-art), and the page scrolls normally. Rest state (no JS, reduced motion): the whole pão de mel. */
.fl-story{display:grid;grid-template-columns:minmax(0,1fr)}
.fl-stage{grid-area:1/1;align-self:start;position:sticky;top:0;display:grid;place-items:center;height:100svh;overflow:clip}
.fl-rig,.fl-wrap{grid-area:1/1;width:var(--fl-size);aspect-ratio:1}
.fl-rig,.fl-spin{position:relative}
/* the same warm halo as the hero photo, so the light carries on into the story */
.fl-rig::before{content:"";position:absolute;z-index:-1;inset:-38%;border-radius:50%;background:radial-gradient(closest-side,#5a380499,transparent);pointer-events:none}
.fl-spin{width:100%;height:100%}
.fl-half,.fl-slab,.fl-core{position:absolute;inset:0}
.fl-half{width:100%;height:100%;object-fit:contain}
/* the halves overlap by 2px so no seam shows while the pão de mel is whole */
.fl-half-a{clip-path:inset(0 0 calc(50% - 1px) 0)}
.fl-half-b{clip-path:inset(calc(50% - 1px) 0 0 0)}
.fl-slab{inset:3%;border:1px dashed #f9f2e899;border-radius:50%;opacity:0}
.fl-core{display:grid;place-items:center;padding:0 16%;font-size:clamp(18px,2.2vw,32px);line-height:.95;text-align:center;text-wrap:balance;opacity:0}
.fl-wrap{overflow:visible;opacity:0}
.fl-wrap text{fill:var(--fl-cream);font:400 9.2px/1 Poppins,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase}
.fl-ring-spin{transform-box:view-box;transform-origin:50% 50%}
.fl-chapters{grid-area:1/1;position:relative;z-index:1}
.fl-chapter{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:100svh;padding:clamp(56px,8vw,96px) var(--fl-g)}
.fl-chapter:nth-child(2),.fl-chapter:nth-child(5){align-items:flex-end}
@media(min-width:768px){.fl-chapter:nth-child(5) .fl-chapter-copy{width:min(100%,30vw,440px)}}
.fl-chapter-copy{display:flex;flex-direction:column;gap:24px;width:min(100%,42vw,600px)}
.fl-chapter.fl-peak{min-height:170svh;justify-content:flex-start}
/* the filling copy holds still while the pão de mel opens in the middle */
.fl-peak .fl-chapter-copy{position:sticky;top:max(96px,calc(50svh - 160px));width:min(100%,30vw,440px)}
.fl main .fl-chapter :is(h2,h3){font-size:clamp(40px,5.4vw,76px);line-height:.92;text-wrap:balance}
.fl .fl-chapter p{max-width:18em;font-size:clamp(20px,2.1vw,29px);line-height:1.26;text-wrap:pretty}
.fl-story.is-live .fl-chapter-copy{opacity:.22;transition:opacity .4s ease-out}
.fl-story.is-live .is-current .fl-chapter-copy{opacity:1}

/* Order: one filled honey button and one honey outline */
.fl-order{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px 41px;padding:clamp(56px,8vw,96px) var(--fl-g)}
.fl-order h2{max-width:12ch}
.fl-actions{display:flex;flex-wrap:wrap;gap:12px}
.fl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--fl-honey);border-radius:999px;color:var(--fl-honey);text-decoration:none;font-size:13px;line-height:1;white-space:nowrap}
.fl-btn-solid{background:var(--fl-honey);color:var(--fl-bg);font-weight:600}
@media(hover:hover){.fl-btn:hover{background:#fdc3231f}.fl-btn-solid:hover{background:#ffd04d;border-color:#ffd04d}}

/* Other flavors: four across on wide screens, a swipe row on phones */
.fl-others{padding:clamp(56px,8vw,96px) var(--fl-g)}
.fl .fl-others h2{margin-bottom:31px}
.fl-others ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.fl-others a{display:flex;flex-direction:column;gap:14px;height:100%;padding:18px;border:1px solid var(--fl-cork);border-radius:12px;color:var(--fl-cream);text-decoration:none}
.fl-other-photo{width:100%;height:auto;aspect-ratio:1;object-fit:contain;transition:rotate .5s ease}
.fl-others span{font-size:14px;line-height:1.1}
@media(hover:hover){.fl-others a:hover{background:var(--fl-bark);border-color:var(--fl-bark)}.fl-others a:hover .fl-other-photo{rotate:12deg}}

.fl-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:24px var(--fl-g) calc(96px + env(safe-area-inset-bottom,0px))}
.fl-footer nav{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:12px}
.fl-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--fl-cream);text-decoration-color:var(--fl-drift);text-underline-offset:4px}
.fl-credit{font-size:12px;color:var(--fl-drift);text-transform:uppercase}

@media(max-width:1023px){
 .fl{--fl-g:31px}
 .fl-others ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
 .fl{--fl-x:0px}
 .fl-hero{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding:84px var(--fl-g) var(--fl-g)}
 .fl-hero .fl-object{position:relative;inset:auto;grid-row:2}
 .fl-hero .fl-photo{width:min(84vw,440px)}
 .fl-serial{display:none}
 .fl-info{grid-row:3;max-width:none}
 .fl-next{grid-column:1;grid-row:4;margin-right:0}
 .fl-order{flex-direction:column;align-items:stretch}
 .fl-actions{flex-direction:column}
 .fl-others ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--fl-g);margin-inline:calc(-1 * var(--fl-g));padding-inline:var(--fl-g);scrollbar-width:none}
 .fl-others ul::-webkit-scrollbar{display:none}
 .fl-others li{flex:0 0 40vw;scroll-snap-align:start}
}

/* Motion, transform and opacity only.
   - The pão de mel always turns slowly (time-based). The hero one and the story one start together at load and share the
     period, so they show the same angle and the hand-off between them does not jump.
   - The hero one turns away as the hero leaves (phones) or flies into the story (tablet and up).
   - The story scrubs one 1s keyframe track per layer with progress through the section (0 at its top, 1 at its end):
     natively through a view timeline, or through --p set by src/flavor-story.js (paused track, negative delay). */
@media(prefers-reduced-motion:no-preference){
 .fl-hero .fl-photo,.fl-spin{animation:fl-spin 48s linear infinite}
 .fl-ring-spin{animation:fl-ring 36s linear infinite}
 .fl-story .fl-rig{animation-name:fl-rig}
 .fl-story .fl-half-a{animation-name:fl-open-a}
 .fl-story .fl-half-b{animation-name:fl-open-b}
 .fl-story .fl-core{animation-name:fl-core}
 .fl-story .fl-slab:first-child{animation-name:fl-slab-1}
 .fl-story .fl-slab:nth-child(2){animation-name:fl-slab-2}
 .fl-story .fl-wrap{animation-name:fl-wrap}
 .fl-story :is(.fl-rig,.fl-half,.fl-core,.fl-slab,.fl-wrap){animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
 @supports(animation-timeline:view()){
  .fl-hero .fl-object{animation:fl-leave linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .fl-story{view-timeline:--fl-story block}
  .fl-story :is(.fl-rig,.fl-half,.fl-core,.fl-slab,.fl-wrap){animation-play-state:running;animation-delay:0s;animation-duration:auto;animation-timeline:--fl-story;animation-range:contain 0% contain 100%}
  /* tablet and up: the hero pão de mel flies into the story. The flight ends where and how the stage starts (right of
     centre, mid screen, turned -40deg at .8) at the very scroll point the story pins, and the two swap there. */
  @media(min-width:768px){
   .fl-hero .fl-object{animation-name:fl-fly,fl-gone;animation-timeline:view(),--fl-story;animation-range:exit 0% exit 100%,contain 0% contain 100%}
   .fl-story .fl-rig{animation-name:fl-rig,fl-handoff}
  }
 }
}
/* the light: the hero halo fades out as the hero leaves (or as it flies), the stage halo fades in as the story starts */
@media(prefers-reduced-motion:no-preference){
 .fl-story .fl-rig::before{animation:fl-halo-in 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
 @supports(animation-timeline:view()){
  .fl-hero .fl-object::before{animation:fl-halo-out linear both;animation-timeline:--fl-hero;animation-range:exit 0% exit 100%}
  .fl-story .fl-rig::before{animation:fl-halo-in linear both;animation-timeline:--fl-story;animation-range:contain 0% contain 100%}
 }
}
@keyframes fl-halo-out{0%,35%{opacity:1}100%{opacity:0}}
/* The hero halo has the stage halo's shape (a circle 176% of the pão de mel, centred on it), so on tablet and desktop the
   light travels with the flying pão de mel and the swap at the story start is seamless: no fade, no dip. On phones there
   is no flight; there the hero light fades out with the hero and the stage light fades in with the story. */
.fl-hero .fl-object::before{inset:auto;left:50%;top:50%;width:calc(var(--fl-size) * 1.76);aspect-ratio:1;translate:-50% -50%}
@media(max-width:767px){.fl-hero .fl-object::before{width:calc(min(84vw,440px) * 1.5)}}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
 .fl-hero .fl-object::before{animation:none;opacity:1}
 .fl-story .fl-rig::before{animation:fl-halo-story linear both;animation-timeline:--fl-story;animation-range:contain 0% contain 100%}
}}
/* the light goes out slowly as the pão de mel opens on the filling (third chapter, ~.30-.48 of the story) and stays out */
@keyframes fl-halo-in{0%{opacity:0}14%,30%{opacity:1}48%,100%{opacity:0}}
@keyframes fl-halo-story{0%,30%{opacity:1}48%,100%{opacity:0}}
/* no scroll timelines (flavor-story.js sets --hp): the hero flight scrubs from the same keyframes, paused, negative delay */
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
 .fl-hero.is-scrubbed .fl-object{animation:fl-fly 1s linear both paused;animation-delay:calc(var(--hp,0) * -1s)}
 .fl-hero.is-scrubbed .fl-object{opacity:calc(1 - var(--gone,0))}
}
@keyframes fl-spin{to{rotate:360deg}}
@keyframes fl-leave{to{transform:rotate(28deg) scale(.88)}}
/* from the centre of the hero area under the title (which starts at the clamp below) to the stage's first spot */
@keyframes fl-fly{to{transform:translate(var(--fl-x),calc(var(--fl-hero-h) / 2 + 50svh - clamp(150px,22vh,220px) / 2)) rotate(-40deg) scale(.8)}}
/* the swap: both on the story timeline (shared through timeline-scope on main), so the hero one is there up to the
   exact point the story pins and the stage one from just after it */
@keyframes fl-gone{0%{opacity:1}0.1%,100%{opacity:0}}
@keyframes fl-handoff{0%{opacity:0}0.1%,100%{opacity:1}}
/* chapters by progress: intro 0 (right), coating ~.21 (left), filling ~.44-.76 (just right of centre, clear of its copy: it opens), dough ~.84-.91
   (right, sitting on its two layers), packaging 1 (left of centre, inside a ring; its copy on the right) */
@keyframes fl-rig{
 0%{transform:translateX(var(--fl-x)) rotate(-40deg) scale(.8)}
 21%{transform:translateX(calc(var(--fl-x) * -1)) rotate(0deg) scale(1)}
 44%{transform:translateX(calc(var(--fl-x) * .35)) rotate(6deg) scale(.86)}
 62%{transform:translateX(calc(var(--fl-x) * .35)) rotate(10deg) scale(.8)}
 76%{transform:translateX(calc(var(--fl-x) * .35)) rotate(14deg) scale(.86)}
 84%,91%{transform:translateX(var(--fl-x)) rotate(26deg) scale(.82)}
 97%,100%{transform:translateX(calc(var(--fl-x) * -.32)) rotate(40deg) scale(.62)}
}
@keyframes fl-open-a{0%,46%{transform:translate(0,0) rotate(0deg)}58%,68%{transform:translate(0,-17%) rotate(-4deg)}77%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes fl-open-b{0%,46%{transform:translate(0,0) rotate(0deg)}58%,68%{transform:translate(0,17%) rotate(4deg)}77%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes fl-core{0%,48%{opacity:0;transform:scale(.7)}58%,68%{opacity:1;transform:scale(1)}75%,100%{opacity:0;transform:scale(.85)}}
/* the two layers of dough: dashed outlines that drop out from under the pão de mel, no 3D squash of the photo */
@keyframes fl-slab-1{0%,77%{opacity:0;transform:translateY(0)}85%,90%{opacity:1;transform:translateY(7%)}93%,100%{opacity:0;transform:translateY(0)}}
@keyframes fl-slab-2{0%,77%{opacity:0;transform:translateY(0)}85%,90%{opacity:1;transform:translateY(14%)}93%,100%{opacity:0;transform:translateY(0)}}
@keyframes fl-wrap{0%,92%{opacity:0;transform:translateX(calc(var(--fl-x) * -.32)) scale(1.15)}100%{opacity:1;transform:translateX(calc(var(--fl-x) * -.32)) scale(.86)}}
/* the ring of words keeps turning on its own, slowly (compositor-only) */
@keyframes fl-ring{to{rotate:360deg}}

/* Going from one flavor page to another: the pão de mel and the name glide between the two pages
   (cross-document view transition; browsers without it just navigate). */
@view-transition{navigation:auto}
.fl-hero .fl-photo{view-transition-name:fl-pao}
.fl h1{view-transition-name:fl-name}
::view-transition-old(fl-pao){animation:fl-pao-out .45s ease-in both}
::view-transition-new(fl-pao){animation:fl-pao-in .55s ease-out both}
::view-transition-old(fl-name){animation:fl-name-out .3s ease-in both}
::view-transition-new(fl-name){animation:fl-name-in .45s ease-out .1s both}
@keyframes fl-pao-out{to{opacity:0;transform:translateX(-30vw) rotate(-90deg) scale(.7)}}
@keyframes fl-pao-in{from{opacity:0;transform:translateX(30vw) rotate(90deg) scale(.7)}}
@keyframes fl-name-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes fl-name-in{from{opacity:0;transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .fl-other-photo{transition:none}
}
/* very large screens and zoomed-out browsers: the pão de mel and its travel stop growing (caps above); the hero and the
   chapters keep a sane height so the text never floats in a huge empty screen */

/* Phones: no pinned stage (a pinned pão de mel with fixed text makes the page feel stuck). Each chapter shows its own
   pão de mel above its text, in that chapter's state, and the page scrolls normally. Rest state (no scroll timelines or
   reduced motion): every pão de mel already in its final state. */
.fl-art{display:none}
@media(max-width:767px){
 .fl-stage{display:none}
 .fl-chapter,.fl-chapter:nth-child(n),.fl-chapter.fl-peak{display:block;min-height:0;padding:56px var(--fl-g)}
 .fl-chapter-copy,.fl-peak .fl-chapter-copy,.fl-story.is-live .fl-chapter-copy{position:static;gap:14px;width:auto;opacity:1}
 .fl main .fl-chapter :is(h2,h3){font-size:clamp(32px,10vw,44px);line-height:.98}
 .fl .fl-chapter p{max-width:none;font-size:clamp(18px,5vw,21px);line-height:1.38}
 .fl-art{view-timeline:--fl-art block;display:grid;place-items:center;width:min(66vw,320px);aspect-ratio:1;margin:0 auto 36px}
 .fl-art>*{grid-area:1/1}
 .fl-art-rig,.fl-art-spin{position:relative;width:100%;height:100%}
 .fl-art-rig::before{content:"";position:absolute;z-index:-1;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,#5a380499,transparent);pointer-events:none}
 .fl-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
 /* filling: open in half on the flavor's name (halves overlap 2px, as on the stage) */
 .fl-art-a{clip-path:inset(0 0 calc(50% - 1px) 0);transform:translateY(-17%) rotate(-4deg)}
 .fl-art-b{clip-path:inset(calc(50% - 1px) 0 0 0);transform:translateY(17%) rotate(4deg)}
 .fl-art-core{position:absolute;inset:0;display:grid;place-items:center;padding:0 16%;font-size:20px;font-weight:400;line-height:.95;text-align:center;text-transform:uppercase;text-wrap:balance}
 /* dough: two darker copies of the pão de mel stacked under it (they follow the photo's real outline, unlike a drawn
    circle). translate, not transform: it applies before the spin's rotate, so the offset stays straight down. */
 .fl-art-rig>.fl-art-spin{grid-area:1/1}
 .fl-art-layers .fl-art-rig{display:grid}
 .fl-art-layer{translate:0 9%;filter:brightness(.42)}
 .fl-art-layer+.fl-art-layer{translate:0 4.5%;filter:brightness(.62)}
 /* coating: a band of light crosses the chocolate (masked to the photo, so it only lights the pão de mel) */
 .fl-art-shine{position:absolute;inset:0;overflow:hidden;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
 .fl-art-shine::before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 38%,#fff4e333 44%,#fff4e3a6 50%,#fff4e333 56%,transparent 62%);transform:translateX(70%)}
 /* packaging: a smaller pão de mel inside the ring of words */
 .fl-art-wrapped{width:min(80vw,360px)}
 .fl-art-wrapped .fl-art-rig{transform:scale(.62)}
 .fl-art-ring{width:100%;height:100%;overflow:visible;transform:scale(.86)}
 .fl-art-ring text{fill:var(--fl-cream);font:400 9.2px/1 Poppins,system-ui,sans-serif;letter-spacing:.4px;text-transform:uppercase}
}
@media(max-width:767px) and (max-height:700px){
 .fl main .fl-chapter :is(h2,h3){font-size:30px}
 .fl .fl-chapter p{font-size:16px}
}
/* motion: each pão de mel turns in as its chapter scrolls in, then shows its state near the middle of the screen
   (transform and opacity only, on each art's own view timeline) */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
 .fl-art-spin{animation:fl-spin 48s linear infinite}
 @supports(animation-timeline:view()){
  .fl-art-rig{animation:fl-art-in linear both;animation-timeline:--fl-art;animation-range:entry 0% cover 40%}
  .fl-art-a,.fl-art-b{animation:fl-art-shut linear both;animation-timeline:--fl-art;animation-range:cover 30% cover 50%}
  .fl-art-core{animation:fl-art-fade linear both;animation-timeline:--fl-art;animation-range:cover 35% cover 50%}
  .fl-art-layer{animation:fl-art-stack linear both;animation-timeline:--fl-art;animation-range:cover 30% cover 50%}
  .fl-art-ring{animation:fl-art-ring linear both;animation-timeline:--fl-art;animation-range:cover 25% cover 45%}
  .fl-art-wrapped .fl-art-rig{animation-name:fl-art-in-small}
  .fl-art-coat .fl-art-rig{animation-name:fl-art-dip}
  .fl-art-layers .fl-art-rig{animation-name:fl-art-rise}
  .fl-art-shine::before{animation:fl-art-gloss linear both;animation-timeline:--fl-art;animation-range:cover 25% cover 60%}
 }
}
@keyframes fl-art-in{from{opacity:0;transform:rotate(-40deg) scale(.7)}}
@keyframes fl-art-dip{from{opacity:0;transform:translateY(-45%) scale(.92)}70%{transform:translateY(4%)}}
@keyframes fl-art-rise{from{opacity:0;transform:translateY(30%)}}
@keyframes fl-art-gloss{from{transform:translateX(-70%)}}
@keyframes fl-art-in-small{from{opacity:0;transform:rotate(-40deg) scale(.45)}}
@keyframes fl-art-shut{from{transform:none}}
@keyframes fl-art-fade{from{opacity:0}}
@keyframes fl-art-stack{from{opacity:0;translate:0 0}}
@keyframes fl-art-ring{from{opacity:0;transform:scale(1.15)}}