/* Liberdade FM 94,7 · a fair stall hung with cordel booklets */
:root {
  --kraft: #d9c3a0; --news: #ece3cf; --ink: #1b1712; --ink2: #4a3b2a; --clay: #b5532c; --clay-d: #8f3d1d;
  --red: #c8323a; --yel: #f2c53d; --grn: #2f8a4e; --grn-d: #23693b; --string: #8a6a3e; --bag: #b88a56; --wood: #6b4a2b;
  --out: cubic-bezier(.16, 1, .3, 1); --quart: cubic-bezier(.25, 1, .5, 1); --inout: cubic-bezier(.65, 0, .35, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .6' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E");
  --chita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Crect width='46' height='46' fill='%23c8323a'/%3E%3Cg fill='%232f8a4e'%3E%3Cellipse cx='18' cy='6' rx='4.2' ry='1.9' transform='rotate(-28 18 6)'/%3E%3Cellipse cx='3' cy='17' rx='4.2' ry='1.9' transform='rotate(40 3 17)'/%3E%3Cellipse cx='40' cy='25' rx='4.2' ry='1.9' transform='rotate(-35 40 25)'/%3E%3Cellipse cx='27' cy='40' rx='4.2' ry='1.9' transform='rotate(30 27 40)'/%3E%3Ccircle cx='37' cy='9' r='1.3'/%3E%3Ccircle cx='9' cy='36' r='1.3'/%3E%3C/g%3E%3Cg fill='%23f2c53d'%3E%3Ccircle cx='11' cy='8' r='3'/%3E%3Ccircle cx='15.3' cy='11.1' r='3'/%3E%3Ccircle cx='13.6' cy='16.1' r='3'/%3E%3Ccircle cx='8.4' cy='16.1' r='3'/%3E%3Ccircle cx='6.7' cy='11.1' r='3'/%3E%3C/g%3E%3Ccircle cx='11' cy='12.2' r='1.8' fill='%23c8323a'/%3E%3Cg fill='%23ece3cf'%3E%3Ccircle cx='32' cy='28.5' r='2.6'/%3E%3Ccircle cx='35.7' cy='31.2' r='2.6'/%3E%3Ccircle cx='34.3' cy='35.6' r='2.6'/%3E%3Ccircle cx='29.7' cy='35.6' r='2.6'/%3E%3Ccircle cx='28.3' cy='31.2' r='2.6'/%3E%3C/g%3E%3Ccircle cx='32' cy='32.3' r='1.6' fill='%23f2c53d'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kraft); background-image: var(--fibre), var(--grain); color: var(--ink); font: 400 16px/1.5 'Sanchez', 'Rockwell', Georgia, serif; overflow-x: hidden; }
body.lock { overflow: hidden; }
::selection { background: var(--yel); color: var(--ink); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- the stall: posts, sign, painted word ---------- */
.stall { position: relative; overflow: hidden; }
.stall::before, .stall::after { content: ''; position: absolute; top: 60px; bottom: 200px; width: 14px; z-index: 1;
  background: linear-gradient(90deg, #4f3520, #8a6440 40%, #6b4a2b 70%, #3f2a18); box-shadow: 4px 0 8px rgba(40, 25, 10, .25); }
.stall::before { left: 8px; } .stall::after { right: 8px; }
.plank { position: relative; z-index: 6; display: flex; align-items: center; gap: 28px; min-height: 66px; padding: 9px 40px;
  background: #1b1712 repeating-linear-gradient(0deg, rgba(236, 227, 207, .028) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
  color: var(--news); box-shadow: 0 5px 0 #0e0b08, 0 16px 24px -10px rgba(40, 25, 10, .6); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 46px; width: auto; display: block; }
.onair { margin: 0; font-size: 15px; line-height: 1.35; color: #d8ccb4; min-width: 0; }
.onair .oa-k { display: inline-block; margin-right: 8px; padding: 3px 7px 2px; background: var(--yel); color: var(--ink); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
.onair b { font-weight: 400; font-size: 18px; color: var(--news); }
.onair .oa-t { color: #bfb196; font-style: italic; }
.plank-r { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; }
.live { color: var(--yel); font-size: 15px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s var(--quart); }
.live:hover { color: var(--news); }
.lang { display: flex; }
.lang button { background: transparent; border: 1px solid rgba(236, 227, 207, .45); color: var(--news); padding: 6px 10px; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.lang button + button { border-left: 0; }
.lang button:first-child { border-radius: 3px 0 0 3px; } .lang button:last-child { border-radius: 0 3px 3px 0; }
.lang button[aria-pressed="true"] { background: var(--news); color: var(--ink); }
.painted { position: absolute; z-index: 0; top: 58px; left: -1.5vw; right: 0; overflow: hidden; margin: 0; font: 400 clamp(150px, 23vw, 340px)/.8 'Ultra', Georgia, serif; letter-spacing: -.02em;
  color: rgba(27, 23, 18, .06); white-space: nowrap; pointer-events: none; transform: rotate(-3deg); user-select: none; }

/* ---------- rows: header line, string, pegs, booklets ---------- */
.row { position: relative; z-index: 2; }
.row-h { display: flex; align-items: baseline; gap: 24px; padding: 10px 46px 0; }
.row-h h1, .row-h h2 { margin: 0; font: 400 24px/1.1 'Sanchez', Georgia, serif; white-space: nowrap; letter-spacing: -.01em; }
.row-h em { color: var(--clay-d); }
.row-h p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2); max-width: 78ch; }
.line { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--string) rgba(0, 0, 0, 0); }
.line-in { position: relative; min-width: 100%; }
.string { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
.string path { fill: none; stroke: var(--string); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgba(40, 25, 10, .3)); }
.peg { position: absolute; z-index: 60; width: 14px; height: 34px; border-radius: 3px 3px 5px 5px; pointer-events: none;
  background: linear-gradient(90deg, #a87a45 0 45%, #4a321b 45% 55%, #c99a5c 55%); box-shadow: 0 2px 2px rgba(40, 25, 10, .4), inset 0 -2px 0 rgba(0, 0, 0, .15); }
.peg::after { content: ''; position: absolute; left: 2px; right: 2px; top: 12px; height: 5px; border-radius: 2px; background: linear-gradient(#d9d4c8, #8b867c); }

.cv { position: absolute; display: flex; flex-direction: column; width: 172px; height: 256px; padding: 10px 10px 0; margin: 0; border: 0; text-align: left;
  background-color: var(--paper, var(--news)); background-image: var(--grain); color: var(--ink); font: 400 14px/1.3 'Sanchez', Georgia, serif; overflow: hidden;
  transform-origin: 50% 0; transform: rotate(var(--r, 0deg)); cursor: grab; touch-action: pan-x;
  box-shadow: inset 0 0 0 1px rgba(27, 23, 18, .14), 2px 2px 0 #e7dcc4, 3px 3px 0 rgba(27, 23, 18, .25), 0 14px 20px -10px rgba(40, 25, 10, .6);
  transition: transform .55s var(--out), box-shadow .4s var(--quart); }
.cv:hover { animation: sway 1.1s var(--quart); }
.cv:focus-visible { outline: 3px solid var(--clay-d); outline-offset: 4px; }
.cv.drag { transition: none; cursor: grabbing; animation: none; }
.cv.ready { box-shadow: inset 0 0 0 2px var(--clay), 2px 2px 0 #e7dcc4, 0 30px 40px -14px rgba(40, 25, 10, .7); }
.cv.gone { visibility: hidden; }
.cv.unpeg { animation: unpeg .26s var(--quart) forwards; }
.cv.rehang { animation: rehang 1.25s var(--out); }
@keyframes sway { 0% { transform: rotate(var(--r)); } 30% { transform: rotate(calc(var(--r) + 3.5deg)); } 62% { transform: rotate(calc(var(--r) - 2deg)); } 100% { transform: rotate(var(--r)); } }
@keyframes unpeg { to { transform: translateY(22px) rotate(calc(var(--r) + 9deg)); } }
@keyframes rehang { 0% { transform: translateY(-26px) rotate(calc(var(--r) - 10deg)); } 35% { transform: translateY(0) rotate(calc(var(--r) + 6deg)); } 60% { transform: rotate(calc(var(--r) - 3deg)); } 80% { transform: rotate(calc(var(--r) + 1.2deg)); } 100% { transform: rotate(var(--r)); } }
.cv > span:not(.cv-bagmark) { width: 100%; min-width: 0; }
.cv-imp { display: flex; justify-content: space-between; gap: 22px; padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 9.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cv-art { position: relative; display: block; flex: none; }
.wc { display: block; width: 100%; height: 68px; }
.k-news .wc { height: 68px; }
.cv-face .wc { height: 96px; }
.wc .k { fill: var(--ink); } .wc .p { fill: var(--paper, var(--news)); } .wc .ks { stroke: var(--ink); } .wc .ps { stroke: var(--paper, var(--news)); fill: none; }
.cv-num { position: absolute; right: -5px; bottom: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--paper, var(--news)); border: 2px solid var(--ink); font: 400 24px/36px 'Ultra', Georgia, serif; text-align: center; }
.cv-h { display: block; margin-top: 11px; padding-right: 2px; font-size: 14px; line-height: 1.3; text-wrap: pretty; }
.cv-d { display: block; margin-top: auto; padding: 6px 0 9px; border-top: 1px solid var(--ink); font-style: italic; font-size: 12px; }
.cv-t { display: block; margin-top: 10px; font: 400 24px/1.02 'Ultra', Georgia, serif; letter-spacing: -.015em; hyphens: manual; }
.cv-s { display: block; margin-top: 6px; font-style: italic; font-size: 12.5px; line-height: 1.3; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-strip { display: block; margin: auto -10px 0; padding: 7px 10px 8px; background: var(--ink); color: var(--paper, var(--news)); font-size: 12px; line-height: 1.25; letter-spacing: .02em; }
.cv-strip.cv-ex { background: transparent; color: var(--clay-d); border-top: 2px solid var(--clay-d); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.cv-bagmark { position: absolute; top: 44px; right: 8px; padding: 4px 7px 3px; border: 2px solid var(--clay-d); color: var(--clay-d); background: rgba(236, 227, 207, .82); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transform: rotate(8deg); }
.k-pod .cv-t { font-size: 30px; }

/* the load: the string is drawn, then the booklets drop onto their pegs */
.enter .string path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--inout) .1s forwards; }
.enter .peg { animation: pegin .4s var(--out) both; animation-delay: calc(var(--d, 0) * 1ms + 700ms); }
.enter .line .cv { animation: drop 1.1s var(--out) both; animation-delay: calc(var(--i) * 70ms + 760ms); }
.enter #r-casa .line .cv { animation-delay: calc(var(--i) * 60ms + 1000ms); }
.enter .line .cv:hover { animation: sway 1.1s var(--quart); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pegin { from { opacity: 0; transform: translateY(-8px); } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r) - 12deg)); } 40% { opacity: 1; transform: translateY(0) rotate(calc(var(--r) + 5deg)); } 65% { transform: rotate(calc(var(--r) - 2.5deg)); } 85% { transform: rotate(calc(var(--r) + 1deg)); } 100% { transform: rotate(var(--r)); } }

/* ---------- the table with the chita cloth ---------- */
.table { position: relative; z-index: 3; margin-top: 4px; }
.cloth { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; gap: 40px; min-height: 250px; padding: 34px 46px 60px;
  background: var(--chita); background-size: 46px 46px; box-shadow: inset 0 16px 0 rgba(27, 23, 18, .28), inset 0 18px 18px -6px rgba(27, 23, 18, .35); }
.cloth::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 20px; z-index: 1;
  background: radial-gradient(circle at 10px 0, var(--yel) 9px, rgba(0, 0, 0, 0) 9.5px) 0 0 / 20px 20px repeat-x; }
.slip { position: relative; z-index: 2; width: 384px; max-width: 100%; margin: 6px 0 0; padding: 16px 20px 14px; background: var(--news); background-image: var(--grain); color: var(--ink);
  font-size: 13.5px; line-height: 1.5; transform: rotate(-1.2deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 12px 18px -8px rgba(27, 23, 18, .6); }
.slip p { margin: 0 0 8px; }
.slip .slip-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-d); }
.slip .slip-n { font-size: 12.5px; color: var(--ink2); }
.slip .legal { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed rgba(27, 23, 18, .4); font-size: 13px; }
.slip a { text-underline-offset: 3px; }
.sacola { position: relative; z-index: 2; display: block; width: 262px; min-height: 236px; padding: 30px 20px 18px; border: 0; text-align: left; cursor: pointer;
  background: var(--bag) linear-gradient(90deg, rgba(27, 23, 18, .12) 0 7%, rgba(0, 0, 0, 0) 7% 93%, rgba(27, 23, 18, .14) 93%); color: var(--ink);
  transform: rotate(1.6deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .12), 0 20px 26px -12px rgba(27, 23, 18, .75); transition: transform .5s var(--out); }
.sacola::before { content: ''; position: absolute; inset: 0; background-image: var(--fibre); pointer-events: none; }
.sacola:hover { transform: rotate(0deg) translateY(-4px); }
.sacola.bump { animation: bump .7s var(--out); }
@keyframes bump { 0% { transform: rotate(1.6deg) scale(1); } 30% { transform: rotate(-2deg) scale(1.05); } 100% { transform: rotate(1.6deg) scale(1); } }
.bag-top { position: absolute; left: 0; right: 0; top: -10px; height: 12px; background: linear-gradient(-45deg, var(--bag) 6px, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, var(--bag) 6px, rgba(0, 0, 0, 0) 0); background-size: 12px 12px; background-position: left bottom; }
.bag-k { position: relative; display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.bag-list { position: relative; display: block; }
.bl { display: block; padding: 5px 0; border-bottom: 1px dashed rgba(27, 23, 18, .45); font-size: 14px; line-height: 1.35; }
.bl-sum { font-style: italic; font-size: 12.5px; border-bottom: 0; }
.bl-empty { font-style: italic; font-size: 13.5px; border-bottom: 0; }
.bag-go { position: relative; display: block; margin-top: 12px; padding: 10px 12px; background: var(--ink); color: var(--news); font-size: 14px; line-height: 1.3; }
.bag-go::after { content: ' →'; }
.bagbar { display: none; }

/* ---------- the open booklet ---------- */
.ov { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 72px 30px 30px; background: rgba(20, 16, 12, 0); transition: background .45s var(--quart); }
.ov.in { background: rgba(20, 16, 12, .82); }
.ov-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 16px 24px; color: var(--news); opacity: 0; transition: opacity .4s var(--quart) .2s; }
.ov.in .ov-bar { opacity: 1; background: rgba(14, 11, 8, .72); }
.ov-t { flex: 1; margin: 0; text-align: center; font-style: italic; font-size: 14px; color: #d8ccb4; }
.ov-nav, .ov-x { flex: none; padding: 8px 14px; border: 1px solid rgba(236, 227, 207, .5); border-radius: 3px; background: transparent; color: var(--news); font-size: 14px; cursor: pointer; transition: background .3s var(--quart), color .3s var(--quart); }
.ov-nav:hover { background: rgba(236, 227, 207, .12); }
.ov-x { background: var(--news); color: var(--ink); border-color: var(--news); }
.ov-x:hover { background: var(--yel); border-color: var(--yel); }
.book { position: relative; width: calc(var(--pw, 400px) * 2); height: var(--ph, 595px); perspective: 2600px; transition: transform .55s var(--out), opacity .4s var(--quart); }
.ov:not([hidden]) .pg { width: var(--pw, 400px); height: var(--ph, 595px); }
.pg { position: absolute; top: 0; padding: 26px 30px 44px; overflow: auto; background: var(--news); background-image: var(--grain); color: var(--ink); scrollbar-width: thin; }
.pg-r { left: var(--pw, 400px); box-shadow: inset 16px 0 18px -14px rgba(27, 23, 18, .45), 0 24px 60px -16px rgba(0, 0, 0, .7); }
.leaf { position: absolute; z-index: 2; left: var(--pw, 400px); top: 0; width: var(--pw, 400px); height: var(--ph, 595px); transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .78s var(--inout); }
.leaf.open { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.front { overflow: hidden; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7); }
.front .cv-face { position: absolute; left: 0; top: 0; transform: scale(var(--sc, 2.3)); transform-origin: 0 0; box-shadow: none; cursor: default; animation: none; }
.face.back { transform: rotateY(180deg); left: 0; box-shadow: inset -16px 0 18px -14px rgba(27, 23, 18, .45), 0 24px 60px -16px rgba(0, 0, 0, .7); }
.book.turn .pg { animation: turn .45s var(--quart); }
@keyframes turn { from { opacity: .15; } }
.pg-run { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 18px; padding-bottom: 7px; border-bottom: 3px double var(--ink); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.pg-no { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-style: italic; font-size: 12px; color: var(--ink2); }
.pg-art { --paper: var(--news); padding: 6px; border: 1px solid rgba(27, 23, 18, .3); }
.wc-big { width: 100%; height: auto; aspect-ratio: 160 / 100; }
.k-news .wc-big { height: auto; }
.pg-art-s { margin-bottom: 14px; }
.pg-art-s { width: 62%; }
.pg-l .progs { margin-top: 18px; }
.pg-tail { width: 58%; margin-top: 22px; }
.pg-big { position: absolute; left: 28px; bottom: 34px; margin: 0; font: 400 150px/.78 'Ultra', Georgia, serif; letter-spacing: -.05em; color: var(--ink); pointer-events: none; }
.pg-big span { display: block; margin: 0 0 14px 4px; font: italic 400 15px/1 'Sanchez', Georgia, serif; letter-spacing: 0; color: var(--ink2); }
.pg-cap { margin: 10px 0 0; font-style: italic; font-size: 12.5px; color: var(--ink2); }
.pg-k { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay-d); }
.pg-lang { letter-spacing: .04em; text-transform: none; font-style: italic; }
.pg-date { margin: 0; font-style: italic; font-size: 15px; color: var(--ink2); }
.pg-hl { margin: 12px 0 24px; font: 400 clamp(21px, 2.1vw, 29px)/1.24 'Sanchez', Georgia, serif; letter-spacing: -.01em; text-wrap: balance; }
.pg-go { display: inline-block; color: var(--ink); font-size: 15.5px; text-decoration: none; border-bottom: 2px solid var(--clay); padding-bottom: 2px; transition: color .3s var(--quart); }
.pg-go:hover { color: var(--clay-d); }
.pg-h { margin: 2px 0 12px; font: 400 25px/1.15 'Sanchez', Georgia, serif; letter-spacing: -.01em; hyphens: manual; }
.pg-sub { margin: -6px 0 10px; font-style: italic; color: var(--ink2); }
.pg-p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.pg-small { margin: 12px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); font-style: italic; }
.grid, .wk, .hist, .cats { list-style: none; margin: 0; padding: 0; }
.ficha dd { font-size: 14.5px; line-height: 1.4; }
.grid li, .wk li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; padding: 6px 6px; border-bottom: 1px dotted rgba(27, 23, 18, .4); font-size: 16px; }
.wk li { grid-template-columns: minmax(0, 1fr) auto; }
.g-h { font-style: italic; color: var(--ink2); font-variant-numeric: tabular-nums; }
.grid li.now { background: var(--ink); color: var(--news); border-bottom-color: var(--ink); }
.grid li.now .g-h { color: #d8ccb4; }
.g-now { padding: 2px 6px 1px; background: var(--yel); color: var(--ink); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.hist li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px dotted rgba(27, 23, 18, .4); }
.hist .y { font-size: 28px; line-height: 1; }
.hist p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.themes { margin: 0 0 18px; font-size: 21px; line-height: 1.3; font-style: italic; }
.cats { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 8px; font-size: 15px; }
.cats li:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--clay-d); }
.quote { margin: 0 0 14px; padding-left: 12px; border-left: 3px solid var(--clay); font-style: italic; font-size: 17px; }
.pg-cta { display: inline-block; padding: 12px 16px; border: 0; border-radius: 2px; background: var(--ink); color: var(--news); font-size: 15px; line-height: 1.25; text-decoration: none; cursor: pointer;
  box-shadow: 3px 3px 0 var(--clay); transition: transform .3s var(--out), box-shadow .3s var(--out); }
.pg-cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--clay); }
.pg-cta.flash { background: var(--grn-d); }
.pg-link { padding: 8px 4px; border: 0; background: none; color: var(--ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pg-stamp { display: inline-block; margin: 12px 0 0; padding: 5px 10px 4px; border: 2px solid var(--clay-d); color: var(--clay-d); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg); }
.price { margin: 6px 0 0; }
.price b { font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.price span { font-style: italic; font-size: 16px; color: var(--ink2); }
.ficha { margin: 0; }
.ficha dt { margin-top: 10px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay-d); }
.ficha dt:first-child { margin-top: 0; }
.ficha dd { margin: 2px 0 0; font-size: 15px; line-height: 1.42; }
.qty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.q-k { flex-basis: 100%; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--clay-d); }
.q-b { width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.q-b:hover { background: rgba(27, 23, 18, .08); }
.qty output { min-width: 84px; text-align: center; font-size: 15px; }
.q-sum { font-style: italic; font-size: 13px; color: var(--ink2); }
.progs { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; }
.chip { font-kerning: none; padding: 5px 8px; border: 1px solid var(--ink); border-radius: 2px; background: transparent; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--ink); color: var(--news); }
.put { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }

/* ---------- the bag, opened: the request ---------- */
.ov-bag { padding: 30px 16px; overflow: auto; }
.bigbag { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 60px); overflow: auto; padding: 46px 42px 32px; background: var(--bag); background-image: var(--fibre), linear-gradient(90deg, rgba(27, 23, 18, .1) 0 3%, rgba(0, 0, 0, 0) 3% 97%, rgba(27, 23, 18, .12) 97%);
  color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); transform: translateY(24px) rotate(.6deg); opacity: 0; transition: transform .55s var(--out), opacity .35s var(--quart); }
.ov-bag.in .bigbag { transform: none; opacity: 1; }
.bigbag::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: linear-gradient(-45deg, rgba(20, 16, 12, .82) 6px, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, rgba(20, 16, 12, .82) 6px, rgba(0, 0, 0, 0) 0); background-size: 12px 12px; }
.bigbag .ov-x { position: absolute; top: 18px; right: 18px; background: var(--ink); color: var(--news); border-color: var(--ink); }
.bb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; }
.bb-in h2 { margin: 0 0 10px; font: 400 34px/1 'Ultra', Georgia, serif; letter-spacing: -.01em; }
.ask-items { list-style: none; margin: 0 0 10px; padding: 0; }
.ask-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(27, 23, 18, .5); font-size: 15px; line-height: 1.35; }
.ask-items li.empty { font-style: italic; }
.rm { flex: none; padding: 2px 4px; border: 0; background: none; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ask-sum { margin: 0 0 16px; font-style: italic; font-size: 14px; }
.ask-rule { margin: 0 0 10px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 14px; line-height: 1.5; }
.ask-how { margin: 0; font-size: 14px; line-height: 1.5; font-style: italic; }
.ask-form { min-width: 0; }
.fld { display: block; margin-bottom: 12px; }
.fld span { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.fld input, .fld textarea { display: block; width: 100%; padding: 9px 10px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: rgba(236, 227, 207, .62); color: var(--ink); font: 400 16px/1.4 'Sanchez', Georgia, serif; resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(27, 23, 18, .6); }
.fld input:focus, .fld textarea:focus { outline: none; background: var(--news); border-bottom-color: var(--clay-d); }
.f-err { margin: 0 0 6px; min-height: 1.2em; font-size: 14px; color: #6a1414; }
.f-pt { margin: 0 0 10px; font-size: 13px; font-style: italic; }
.ask-b { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.b-wa, .b-ghost { display: inline-block; padding: 11px 16px; border-radius: 2px; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .3s var(--out), background .3s var(--quart); }
.b-wa { border: 0; background: var(--grn-d); color: var(--news); box-shadow: 3px 3px 0 var(--ink); }
.b-wa:hover { transform: translate(-1px, -1px); }
.b-ghost { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.b-ghost:hover { background: rgba(27, 23, 18, .08); }
.sent .sent-k { margin: 0 0 8px; font: 400 30px/1.05 'Ultra', Georgia, serif; }
.sent p { font-size: 15px; }
.sent-txt { max-height: 260px; overflow: auto; margin: 12px 0 14px; padding: 12px 14px; background: var(--news); white-space: pre-wrap; font: 400 13.5px/1.5 'Sanchez', Georgia, serif; }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  :root { --ck-bottom: 80px; }
  .stall::before, .stall::after { display: none; }
  .plank { flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px 12px; }
  .brand img { height: 34px; }
  .plank-r { gap: 12px; }
  .live { font-size: 13.5px; }
  .onair { order: 3; flex-basis: 100%; font-size: 13.5px; }
  .onair b { font-size: 16px; }
  .painted { top: 120px; font-size: 150px; }
  .row-h { display: block; padding: 16px 16px 2px; }
  .row-h h1, .row-h h2 { white-space: normal; font-size: 21px; margin-bottom: 4px; }
  .row-h p { font-size: 13.5px; }
  .line { scroll-snap-type: x proximity; }
  .cv { touch-action: pan-x pan-y; }
  .cloth { display: block; padding: 26px 16px 110px; min-height: 0; }
  .slip { width: auto; transform: none; }
  .sacola { display: none; }
  .bagbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; background: var(--ink); color: var(--news); box-shadow: 0 -10px 24px -10px rgba(0, 0, 0, .6); }
  .bagbar::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: linear-gradient(-45deg, var(--ink) 5px, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, var(--ink) 5px, rgba(0, 0, 0, 0) 0); background-size: 10px 10px; background-position: left bottom; }
  .bb-n { font-size: 14px; min-width: 0; }
  #bb-go { flex: none; padding: 10px 14px; border: 0; border-radius: 2px; background: var(--yel); color: var(--ink); font-size: 14px; cursor: pointer; }
  .ov { display: block; padding: 0; overflow: auto; background: var(--ink); }
  .ov.in { background: var(--ink); }
  .ov-bar { position: sticky; z-index: 5; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--ink); opacity: 1; }
  .ov-t { order: 3; flex-basis: 100%; text-align: left; font-size: 13px; }
  .ov-nav { padding: 7px 9px; font-size: 13px; }
  .ov-x { margin-left: auto; padding: 7px 10px; font-size: 13px; }
  .book { display: flex; flex-direction: column; width: auto; height: auto; perspective: none; }
  .ov:not([hidden]) .pg { width: auto; height: auto; }
  .pg, .leaf, .face.back { position: relative; left: auto; top: auto; width: auto; height: auto; overflow: visible; transform: none !important; }
  .leaf { order: 1; transform-style: flat; transition: none; }
  .front { display: none; }
  .face.back { backface-visibility: visible; -webkit-backface-visibility: visible; box-shadow: none; border-bottom: 3px double var(--ink); }
  .pg-r { order: 2; box-shadow: none; }
  .pg { padding: 20px 18px 46px; }
  .pg-hl { font-size: 23px; }
  .pg-big, .ov-nav .w { display: none; }
  .book.k-news .pg-r, .book.k-musica .pg-r, .book.k-pod .pg-r { order: 0; border-bottom: 3px double var(--ink); }
  .book.k-news .face.back, .book.k-musica .face.back, .book.k-pod .face.back { order: 3; border-bottom: 0; }
  .ov-t { display: none; }
  .ov-bag { padding: 0; }
  .bigbag { width: 100%; max-height: none; min-height: 100%; padding: 56px 16px 30px; }
  .bb-cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bb-in h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
html.static .string path { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---------- legal pages: one long folheto page on the kraft ---------- */
.legal-top .live { margin-left: auto; }
.legal-sheet { position: relative; max-width: 860px; margin: 40px auto 60px; padding: 34px 44px 44px; background: var(--news); background-image: var(--grain); color: var(--ink);
  font-size: 15.5px; line-height: 1.6; box-shadow: 2px 2px 0 #e7dcc4, 3px 3px 0 rgba(27, 23, 18, .25), 0 20px 40px -18px rgba(40, 25, 10, .6); overflow-wrap: break-word; }
.legal-sheet::before { content: ''; display: block; height: 0; border-top: 3px double var(--ink); margin: -12px 0 22px; }
.legal-sheet h1 { font: 400 34px/1.1 'Ultra', Georgia, serif; letter-spacing: -.01em; margin: 10px 0 16px; }
.legal-sheet h2 { font: 400 21px/1.25 'Sanchez', Georgia, serif; margin: 30px 0 8px; padding-top: 10px; border-top: 1px dotted rgba(27, 23, 18, .45); }
.legal-sheet a { color: var(--clay-d); text-underline-offset: 3px; }
@media (max-width: 700px) { .legal-sheet { margin: 16px 10px 30px; padding: 22px 18px 30px; font-size: 15px; } .legal-sheet h1 { font-size: 27px; } }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: liberdade-fm-caruaru */
.ck { left: 22px; bottom: 18px; width: 680px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: auto auto minmax(0, 1fr) 82px; grid-template-areas: "k k k s" "t t t s" "p p p s" "ok no m m"; column-gap: 10px; align-items: start;
  padding: 13px 20px 13px 22px; color: #1B1712; font-family: 'Sanchez', Georgia, serif; font-size: 13px; line-height: 1.42; border-radius: 2px 5px 3px 6px;
  background-color: #C49B66;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .7' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(100deg, rgba(255, 240, 210, 0) 0 38%, rgba(255, 240, 210, .22) 38.4%, rgba(255, 240, 210, 0) 39.5% 100%), linear-gradient(8deg, rgba(27, 23, 18, 0) 0 61%, rgba(27, 23, 18, .1) 61.3%, rgba(27, 23, 18, 0) 62.5%);
  transform: rotate(-1.3deg); box-shadow: 0 1px 0 rgba(27, 23, 18, .25), 0 18px 26px -14px rgba(27, 23, 18, .8); animation: lfm-ck .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lfm-ck { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } }
.ck::before { content: ''; grid-area: s; justify-self: end; align-self: center; width: 80px; height: 80px; margin: 0 -4px 0 0; opacity: .88; mix-blend-mode: multiply; transform: rotate(-14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpath id='c' d='M50 50m-35 0a35 35 0 1 1 70 0a35 35 0 1 1 -70 0'/%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.6'/%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23r)' fill='none' stroke='%238F3D1D'%3E%3Ccircle cx='50' cy='50' r='47' stroke-width='3.5'/%3E%3Ccircle cx='50' cy='50' r='27' stroke-width='2'/%3E%3Ctext font-family='Georgia,serif' font-size='11.5' letter-spacing='1.6' fill='%238F3D1D' stroke='none'%3E%3CtextPath href='%23c'%3ELIBERDADE FM 94,7 %C2%B7 CARUARU %C2%B7 PE %C2%B7%3C/textPath%3E%3C/text%3E%3Cpath d='M50 34l4.7 10.5 11.3 1-8.6 7.5 2.6 11.1L50 58.3l-10 5.8 2.6-11.1-8.6-7.5 11.3-1z' fill='%238F3D1D' stroke='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.ck .ck-k { grid-area: k; margin: 2px 0 3px; font-size: 11px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: #5A2A14; }
.ck .ck-t { grid-area: t; align-self: end; }
.ck .ck-t b { display: block; font-weight: 400; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.ck .ck-p { grid-area: p; margin: 7px 0 0; padding-top: 6px; border-top: 1px dashed rgba(27, 23, 18, .5); }
.ck .b { display: contents; }
.ck button { margin-top: 10px; padding: 7px 13px 6px; background: rgba(27, 23, 18, .05); color: #1B1712; font-family: 'Sanchez', Georgia, serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(27, 23, 18, .25); transition: background .25s cubic-bezier(.25, 1, .5, 1), transform .3s cubic-bezier(.16, 1, .3, 1); }
.ck button.ok { grid-area: ok; border: 3px double #1B1712; transform: rotate(-1.5deg); }
.ck button.no { grid-area: no; border: 2px solid #1B1712; transform: rotate(1deg); }
.ck button:hover { background: rgba(27, 23, 18, .14); }
.ck button.ok:hover { transform: rotate(-1.5deg) translateY(-1px); } .ck button.no:hover { transform: rotate(1deg) translateY(-1px); }
.ck a.more { grid-area: m; justify-self: end; align-self: end; margin-top: 10px; padding: 4px 2px; font-size: 12px; font-style: italic; color: #1B1712; text-decoration: underline; text-underline-offset: 3px; }
.ck button:focus-visible, .ck a.more:focus-visible { outline: 2.5px solid #8F3D1D; outline-offset: 2px; }
@media (max-width: 600px) { .ck.ck { left: 10px; right: 10px; width: auto; grid-template-columns: auto auto minmax(0, 1fr) 62px; padding: 12px 14px 12px 16px; font-size: 12.5px; transform: rotate(-.6deg); }
  .ck::before { width: 62px; height: 62px; margin: -2px -2px 0 0; } .ck .ck-t b { font-size: 17px; } .ck button { font-size: 12px; padding: 7px 10px 6px; letter-spacing: .1em; } }
/* seller block: the dark ground under the stall table */
footer.seller { background: #1B1712; color: #E2D7BF; border-top: 0; padding: 40px 46px 48px; font-family: 'Sanchez', Georgia, serif; }
footer.seller b { color: #F2C53D; opacity: 1; letter-spacing: .16em; font-weight: 400; }
footer.seller strong { color: #ECE3CF; font-weight: 400; font-size: 14px; }
footer.seller a { color: #ECE3CF; text-underline-offset: 3px; }
footer.seller .nl input[type=email] { border-color: rgba(236, 227, 207, .55); background: rgba(236, 227, 207, .06); }
footer.seller .nl input::placeholder { color: rgba(226, 215, 191, .7); }
footer.seller .nl button { border-color: #F2C53D; color: #F2C53D; }
@media (max-width: 700px) { footer.seller { padding: 30px 16px 110px; } }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }