/* =====================================================================
   Churroman: ads in the page margins (see ads.js)
   Big screens: a column on each side of the page that switches ads every few seconds.
   Everything else: the same ads once, in a row you can swipe near the end of the page.
   ===================================================================== */
.has-ads { position: relative; --content: 62rem; }
.has-ads:has(.lib-inner), .has-ads:has(.hs-inner) { --content: 64rem; }
.about.has-ads { --content: 64rem; }

/* ---- the columns ---- */
.ad-rail { display: none; }
@media (min-width: 90rem) {
  .has-ads { --rail: clamp(10.5rem, calc((100vw - var(--content)) / 2 - 2.5rem), 16rem); }
  .ad-rail {
    display: block;
    position: absolute;
    z-index: 3;
    top: 1.6rem;
    bottom: 2rem;
    width: var(--rail);
  }
  .ad-rail-l { left: calc((100% - var(--content)) / 2 - var(--rail) - 1.25rem); }
  .ad-rail-r { right: calc((100% - var(--content)) / 2 - var(--rail) - 1.25rem); }
  .ad-rail-in { position: sticky; top: 1.25rem; }
  .has-ads .ad-row { display: none; }
}

/* every ad in a column sits in the same spot, so the column never changes height */
.ad-slot { display: grid; grid-template-columns: minmax(0, 1fr); }
.ad-cell { grid-area: 1 / 1; display: flex; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.ad-cell.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .1s, transform .55s ease .1s, visibility 0s; }
.ad-cell > .ad { flex: 1; }
.ad-dots { display: flex; justify-content: center; gap: .1rem; margin-top: .55rem; }
.ad-dots button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ad-dots button::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--leader); transition: transform .2s ease, background-color .2s ease; }
.ad-dots button[aria-current="true"]::before { background: var(--red); transform: scale(1.35); }
.ad-dots button:focus-visible { outline: .2rem solid var(--ink); outline-offset: 0; }

/* ---- the swipe row ---- */
.ad-row { margin: 2.2rem -1.25rem 0; }
.ad-row-title {
  display: flex; align-items: center; gap: .8rem; margin: 0 1.25rem .9rem;
  font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.ad-row-title::before, .ad-row-title::after { content: ""; flex: 1 0 1.5rem; height: 2px; background: currentColor; opacity: .3; }
.ad-row-list {
  list-style: none; margin: 0; padding: .3rem 1.25rem 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(15.5rem, 76%); gap: .9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.25rem; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--leader) transparent;
}
.ad-row-list li { display: flex; scroll-snap-align: start; }
.ad-row-list li > .ad { flex: 1; }
@media (min-width: 46rem) {
  .ad-row { margin: 2.6rem 0 0; }
  .ad-row-title { margin-left: 0; margin-right: 0; }
  .ad-row-list { padding-left: 0; padding-right: 0; scroll-padding: 0; grid-auto-columns: 15.5rem; }
}
@media (min-width: 62rem) {
  .ad-row-list { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); overflow: visible; }
}

/* ---- one ad ---- */
.ad {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 1rem; background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: 0 .25rem 0 var(--card-shadow), 0 .5rem 1.1rem rgba(36, 19, 13, .1);
  transition: transform .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent;
}
a.ad:focus-visible, .ad a:focus-visible { outline: .2rem solid var(--ink); outline-offset: .15rem; }
.ad-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--reel-ph); }
.ad-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ad-pic-game { aspect-ratio: 16 / 10; }
.ad-body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; flex: 1; padding: .75rem .85rem .9rem; }
.ad-kicker { font-weight: 700; font-size: .85rem; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; color: var(--price); }
.ad-title { font-weight: 700; font-size: 1.3rem; line-height: 1.05; letter-spacing: .02em; }
.ad-serif { font-family: "Alegreya SC", Georgia, serif; font-size: 1.45rem; letter-spacing: .01em; }
.ad-text { font-weight: 500; font-size: 1rem; line-height: 1.25; color: var(--muted); }
.ad-cta {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: auto; padding: .38rem .7rem .34rem .9rem; border-radius: 99px;
  background: var(--red); color: var(--cream); box-shadow: 0 .18rem 0 var(--btn-edge);
  font-weight: 700; font-size: .95rem; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; text-align: left;
}
.ad-cta svg { flex: none; width: .95rem; height: .95rem; }
.ad-body > .ad-cta { margin-top: auto; }
.ad-body > :nth-last-child(2) { margin-bottom: .45rem; }
@media (hover: hover) {
  a.ad:hover, .ad-reel:hover, .ad-visit:hover { transform: translateY(-.15rem); box-shadow: 0 .35rem 0 var(--card-shadow), 0 .9rem 1.6rem rgba(36, 19, 13, .18); }
  a.ad:hover .ad-pic img, .ad-reel:hover .ad-frame img { transform: scale(1.05); }
  .ad-cta:hover { filter: brightness(1.1); }
}

/* the weekly contest: the dark games band, in small */
.ad-contest {
  background: #2A160E radial-gradient(ellipse at 50% -10%, rgba(217, 154, 50, .32), transparent 62%); color: var(--cream);
  box-shadow: 0 .25rem 0 #120906, 0 .5rem 1.1rem rgba(36, 19, 13, .2);
}
.ad-contest > .ad-kicker { padding: .7rem .85rem .55rem; color: var(--gold); font-size: .95rem; }
.ad-contest .ad-pic-game { margin: 0 .7rem; border-radius: .7rem; outline: 2px solid var(--gold); outline-offset: -2px; background: #3B2116; }
.ad-contest .ad-text { color: #E3C99A; }
.ad-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; width: 100%; margin-top: .15rem; }
.ad-prize { display: flex; flex-direction: column; align-items: center; padding: .25rem .1rem .3rem; border-radius: .55rem; background: #3B2116; border: 1.5px solid rgba(244, 230, 200, .18); font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 1.3rem; line-height: 1; }
.ad-prize b { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #E3C99A; margin-bottom: .1rem; }
.ad-prize.is-1 { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.ad-prize.is-1 b { color: var(--espresso); }
.ad-unit { align-self: center; margin-top: -.1rem; font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #E3C99A; }
.ad-meta { padding: .15rem .6rem; border-radius: 99px; background: rgba(244, 230, 200, .12); font-weight: 700; font-size: .92rem; }
.ad-contest .ad-cta { box-shadow: 0 .18rem 0 #6E1712; }

/* party packs: a savings sticker on the photo */
.ad-sticker {
  position: absolute; top: .5rem; right: .5rem; padding: .3rem .6rem .26rem; border-radius: 99px;
  background: var(--gold); color: var(--espresso); font-weight: 700; font-size: .9rem; letter-spacing: .04em; line-height: 1.1;
  box-shadow: 0 .15rem .4rem rgba(36, 19, 13, .3); transform: rotate(3deg);
}
.ad-price { font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 1.45rem; line-height: 1; color: var(--price); }

/* a TikTok or Instagram reel: the cover picture like a phone screen */
.ad-reel { background: #24130D; color: var(--cream); box-shadow: 0 .25rem 0 #120906, 0 .5rem 1.1rem rgba(36, 19, 13, .22); }
.ad-reel-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.ad-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #3B2116; }
.ad-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ad-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(transparent, rgba(20, 10, 6, .55)); pointer-events: none; }
.ad-plat, .ad-views {
  position: absolute; z-index: 1; top: .5rem; display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .55rem .2rem .45rem; border-radius: 99px; background: rgba(20, 10, 6, .72); color: #fff;
  font-weight: 700; font-size: .82rem; line-height: 1.1; letter-spacing: .03em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ad-plat { left: .5rem; }
.ad-plat svg { width: .95rem; height: .95rem; }
.ad-views { right: .5rem; padding-left: .55rem; }
.is-instagram .ad-plat { background: linear-gradient(45deg, rgba(240, 148, 51, .92), rgba(220, 39, 67, .92) 55%, rgba(188, 24, 136, .92)); }
.ad-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin: -1.55rem 0 0 -1.55rem;
  border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--red); box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.ad-play svg { width: 1.35rem; height: 1.35rem; margin-left: .15rem; }
.ad-reel .ad-body { padding-bottom: .55rem; }
.ad-cap { font-weight: 500; font-size: 1rem; line-height: 1.25; color: #F4E6C8; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-reel .ad-cta { box-shadow: 0 .18rem 0 #6E1712; }
.ad-follow {
  display: flex; align-items: center; gap: .4rem; margin: 0 .85rem .8rem; padding-top: .55rem; border-top: 1px solid rgba(244, 230, 200, .16);
  color: #E3C99A; font-weight: 500; font-size: .92rem; line-height: 1.15; text-decoration: none; min-width: 0;
}
.ad-follow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-follow b { color: var(--cream); }
.ad-follow svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--gold); }
@media (hover: hover) {
  .ad-reel:hover .ad-play { transform: scale(1.1); }
  .ad-follow:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
}

/* visit the stand, with a real Google review */
.ad-visit { border: 2px solid rgba(217, 154, 50, .55); }
.ad-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; font-size: .95rem; }
.ad-rating > svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ad-stars { display: inline-flex; gap: .04rem; color: #E8A317; }
.ad-stars svg { width: .9rem; height: .9rem; }
.ad-quote { margin: .2rem 0 0; font-weight: 500; font-size: 1.12rem; line-height: 1.28; }
.ad-by { font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ad-rule { align-self: stretch; height: 6px; margin: .35rem 0 .1rem;
  background: radial-gradient(circle, var(--scroll) 0 2.5px, transparent 3px) center / 6px 6px no-repeat,
              linear-gradient(90deg, var(--scroll) 0 calc(50% - .55rem), transparent calc(50% - .55rem) calc(50% + .55rem), var(--scroll) calc(50% + .55rem) 100%) center / 100% 2px no-repeat; opacity: .8; }
.ad-open { font-weight: 700; font-size: .95rem; color: var(--muted); }
.ad-open.is-open { color: #2E7D32; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ad-open.is-open { color: #7BC67E; } }
:root[data-theme="dark"] .ad-open.is-open { color: #7BC67E; }

@media (prefers-reduced-motion: reduce) {
  .ad, .ad-cell, .ad-cell.is-on, .ad-pic img, .ad-frame img, .ad-play, .ad-dots button::before { transition: none; }
  .ad-cell { transform: none; }
}