/* The studio. Deliberately close to the app: same palette, same rounded cards,
   same pink-to-blue action colour, so moving between phone and desktop doesn't
   feel like moving between two products. */
*{box-sizing:border-box}
body{margin:0;background:#FBFAFA;color:#112234;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit;cursor:pointer}
a{color:inherit}

.btn{border:1px solid #E2DEDE;background:#fff;border-radius:999px;padding:8px 15px;
  font-size:13.5px;font-weight:600;color:#2a3742}
.btn:hover{border-color:#c9c3c3}
.btn.go{border:0;color:#fff;background:linear-gradient(120deg,#5FDDEC,#FE96AF)}
.btn.quiet{border:0;background:none;color:#8a939c}

.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 80px}
h1{font-size:25px;letter-spacing:-.03em;margin:0 0 4px}
.sub{color:#6b7280;font-size:14px;margin:0 0 22px}

/* Library */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:20px}
.card{background:#fff;border:1px solid #E8E4E4;border-radius:15px;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;padding:0;border-width:1px}
.card:hover{border-color:#d5cfcf;box-shadow:0 6px 18px rgba(17,34,52,.06)}
.card .shot{width:100%;aspect-ratio:1;object-fit:cover;background:#eee;display:block}
.card .meta{padding:11px 13px 13px}
.card .meta b{display:block;font-size:15px}
.card .meta span{font-size:12.5px;color:#6b7280}
.card.new{align-items:center;justify-content:center;min-height:250px;color:#6b7280;
  border-style:dashed;background:#fff}
.card.new .plus{font-size:30px;line-height:1;margin-bottom:6px;color:#FE96AF}

/* Editor */
/* The shared header owns its own height and publishes it as --mpb-nav-h,
   so this no longer hard-codes a number that goes stale. */
.editor{display:grid;grid-template-columns:1fr 320px;gap:0;
  height:calc(100vh - var(--mpb-nav-h, 65px))}
#app > .chooser, #app > .themes-screen{margin-top:0}
.stage{overflow:auto;padding:26px 26px 90px;background:#F4F2F2}
.side{background:#fff;border-left:1px solid #E8E4E4;overflow:auto;padding:18px 18px 60px}
.side h2{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a939c;
  margin:20px 0 10px;font-weight:700}
.side h2:first-child{margin-top:0}

.spread{background:#fff;border-radius:5px;box-shadow:0 5px 18px rgba(17,34,52,.10);
  display:flex;margin:0 auto 26px;width:fit-content;position:relative}
.spread canvas{display:block}
.spread .seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#eceaea}
.spread .lab{position:absolute;left:0;right:0;bottom:-19px;display:flex;font-size:11.5px;
  color:#98a1aa}
.spread .lab span{flex:1;text-align:center}
.pageslot{position:relative;cursor:pointer}
.pageslot.sel{outline:3px solid #FE96AF;outline-offset:-3px}
.pageslot:hover:not(.sel){outline:2px solid #cfe9ee;outline-offset:-2px}

.row{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid #E2DEDE;background:#fff;border-radius:9px;padding:7px 11px;
  font-size:12.5px}
.chip.on{border-color:#112234;background:#112234;color:#fff}
.swatch{width:30px;height:30px;border-radius:8px;border:2px solid #fff;
  box-shadow:0 0 0 1px #ddd;padding:0}
.swatch.on{box-shadow:0 0 0 2px #112234}
.field{width:100%;border:1px solid #E2DEDE;border-radius:10px;padding:9px 11px;
  font:inherit;font-size:14px;margin-bottom:9px}
.layouts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.lay{border:1px solid #E2DEDE;background:#fff;border-radius:8px;padding:5px;aspect-ratio:1}
.lay.on{border-color:#112234;box-shadow:0 0 0 1px #112234}
.lay svg{width:100%;height:100%;display:block}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.theme{border:1px solid #E2DEDE;border-radius:10px;overflow:hidden;background:#fff;padding:0}
.theme.on{border-color:#112234;box-shadow:0 0 0 1px #112234}
.theme canvas{width:100%;display:block}
.theme span{display:block;font-size:11.5px;padding:5px 7px;color:#4a5560}

.empty{background:#fff;border:1px solid #E8E4E4;border-radius:15px;padding:40px 24px;
  text-align:center;color:#6b7280}
.empty b{display:block;color:#112234;font-size:17px;margin-bottom:6px}
.hint{font-size:12.5px;color:#98a1aa;margin:8px 0 0}
.bar{position:fixed;left:0;right:320px;bottom:0;background:#fff;border-top:1px solid #E8E4E4;
  padding:10px 20px;display:flex;gap:10px;align-items:center;z-index:20}
.bar .spacer{flex:1}

/* ── "Choose Your Book" — matched to the app's create screen ─────────────── */
.chooser{max-width:430px;margin:0 auto;background:#FBFAFA;min-height:100vh;
  box-shadow:0 0 40px rgba(17,34,52,.07)}
.chooser .hero{position:relative;height:280px;overflow:hidden;background:#eee}
.chooser .hero img{width:100%;height:100%;object-fit:cover;display:block}
.chooser .heroX{position:absolute;left:16px;top:12px;width:36px;height:36px;border:0;
  border-radius:50%;background:rgba(255,255,255,.94);font-size:14px;color:#112234;
  box-shadow:0 2px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.chooser .heroPill{position:absolute;right:16px;top:12px;border:0;border-radius:999px;
  background:rgba(255,255,255,.94);font-size:11px;font-weight:800;letter-spacing:.08em;
  color:#112234;padding:9px 14px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.chooserBody{padding:18px 18px 40px;display:flex;flex-direction:column;gap:18px}
.chooser .group{display:flex;flex-direction:column;gap:8px}
.chooser .glabel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(17,34,52,.45)}
.chooser .pillrow{display:flex;gap:4px;padding:4px;border-radius:17px;background:#EDEDED}
.chooser .pill{flex:1;border:0;background:none;border-radius:11px;padding:6px 4px;
  display:flex;flex-direction:column;align-items:center;gap:1px;color:#8a939c}
.chooser .pill b{font-size:13px;font-weight:700}
.chooser .pill i{font-size:11px;font-style:normal;opacity:.75}
.chooser .pill.on{background:#fff;color:#112234;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.chooser .pill[disabled]{opacity:.4}
.chooser .layflat{border-radius:16px;padding:12px;background:rgba(232,113,143,.07);
  border:1px solid rgba(232,113,143,.18);display:flex;flex-direction:column;gap:11px}
.chooser .lfhead{display:flex;gap:11px;align-items:center}
.chooser .lfmark{width:38px;height:38px;border-radius:50%;flex:none;
  background:rgba(232,113,143,.14);color:#E8718F;display:flex;align-items:center;
  justify-content:center;font-size:15px}
.chooser .lftitle{font-size:12px;font-weight:800;letter-spacing:.06em;color:#112234;
  display:flex;align-items:center;gap:7px}
.chooser .lfbadge{font-size:9px;font-weight:800;letter-spacing:.04em;color:#fff;
  padding:2.5px 6px;border-radius:999px;background:linear-gradient(120deg,#5FDDEC,#FE96AF)}
.chooser .lfbody{font-size:11.5px;line-height:1.45;color:rgba(17,34,52,.62);margin-top:4px}
.chooser .lfshot{width:100%;border-radius:11px;display:block;aspect-ratio:2.75;object-fit:cover}
.chooser .startbar{border:0;border-radius:999px;padding:15px;color:#fff;font-size:16px;
  font-weight:700;background:linear-gradient(120deg,#5FDDEC,#FE96AF);margin-top:2px}
.chooser .undercap{text-align:center;font-size:12px;color:#8a939c}

/* ── The theme browser ───────────────────────────────────────────────────── */
.themes-screen{max-width:430px;margin:0 auto;background:#FBFAFA;min-height:100vh;
  padding-bottom:100px;box-shadow:0 0 40px rgba(17,34,52,.07);position:relative}
.tbar{display:flex;align-items:center;padding:10px 14px;position:sticky;top:53px;
  background:#FBFAFA;z-index:5}
.tback{width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#E8718F;
  font-size:22px;line-height:1;box-shadow:0 1px 5px rgba(0,0,0,.10)}
.ttitle{flex:1;text-align:center;font-size:16px;font-weight:600;margin-right:36px}
.tcats{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 12px;scrollbar-width:none}
.tcats::-webkit-scrollbar{display:none}
.tcat{flex:none;border:0;border-radius:999px;padding:9px 16px;font-size:13.5px;
  font-weight:600;background:#EDEDED;color:#112234}
.tcat.on{color:#fff;background:linear-gradient(120deg,#5FDDEC,#FE96AF)}
/* .tgrid is the template rows now — see the block at the foot of this file. */
.tcard{border:0;background:none;padding:0;text-align:center}
.tshot{position:relative;aspect-ratio:1.06;border-radius:14px;background:#F0EFEF;
  background-size:cover;background-position:center}
.tshot.ready{background-color:transparent}
.tspin{position:absolute;inset:0}
.tpreview{position:absolute;right:8px;bottom:8px;font-size:10px;font-weight:700;
  color:#112234;background:rgba(255,255,255,.95);padding:5px 8px;border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tname{font-size:14px;font-weight:700;margin-top:8px;color:#112234}
.tcatname{font-size:12.5px;color:#8a939c}
.tblank{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;border:0;
  border-radius:999px;background:#fff;color:#112234;font-size:14.5px;font-weight:600;
  padding:15px 26px;box-shadow:0 6px 20px rgba(0,0,0,.16);z-index:10}

/* ── The theme browser on a desktop ──────────────────────────────────────
   The studio was ported from the phone, so the shelf inherited a 430px column
   and a two-up grid. On a monitor that is a phone-shaped strip down the middle
   of an empty screen. The cards are the same cards; there is just room for
   more of them, so the column opens up and the grid counts up with it. */
@media(min-width:900px){
  .themes-screen{max-width:1180px;background:transparent;box-shadow:none;
    min-height:0;padding-bottom:120px}
  .tbar{background:transparent;padding:18px 20px 6px}
  .ttitle{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .tcats{padding:4px 20px 20px;gap:10px;justify-content:center;overflow-x:visible;
    flex-wrap:wrap}
  .tname{font-size:15.5px;margin-top:11px}
  .tcatname{font-size:13px}
  .tpreview{font-size:11px;padding:6px 10px}
}
@media(min-width:1280px){
}

/* The create flow is the app's screen, full height, with its own controls at
   the top — the site header on top of it is a second, competing chrome. */
body.flow header{display:none}
body.flow .tbar{top:0}

.note{position:fixed;left:50%;transform:translateX(-50%) translateY(-20px);top:66px;
  background:#112234;color:#fff;font-size:13.5px;padding:11px 18px;border-radius:12px;
  max-width:min(560px,90vw);box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.note.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Sheets: the tray, and the small ones ────────────────────────────────── */
.sheet-back{position:fixed;inset:0;background:rgba(17,34,52,.35);z-index:70;
  display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:min(900px,96vw);max-height:86vh;border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.25)}
.sheet.small{max-height:70vh;width:min(560px,94vw)}
.sheet-bar{display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-bottom:1px solid #EFECEC}
.sheet-bar b{font-size:15.5px}
.sheet-bar .spacer{flex:1}
.sheet-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:9px}
.tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;
  padding:12px;overflow:auto}
.traycell{position:relative;border:0;padding:0;border-radius:9px;overflow:hidden;
  aspect-ratio:1;background:#eee}
.traycell img{width:100%;height:100%;object-fit:cover;display:block}
.traycell:hover{outline:3px solid #FE96AF;outline-offset:-3px}
.usedbadge{position:absolute;right:5px;bottom:5px;font-size:10px;font-weight:700;
  background:rgba(17,34,52,.78);color:#fff;padding:3px 6px;border-radius:999px}
.trayempty{padding:44px 24px;text-align:center;color:#6b7280;font-size:14px}
.trayempty b{display:block;color:#112234;font-size:16.5px;margin-bottom:6px}
.uploading{position:fixed;left:50%;transform:translateX(-50%);bottom:70px;z-index:80;
  background:#112234;color:#fff;font-size:13px;padding:10px 18px;border-radius:999px}

/* ── Editor extras ───────────────────────────────────────────────────────── */
.toolhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.toolhead b{font-size:15px;flex:1}
.slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slotcell{aspect-ratio:1;border:1px solid #E2DEDE;border-radius:9px;overflow:hidden;
  padding:0;background:#fff}
.slotcell img{width:100%;height:100%;object-fit:cover;display:block}
.slotcell.empty{border-style:dashed;color:#A79BB8;font-size:20px;background:#F3F1F6}
.slider{width:100%}
.layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lay{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;
  border:1px solid #E2DEDE;border-radius:9px;background:#fff;aspect-ratio:auto}
.lay svg{width:36px;height:36px}
.lay span{font-size:9.5px;color:#8a939c;line-height:1.1;text-align:center}
.lay.on{border-color:#112234;box-shadow:0 0 0 1px #112234}
.lay.on span{color:#112234;font-weight:600}
.pageslot canvas{cursor:grab}
.pageslot canvas.grabbing{cursor:grabbing}
.pageslot.dragging{opacity:.4}
.pageslot.over{outline:3px dashed #5FDDEC;outline-offset:-3px}
.chip[disabled]{opacity:.4;cursor:default}
.btn[disabled]{opacity:.35;cursor:default}
.traycell .waitbadge{display:none}
.traycell.waiting{background:#F3F1F6;cursor:default}
.traycell.waiting img{display:none}
.traycell.waiting:hover{outline:0}
.traycell.waiting .usedbadge{display:none}
.traycell.waiting .waitbadge{display:block;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:10.5px;color:#8a939c;padding:6px}
/* A photo opened for adjusting: the page says so, and stops being draggable. */
.pageslot.adjusting{outline:3px solid #5FDDEC;outline-offset:-3px}
.pageslot.adjusting canvas{cursor:grab}

/* ── Preview ─────────────────────────────────────────────────────────────── */
.preview-back{position:fixed;inset:0;background:#2C2C30;z-index:90;
  display:flex;flex-direction:column}
.preview-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;color:#fff;
  background:rgba(0,0,0,.25)}
.preview-bar b{font-size:15.5px}
.preview-bar .spacer{flex:1}
.preview-bar .pcount{font-size:13px;opacity:.7}
.preview-bar .chip{background:#fff}
.preview-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:22px;
  padding:24px}
.pbook{position:relative;display:flex;background:#fff;border-radius:3px;
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06)}
.pbook.single{border-radius:5px}
.pleaf{position:relative}
.pleaf canvas{display:block}
.pleaf span{position:absolute;left:0;right:0;bottom:-22px;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.55)}
/* The fold: a soft shadow either side of the middle, which is what makes two
   rectangles read as one open book. */
.pgutter{position:absolute;top:0;bottom:0;left:50%;width:26px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.13),rgba(0,0,0,0));
  pointer-events:none}
.pnav{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);
  color:#fff;font-size:24px;line-height:1}
.pnav:hover:not([disabled]){background:rgba(255,255,255,.22)}
.pnav[disabled]{opacity:.25}
.templates-layer{position:fixed;inset:0;background:#FBFAFA;z-index:85;overflow:auto}
.templates-layer .tbar{top:0}

/* ---- the theme preview sheet ----------------------------------------------
   The app's ThemePreviewSheet: a theme shown two ways before you commit to it.
   Tapping a card used to open the editor on a new book, which made the card's
   own "Preview" badge decoration — the only way to see a theme was to start it
   and then undo. */
.tp-scrim{position:fixed;inset:0;z-index:80;background:rgba(12,16,22,.46);
  display:flex;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html.tp-open,html.tp-open body{overflow:hidden}
.tp{background:#fff;width:min(560px,100%);max-height:94vh;border-radius:22px 22px 0 0;
  display:flex;flex-direction:column;box-shadow:0 -10px 50px rgba(17,34,52,.28);
  animation:tp-rise .22s cubic-bezier(.22,.7,.3,1)}
@keyframes tp-rise{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.tp-top{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.tp-top b{font-family:var(--font-head,inherit);font-size:20px;letter-spacing:-.02em;flex:1}
.tp-x{width:44px;height:44px;border:0;background:none;font-size:24px;line-height:1;
  color:#6b7683;cursor:pointer;border-radius:12px;margin:-8px -8px 0 0}
.tp-x:hover{background:#F4F2F0;color:#112234}
.tp-note{margin:8px 20px 0;font-size:13.5px;color:#8a939c}

/* One control, two ways to look at the same theme. */
.tp-tabs{display:flex;gap:4px;margin:14px 20px 0;padding:4px;background:#F1EFED;
  border-radius:999px}
.tp-tab{flex:1;border:0;background:none;padding:10px 8px;border-radius:999px;
  font:inherit;font-size:14.5px;font-weight:700;color:#6b7683;cursor:pointer;min-height:44px}
.tp-tab.on{background:#fff;color:#112234;box-shadow:0 1px 3px rgba(17,34,52,.14)}

.tp-stage{flex:1;min-height:0;overflow-y:auto;margin:14px 0 0;padding:0 20px;
  overscroll-behavior:contain}
.tp-load{display:flex;align-items:center;justify-content:center;gap:10px;height:260px;
  color:#8a939c;font-size:14px}
.tp-load i{width:18px;height:18px;border-radius:999px;border:2px solid #E3E0DC;
  border-top-color:#E8718F;animation:tp-spin .7s linear infinite}
@keyframes tp-spin{to{transform:rotate(360deg)}}
.tp-book img{width:100%;height:auto;display:block}

.tp-pages{display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.tp-pages figure{margin:0}
.tp-pages img{display:block;width:100%;height:auto}
.tp-one img,.tp-pair{border-radius:6px;overflow:hidden;border:1px solid #EFEDEB;
  box-shadow:0 3px 8px rgba(0,0,0,.10)}
.tp-one img{max-width:62%;margin:0 auto}
/* No gap between the halves of a spread: two points of white down the middle
   reads as something that will print, and on a picture that crosses the fold it
   looks like the picture comes out cut in half. */
.tp-pair{display:flex;background:#fff}
.tp-pair img{width:50%}
.tp-pages figcaption{margin-top:6px;text-align:center;font-size:11.5px;color:#a4abb3}

.tp-cap{margin:10px 20px 0;text-align:center;font-size:12.5px;color:#8a939c}
.tp-go{margin:12px 20px calc(20px + env(safe-area-inset-bottom));border:0;cursor:pointer;
  padding:15px;border-radius:16px;font:inherit;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,#5FDDEC,#FE96AF);min-height:52px}

@media(min-width:640px){
  .tp-scrim{align-items:center}
  .tp{border-radius:22px;max-height:88vh}
}

/* ---- the template rows ----------------------------------------------------
   One row per template: the cover large enough to read, two of its own spreads
   beside it, then what it is and the two things you can do with it. The old
   170px tiles showed a book at an angle with its title hidden behind the open
   book in front of it, which is no way to choose a design. */
.tgrid{display:flex;flex-direction:column;gap:16px;padding:0 16px}
.trow{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 12px rgba(17,34,52,.09)}
/* Every render is a SQUARE canvas, so every panel is square — fitting a square
   picture into a wide box is what sliced the books in half. The cover takes two
   units, the spreads one each, which makes all three square at any width. */
.tart{display:grid;grid-template-columns:2fr 1fr;gap:2px;background:#EFEDEA}
.tside{display:grid;grid-template-rows:1fr 1fr;gap:2px}
.tpane{aspect-ratio:1;background:#F4F2F0 center/cover no-repeat;
  position:relative;opacity:0;transition:opacity .3s ease}
.tpane.ready{opacity:1}
.tspin{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:999px;border:2px solid #E3E0DC;border-top-color:#E8718F;
  animation:tspin .7s linear infinite}
@keyframes tspin{to{transform:rotate(360deg)}}
.tpane.ready .tspin{display:none}
/* The template card: the book lab's photograph of the theme — cover and two
   pages on the left, two more spreads stacked on the right — one image, made
   for every template by tools/sync_templates.py. Tapping it opens the pages. */
.tcard{display:block;width:100%;aspect-ratio:2412/1061;object-fit:cover;
  background:#F4F2F0;cursor:pointer;border:0;padding:0}
.tcard img{display:block;width:100%;height:100%;object-fit:cover}

.tbar{display:flex;align-items:center;gap:9px;padding:13px 14px}
.tmeta{flex:1;min-width:0}
.tmeta b{display:block;font-family:var(--font-head,inherit);font-size:16.5px;
  font-weight:700;letter-spacing:-.01em;color:#112234}
.tmeta span{display:block;font-size:12.5px;color:#8a939c;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuse,.tprev{border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;min-height:44px;padding:0 15px}
.tuse{background:#12263B;color:#fff;border:0}
.tuse:hover{background:#1c3852}
.tprev{background:#fff;color:#12263B;border:1px solid #E3E0DC}
.tprev:hover{background:#F7F6F5}

/* Two rows abreast on a wide screen. One row per line at 1180px makes the
   cover panel 730px across — a book the size of a real book, and twenty-eight
   screens of scrolling to see the set. */
@media(min-width:900px){
  .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;padding:0 20px}
  .tmeta b{font-size:18px}
  .tmeta span{font-size:13.5px}
}