/* The Daily With — public page. No web fonts, no third-party anything. */

/* Colours come from themes.css (one block per creator theme); this file
   only maps them onto the names used below. */
:root {
  --bg: var(--pub-bg);
  --surface: var(--pub-surface);
  --surface-2: var(--pub-surface-2);
  --line: var(--pub-line);
  --text: var(--pub-text);
  --muted: var(--pub-muted);
  --accent: var(--pub-accent);
  --accent-deep: var(--pub-accent-deep);
  --on-accent: var(--pub-on-accent);
  --shade: var(--pub-shade);
  --radius: 16px;

  /* One column, one gutter. The hero, the grids and every button share
     --inner, so nothing on the page has an edge of its own. */
  --gutter: 16px;
  --column: 520px;
  --inner: calc(var(--column) - 2 * var(--gutter));
  /* What one full-width item actually measures at this viewport. */
  --item: calc(min(100vw, var(--column)) - 2 * var(--gutter));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: var(--pub-scheme); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.page { max-width: var(--column); margin: 0 auto; padding: 0 0 120px; }
@media (min-width: 560px) {
  .page.profile { padding-top: 22px; }
}

/* ------------------------------------------------------------- hero */

.hero {
  position: relative;
  margin: var(--gutter) var(--gutter) 0;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  /* Height, not aspect-ratio: pairing `aspect-ratio` with `max-height`
     makes the browser shrink the WIDTH to hold the ratio, which pulled the
     hero narrower than the buttons on desktop. Setting the height outright
     keeps the width at the column and caps how tall the photo gets, so the
     first button stays in view on a laptop. 4:5 until the cap bites.
     svh where supported, vh everywhere else. */
  height: min(calc(var(--item) * 1.25), 520px);
  height: min(calc(var(--item) * 1.25), 64svh, 520px);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above centre, so bias the crop upward when the box is
     wider than the photo. */
  object-position: center 30%;
}
/* Ends fully opaque in the theme's shade colour. On dark themes that is the
   page background, so the photo fades into the page with no seam; on light
   themes it is a dark overlay, so the hero reads as a rounded photo card. */
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--shade) / 0) 34%, rgb(var(--shade) / .58) 68%, rgb(var(--shade) / 1) 100%);
}
/* Always light text: it sits on the dark shade whatever the theme. */
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; color: #f6f1f7; }

/* Only ever rendered when a photo really was added recently, so it cannot
   become a permanent fake-urgency badge. */
.fresh {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 9px; padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.fresh .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22);
}
.handle { margin: 0 0 5px; font-size: .88rem; color: rgba(255, 255, 255, .72); letter-spacing: .01em; }
.hero h1 {
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}
.hook { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1.02rem; line-height: 1.35; }

/* ----------------------------------------------------------- blocks */

.block { padding: 18px var(--gutter) 0; }
.section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px;
}
.section-title h2 {
  margin: 0;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.section-title span { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------- buttons */

.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 58px; padding: 14px 18px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; font-size: 1.05rem; line-height: 1.15;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn small { font-weight: 400; font-size: .78rem; opacity: .8; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent; color: var(--on-accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: .95rem; width: auto; }
.ctas { display: grid; gap: 10px; }
.ctas-sm { grid-template-columns: 1fr 1fr; gap: 8px; }
.ctas-sm .btn { min-height: 50px; padding: 10px 12px; font-size: .98rem; box-shadow: none; }

/* ------------------------------------------------------- offer cards */

/* A button carrying a photo is tapped far more than a button carrying
   only words. The creator picks which photo sits on each one. */
.cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease;
}
.cta-plain { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 12px 9px 16px; }
.cta:active { transform: scale(.985); }
.cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 32%, transparent);
}
.cta-thumb {
  width: 56px; height: 56px; flex: none;
  border-radius: 13px; object-fit: cover;
  background: var(--surface-2);
}
.cta-primary .cta-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.cta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cta-text strong {
  font-size: 1.08rem; font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cta-text small {
  font-size: .78rem; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cta-primary .cta-text small { color: var(--on-accent); opacity: .82; }
.cta-go { width: 20px; height: 20px; flex: none; opacity: .5; }
.cta-primary .cta-go { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } .cta:active { transform: none; } }

.gate { text-align: center; }
.gate .btn { font-size: 1.1rem; }
.gate-note { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }
.gate-note a { color: inherit; }

/* ---------------------------------------------------------- socials */

.socials {
  display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 0 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.socials::-webkit-scrollbar { display: none; }
.socials li { flex: 0 0 auto; }
.socials a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 78px; padding: 12px 4px 10px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; font-size: .72rem; color: var(--muted);
}
.socials a:active { background: var(--surface-2); }
.socials .icon { width: 22px; height: 22px; color: var(--text); }

/* ------------------------------------------------------------- grid */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid figure {
  margin: 0; position: relative;
  aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface);
}
.grid img { width: 100%; height: 100%; object-fit: cover; }
.grid .tile {
  all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.grid .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 10px 8px; font-size: .78rem; line-height: 1.3;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  pointer-events: none;
}

/* ------------------------------------------------------------- more */

details.more summary { list-style: none; cursor: pointer; }
details.more summary::-webkit-details-marker { display: none; }
.more-teaser {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  border-radius: 12px; overflow: hidden;
}
.more-teaser img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  filter: blur(16px) saturate(1.2); transform: scale(1.2);
}
.more-teaser .cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--shade) / .35);
}
details[open] .more-teaser { display: none; }
details[open] .section-title { margin-bottom: 10px; }

/* ---------------------------------------------- out of the app browser */

/* One quiet line at the top, only inside an app's browser. */
.inapp {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--column); margin: 0 auto; padding: 9px var(--gutter);
  font-size: .8rem; line-height: 1.3; color: var(--muted);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.inapp-text { flex: 1 1 auto; min-width: 0; }
.inapp-open {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
}
.inapp-open:active { background: var(--accent-deep); }

/* ----------------------------------------------------------- sticky */

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transition: transform .25s ease;
}
.sticky > .ctas { max-width: var(--inner); margin: 0 auto; }
.sticky.is-hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }

/* --------------------------------------------------------- lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .96);
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.lb-btn {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(22, 18, 26, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #ffffff; /* the viewer is always black, whatever the theme */
  cursor: pointer;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:disabled { opacity: .25; cursor: default; }
.lb-close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-bar {
  position: absolute; left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 70px; text-align: center; pointer-events: none;
}
.lb-count { font-size: .78rem; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; }
.lb-caption { font-size: .9rem; line-height: 1.35; color: #ffffff; }
.lb-caption:empty { display: none; }

/* ----------------------------------------------------------- footer */

.foot {
  padding: 30px var(--gutter) 10px; text-align: center;
  color: var(--muted); font-size: .78rem; line-height: 1.9;
}
.foot a { color: inherit; text-decoration: none; }
.brand-small { opacity: .7; }

/* -------------------------------------------------- site/docs pages */

.doc { padding: 24px 20px 60px; }
.doc-head { margin-bottom: 28px; }
.brand { font-weight: 700; text-decoration: none; letter-spacing: -.01em; }
.doc-body h1 { font-size: 2rem; line-height: 1.1; margin: 0 0 12px; letter-spacing: -.02em; text-wrap: balance; }
.doc-body h2 { font-size: 1.05rem; margin: 26px 0 6px; }
.doc-body p { margin: 0 0 12px; max-width: 62ch; }
.doc-body .lede { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }
.doc .foot { text-align: left; padding-left: 0; }