/* ==========================================================================
   Stafford Audio — site.css
   Glue between the design kit (brand.css + app.css, untouched) and the live
   app: the player as an overlay, a real <input type=range> scrubber styled
   to the spec, sheet/scrim transitions, and a few live-app-only pieces.
   ========================================================================== */

/* ---- The listening room as an overlay ---------------------------------- */
.room-overlay {
  position: fixed; inset: 0; z-index: 35;
  background: var(--sa-navy); color: var(--sa-cream);
  overflow-y: auto;
  transform: translateY(4%); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--sa-ease), opacity 320ms var(--sa-ease);
}
.room-overlay.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.room-overlay h1, .room-overlay h2, .room-overlay h3 { color: var(--sa-cream); }
body.player-open { overflow: hidden; }

/* ---- Scrubber: native range, spec skin --------------------------------- */
.scrub { position: relative; }
.scrub input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent; display: block;
}
.scrub input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right,
    var(--sa-cream) 0%, var(--sa-cream) var(--fill, 0%),
    rgba(251,243,228,.18) var(--fill, 0%), rgba(251,243,228,.18) 100%);
}
.scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sa-cream); margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); border: 0;
}
.scrub input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(251,243,228,.18);
}
.scrub input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 2px; background: var(--sa-cream);
}
.scrub input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sa-cream); border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.scrub .ticks { position: absolute; left: 8px; right: 8px; top: 50%; height: 4px;
  transform: translateY(-50%); pointer-events: none; }
.scrub .ticks span { position: absolute; top: -3px; width: 1.5px; height: 10px;
  background: rgba(251,243,228,.45); }

/* ---- Sheets & scrim: transitions --------------------------------------- */
.scrim { opacity: 0; pointer-events: none; transition: opacity 200ms var(--sa-ease); }
.scrim.open { opacity: 1; pointer-events: auto; }
.sheet { visibility: hidden; transform: translateY(24px); opacity: 0;
  transition: transform 260ms var(--sa-ease), opacity 260ms var(--sa-ease), visibility 0s 260ms; }
.sheet.open { visibility: visible; transform: none; opacity: 1; transition-delay: 0s; }
@media (min-width: 640px) {
  .sheet { transform: translate(-50%, -50%) scale(.96); }
  .sheet.open { transform: translate(-50%, -50%) scale(1); }
}
.speed input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  background: transparent; display: block; margin: 6px 0 2px;
}
.speed input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--sa-brass) var(--fill,33%), var(--sa-line) var(--fill,33%));
}
.speed input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sa-white); margin-top: -11px;
  box-shadow: 0 2px 8px rgba(27,53,96,.35), inset 0 0 0 1.5px var(--sa-line);
}
.speed input[type="range"]::-moz-range-track { height: 4px; background: var(--sa-line); border-radius: 2px; }
.speed input[type="range"]::-moz-range-progress { height: 4px; background: var(--sa-brass); border-radius: 2px; }
.speed input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%;
  background: var(--sa-white); border: 0; box-shadow: 0 2px 8px rgba(27,53,96,.35); }

/* ---- Live-app pieces ---------------------------------------------------- */
.status-line { min-height: 1.3em; text-align: center; font-size: 13.5px;
  color: var(--sa-mist); margin: 2px 0 0; }
.status-line.error { color: #E7A793; }
.room-overlay .btn-retry { display: block; margin: 8px auto 0; height: 40px;
  padding: 0 18px; border-radius: 999px; border: 1px solid rgba(251,243,228,.3);
  color: var(--sa-cream); font-weight: 500; font-size: 14px; }
.diagnostics { max-width: 560px; margin: 26px auto 0; font-size: 12.5px;
  color: var(--sa-mist); border-top: 1px solid var(--sa-line-dark); padding: 10px 0 30px; }
.diagnostics summary { cursor: pointer; padding: 6px 0; }
.event-log { margin: 8px 0; padding-left: 1.4em; max-height: 200px; overflow: auto;
  font-variant-numeric: tabular-nums; }
.diagnostics button { text-decoration: underline; text-underline-offset: 3px;
  color: var(--sa-mist); font-size: 12.5px; padding: 8px 0; }

.mini { cursor: pointer; }
.mini .moon.on { color: var(--sa-straw); }
.mini .moon { color: rgba(251,243,228,.4); }
.mini[hidden], .tabbar[hidden], .room-overlay[hidden] { display: none !important; }
/* .btn sets display, which beats the hidden attribute — so the players'
   "Sign in free to keep…" buttons showed to everyone, signed in or not. */
.btn[hidden] { display: none !important; }
body.no-mini .main { padding-bottom: 32px; }
@media (max-width: 639px) { body.no-mini .main { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 16px); } }

@media (min-width: 1024px) { .aux .pill-chapters { display: none; } }

.notice { background: var(--sa-white); border-radius: 14px; padding: 18px 20px;
  margin: 16px 0; max-width: 620px; }
.notice h3 { margin: 0 0 6px; }
.notice p { margin: 0 0 6px; color: var(--sa-slate); font-size: 14.5px; }
.notice p:last-child { margin: 0; }

.toast { opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity 200ms var(--sa-ease), transform 200ms var(--sa-ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.code-input input {
  width: 100%; height: 64px; border-radius: 12px; border: 1.5px solid var(--sa-line);
  background: var(--sa-white); font-family: var(--sa-font-serif); font-size: 30px;
  letter-spacing: 14px; text-align: center; color: var(--sa-navy);
}
.code-input input:focus { border-color: var(--sa-ocean); outline: none;
  box-shadow: 0 0 0 3px rgba(74,116,184,.18); }

.form-error { color: #B3541E; font-size: 13px; margin: 10px 0 0; }
.form-ok { color: var(--sa-bronze); font-size: 13px; margin: 10px 0 0; }

.account-panels { display: grid; gap: 18px; max-width: 560px; }
.panel .prow { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 12px 0; border-top: 1px solid var(--sa-line); font-size: 14.5px; }
.panel .prow:first-of-type { border-top: 0; }
.panel .prow .k { color: var(--sa-slate); }
.panel .prow select { height: 40px; border-radius: 10px; border: 1.5px solid var(--sa-line);
  background: var(--sa-white); font: inherit; padding: 0 10px; color: var(--sa-navy); }

.admin-bg { background: var(--sa-sand); min-height: 100dvh; }

.chapters li button.rowbtn { display: contents; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .room-overlay, .sheet, .scrim, .toast { transition: none !important; }
}


/* ---- QA round 1 fixes --------------------------------------------------- */
.card .cov { display: block; }
.card .cov img, .lrow img, .hero .cover, .np .cover, .mini .who img,
.detail .cover, .table .tt img {
  object-fit: cover; object-position: center;
}
.lrow img { height: 72px; }
.mini::before { width: var(--w, 0%) !important; }
.stage.no-panel { grid-template-columns: minmax(0, 640px); }
.np .aux { width: 100%; }


/* ---- QA round 2: brand + play discs + shelves --------------------------- */
.sidebar .brand { display: flex; justify-content: center; padding: 6px 0 28px; }
.sidebar .brand img.full { height: 46px; }

/* Play discs: light disc, navy glyph, a whisper of the compass hub. */
.playbig, .transport .pp, .mini .tp .pp {
  background: var(--sa-cream);
  color: var(--sa-navy);
  box-shadow: inset 0 0 0 2px var(--sa-brass), 0 12px 30px -12px rgba(0, 0, 0, 0.5);
}
.playbig:hover, .transport .pp:hover, .mini .tp .pp:hover { background: var(--sa-white); }


/* ---- QA round 3: installed-app safe areas + touch targets ---------------- */
.main { padding-top: env(safe-area-inset-top, 0px); }
.auth-wrap { padding-top: env(safe-area-inset-top, 0px); }
.room-top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.sidebar { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
.back { padding: 12px 10px; margin: 12px -10px 4px; min-height: 44px; border-radius: 10px; }
.hero .buy { justify-self: center; }

/* ------------------------------ watch page ------------------------------- */
.watch-overlay {
  position: fixed; inset: 0; z-index: 36;
  background: var(--sa-navy); color: var(--sa-cream);
  overflow-y: auto;
}
.watch-top { display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 6px; }
.watch-top .lab { font-size: 13px; color: var(--sa-mist); }
.watch-top button { width: 44px; height: 44px; background: none; border: 0;
  color: var(--sa-cream); display: flex; align-items: center; justify-content: center; }
.watch-stage { max-width: 960px; margin: 0 auto; padding: 8px 16px 40px; }
.watch-stage video { width: 100%; border-radius: 14px; background: #000;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
.watch-stage h1 { font-family: var(--sa-font-serif); font-weight: 400;
  font-size: 22px; margin: 16px 0 4px; color: var(--sa-cream); }
.watch-status { min-height: 1.3em; font-size: 13.5px; color: var(--sa-mist); margin: 6px 0; }
.watch-cta { margin-top: 8px; }


/* ---- burgundy rebrand ---------------------------------------------------- */
.room-overlay, .watch-overlay {
  background: linear-gradient(180deg, #700C18 0%, #5A040E 100%);
}
.btn-gold { background: var(--sa-cream); color: var(--sa-navy); }
.btn-gold:hover { background: var(--sa-white); }

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup .bmk { height: 40px; width: 40px; }
.brand-lockup .bword { font-family: var(--sa-font-serif); color: var(--sa-navy);
  font-size: 19px; line-height: 1.05; }
.brand-lockup .bword em { display: block; font-style: normal; font-size: 11px;
  letter-spacing: var(--sa-tracking-caps); text-transform: uppercase;
  opacity: 0.62; margin-top: 2px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .sidebar .brand .full { display: none; }
  .sidebar .brand img.mk { display: block; }
}
.auth-side .s-cream { width: 88px; margin-bottom: 18px; }
.auth-side .brandname { font-family: var(--sa-font-serif); color: var(--sa-cream);
  font-size: 26px; line-height: 1.1; }
.auth-side .brandname em { display: block; font-style: normal; font-size: 13px;
  letter-spacing: var(--sa-tracking-caps); text-transform: uppercase; opacity: 0.7; }

/* --------------------------- admin titles table --------------------------- */
.atable { padding: 6px 18px 10px; }
.atable .ahead, .atable .arow {
  display: grid; grid-template-columns: 52px 1fr 70px 76px 104px 64px 48px;
  gap: 12px; align-items: center;
}
.atable .ahead { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sa-slate); padding: 10px 0 8px; border-bottom: 1px solid var(--sa-line); }
.atable .arow { padding: 10px 0; border-bottom: 1px solid var(--sa-line);
  color: var(--sa-navy); font-size: 14px; }
.atable .arow:last-child { border-bottom: 0; }
.atable .arow img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 6px 16px -8px rgba(74, 7, 16, 0.5); }
.atable .at { min-width: 0; }
.atable .at b { display: block; font-family: var(--sa-font-serif); font-weight: 400;
  font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atable .at small { color: var(--sa-slate); font-size: 12px; }
.atable .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; }
.atable .dot.live { background: #3E7A4E; }
.atable .dot.draft { background: var(--sa-brass); }
@media (max-width: 760px) {
  .atable .ahead { display: none; }
  .atable .arow { grid-template-columns: 52px 1fr 76px; }
  .atable .arow span:nth-child(3), .atable .arow span:nth-child(4),
  .atable .arow span:nth-child(6), .atable .arow span:nth-child(7) { display: none; }
}

/* Private titles: the lock sits inline with its note, not on a line of its own. */
.detail .cta .note .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }

/* ------------------------------ playlists -------------------------------- */
/* A playlist's cover: its artwork, or a 2×2 mosaic of its first covers. */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; gap: 2px; background: var(--sa-sand); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.card--playlist .cov__badge {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(74, 7, 16, 0.82); color: var(--sa-cream); backdrop-filter: blur(4px);
}
.card--playlist .cov__badge .ic { width: 14px; height: 14px; }
.cover--playlist { display: block; aspect-ratio: 1; overflow: hidden; }
.cover--playlist > img, .cover--playlist .mosaic { width: 100%; height: 100%; object-fit: cover; }
.pl-list li button.rowbtn { cursor: pointer; }
.pl-list .pl-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-list .pl-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; box-shadow: var(--cover-shadow); }
.pl-list .pl-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-list li { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.pl-list .dur { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pl-list .dur .ic { width: 15px; height: 15px; }
.pl-list li.is-done .name { color: var(--sa-slate); }
.pl-list li.on { background: linear-gradient(90deg, rgba(112, 12, 24, 0.06), transparent 70%); }
.autoplay-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sa-slate); cursor: pointer; }
.autoplay-switch input { width: 18px; height: 18px; accent-color: var(--sa-navy); }

/* The Up next card, on the burgundy watch/listen overlays. */
.upnext {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  margin: 14px auto 0; padding: 12px 14px; max-width: 640px; text-align: left;
  border-radius: 16px; background: rgba(251, 243, 228, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 243, 228, 0.22);
  color: var(--sa-cream); animation: upnext-in .25s ease-out;
}
@keyframes upnext-in { from { opacity: 0; transform: translateY(6px); } }
.upnext__art { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.upnext__txt { min-width: 0; }
.upnext__txt small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-mist); }
.upnext__txt b { display: block; font-family: var(--sa-font-serif); font-weight: 400; font-size: 18px; margin: 2px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upnext__count { font-size: 13px; color: var(--sa-mist); }
.upnext__btns { display: flex; gap: 8px; }
.upnext .btn-ghost { background: transparent; color: var(--sa-cream); box-shadow: inset 0 0 0 1.5px rgba(251, 243, 228, 0.4); }
@media (max-width: 639px) {
  .upnext { grid-template-columns: 52px minmax(0, 1fr); }
  .upnext__art { width: 52px; height: 52px; }
  .upnext__btns { grid-column: 1 / -1; }
  .upnext__btns .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .upnext { animation: none; } }
.detail .partof { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sa-slate); margin: -6px 0 14px; }
.detail .partof .ic { width: 16px; height: 16px; }
.detail .partof a { color: var(--sa-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 639px) { .detail .partof { justify-content: center; } }
/* On the video itself (it has ended, so nothing is hidden): centered, like
   every streaming app, rather than below the fold on a big screen. */
.watch-frame { position: relative; }
.watch-upnext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; pointer-events: none; }
.watch-upnext .upnext { pointer-events: auto; margin: 0; width: min(560px, 100%);
  background: rgba(40, 4, 10, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(251, 243, 228, 0.22), 0 20px 50px -20px rgba(0, 0, 0, 0.7); }
.watch-upnext:empty { display: none; }

/* The camcorder date stamp on home videos: top-right of the PICTURE (video.js
   sets --pic-* to the picture's box, which differs from the frame's in full
   screen), where the native controls never cover it. Sized from the
   picture's width. Drawn by the page, not burned into the video. */
.watch-stamp {
  position: absolute; pointer-events: none; text-align: right;
  top: calc(var(--pic-top, 0px) + max(12px, var(--pic-w, 600px) * .022));
  right: calc(var(--pic-right, 0px) + max(14px, var(--pic-w, 600px) * .026));
  font: 700 clamp(12px, calc(var(--pic-w, 600px) * .021), 40px)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em; color: #FFE39A;
  text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 1px 4px rgba(0, 0, 0, .75);
}
.watch-stamp b, .watch-stamp span { display: block; font-weight: 700; }
.watch-stamp[hidden] { display: none; }
/* The same stamp as a caption, for the browser's own full screen (Safari's
   and Firefox's button, the iPhone player), which shows only the <video>. */
.watch-frame video::cue {
  color: #FFE39A; background: transparent; font: 700 1em/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 1px 4px rgba(0, 0, 0, .75);
}

/* Full screen is the whole frame: the video, its stamp and Up next. Two
   spellings, in separate rules (an unknown selector would void the list). */
.watch-frame:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; }
.watch-frame:-webkit-full-screen { background: #000; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.watch-frame:fullscreen video { width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: contain; }
.watch-frame:-webkit-full-screen video { width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: contain; }
.watch-fsx { display: none; }
.watch-frame:fullscreen .watch-fsx { display: flex; }
.watch-frame:-webkit-full-screen .watch-fsx { display: flex; }
.watch-fsx {
  position: absolute; top: 18px; left: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .2s ease;
}
.watch-frame.is-awake .watch-fsx, .watch-fsx:focus-visible { opacity: 1; }

/* The previous item's last picture, held until the next one is on screen. */
.watch-hold { position: absolute; pointer-events: none; object-fit: contain; border-radius: 14px;
  transition: opacity .3s ease; }
.watch-hold.is-gone { opacity: 0; }
.watch-frame:fullscreen .watch-hold { border-radius: 0; }
.watch-frame:-webkit-full-screen .watch-hold { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .watch-hold { transition: none; } }

/* ---------------------------- find home videos ---------------------------- */
.finder { margin: 26px 0 8px; display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.finder__title { font-family: var(--sa-font-serif); font-weight: 400; font-size: 34px; color: var(--sa-navy); margin: 8px 0 0; }
.fgroup { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: start; }
.fgroup__h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-slate); padding-top: 8px; }
.fgroup__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px;
  background: var(--sa-white); color: var(--sa-navy); font-size: 14px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--sa-line); transition: box-shadow .15s, background .15s; }
.fchip:hover { box-shadow: inset 0 0 0 1.5px var(--sa-sky); }
.fchip.is-on { background: var(--sa-navy); color: var(--sa-cream); box-shadow: none; }
.fchip__av { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center;
  font: 500 12px/1 var(--sa-font-serif); background: var(--sa-sand); color: var(--sa-navy); }
.fchip.is-on .fchip__av { background: rgba(251, 243, 228, .2); color: var(--sa-cream); }
.fchip__mode { display: inline-flex; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--sa-line); }
.fchip__mode .fchip { height: 30px; font-size: 13px; }
.finder__clear { align-self: flex-start; font-size: 14px; color: var(--sa-deep); text-decoration: underline; text-underline-offset: 2px; }
.card--browse .cov { display: grid; place-items: center; background: linear-gradient(160deg, #FBF3E4, #F1E2CB);
  box-shadow: inset 0 0 0 1.5px var(--sa-line), var(--cover-shadow); }
.card--browse .browse-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--sa-white); color: var(--sa-navy); }
.card--browse .browse-ic .ic { width: 28px; height: 28px; }
@media (max-width: 639px) {
  .fgroup { grid-template-columns: 1fr; gap: 6px; }
  .fgroup__h { padding-top: 0; }
  .fgroup__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 2px var(--gutter, 16px); scrollbar-width: none; }
  .fgroup__chips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
  .finder__title { font-size: 28px; text-align: center; }
}