/* =============================================================================
   themes/urbanlist.css — Urban List case study
   -----------------------------------------------------------------------------
   Art direction: "the call sheet". The whole case sits on paper, set like a
   production document — heavy rules, caps field labels, a production board,
   a strategy strip — because the work is commercial content production: the content
   and copy, the shoots, the research behind them and the strategy after.
   ============================================================================= */

.theme-urbanlist .case-sheet { padding-bottom: clamp(40px, 6vw, 90px); }

/* ---- Hero: title on the left, the call sheet on the right ------------------ */
.ul-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.6vw, 44px); align-items: start; }
.ul-hero__id { grid-column: 1 / span 6; }
.ul-hero__sheet { grid-column: 8 / span 5; }
@media (max-width: 960px) { .ul-hero__id, .ul-hero__sheet { grid-column: 1 / -1; } }

.callsheet {
  border: 1.5px solid var(--sumi);
  background: rgba(255, 255, 255, .22);
}
.callsheet__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1.5px solid var(--sumi); }
.callsheet__top .org-plate { width: 150px; padding: 8px 10px; }
.callsheet__top .label { color: var(--sumi); }
.callsheet dl > div { display: grid; grid-template-columns: 7.6rem 1fr; border-bottom: 1px solid rgba(18, 16, 21, .22); }
.callsheet dl > div:last-child { border-bottom: 0; }
.callsheet dt {
  padding: 12px 14px 12px 18px;
  border-right: 1px solid rgba(18, 16, 21, .22);
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(18, 16, 21, .7);
}
.callsheet dd { padding: 10px 18px; line-height: 1.35; }
.callsheet dd b { font-weight: 600; }
.callsheet .descriptor { color: rgba(18, 16, 21, .7); }

/* ---- Production board: five columns of real responsibilities ---------------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid var(--sumi); }
.board__col { padding: 16px 16px 20px; display: grid; gap: 10px; align-content: start; }
.board__col + .board__col { border-left: 1px solid rgba(18, 16, 21, .22); }
.board__col h3 { font-size: 1.5rem; line-height: 1; padding-bottom: 10px; border-bottom: 1.5px solid var(--sumi); }
.board__col .numeral { display: block; margin-bottom: 4px; }
.board__card {
  padding: 10px 12px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(18, 16, 21, .14);
  font-size: 1.04rem;
  line-height: 1.35;
}
.board__card b { font-weight: 600; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board__col:nth-child(odd) { border-left: 0; } .board__col { border-bottom: 1px solid rgba(18, 16, 21, .22); } }
@media (max-width: 600px) { .board { grid-template-columns: 1fr; } .board__col + .board__col { border-left: 0; } }

/* ---- Cities strip ------------------------------------------------------------- */
.cities { display: flex; flex-wrap: wrap; gap: 6px 0; border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); }
.cities span {
  flex: 1 1 140px;
  padding: 14px 10px;
  font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
  text-align: center;
}
.cities span + span { border-left: 1px solid rgba(18, 16, 21, .22); }
.cities small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(18, 16, 21, .62); margin-top: 4px; }

/* ---- Strategy & event development: four disciplines, set like a report ------- */
.report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); }
.report li { display: grid; gap: 6px; align-content: start; padding: 18px 18px 22px; }
.report li + li { border-left: 1px solid rgba(18, 16, 21, .22); }
.report b { font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); font-weight: 500; line-height: 1; }
.report li > span:last-child { font-size: 1.02rem; line-height: 1.35; color: var(--text-soft); }
/* the last stage is the live one: it carries the spark */
.report__now { position: relative; background: rgba(255, 255, 255, .45); }
.report__now::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  background: url("/assets/brand/glint-paper.svg") center / contain no-repeat;
}
@media (max-width: 760px) {
  .report { grid-template-columns: 1fr; }
  .report li + li { border-left: 0; border-top: 1px solid rgba(18, 16, 21, .22); }
}


/* ---- The world: Urban List's black and white --------------------------------
   The opening sits on black, the call sheet lies on it like a printed sheet on
   a desk, and the brands run past on a white ticker set in a bold geometric
   sans (Poppins, the closest match to the logo's type) with the logo's colon. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.world--ul { background: radial-gradient(70vw 60vh at 85% 0%, #141414, transparent 70%), #000; }
.world--ul .callsheet {
  background: var(--bone) var(--paper-grain) 0 0 / 220px 220px;
  color: var(--sumi);
  border-color: var(--bone);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  rotate: 1.2deg;
}
.world--ul .callsheet ::selection { background: var(--sumi); color: var(--bone); }
.ul-ticker {
  display: flex;
  align-items: center;
  height: clamp(48px, 5vw, 76px);
  margin-top: clamp(48px, 6vw, 96px);
  overflow: hidden;
  background: #fff;
  color: #000;
  rotate: -1.4deg;
  scale: 1.04;
}
.ul-ticker > div { display: flex; flex: none; white-space: nowrap; }
.ul-ticker span {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, .8rem + 1.4vw, 2.2rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.ul-ticker b { margin: 0 .55em; }
.ul-ticker b::before { content: ":"; }          /* the logo's colon, as the separator */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .ul-ticker > div { animation: ul-ticker 34s linear infinite; }
}
@keyframes ul-ticker { to { transform: translate3d(-50%, 0, 0); } }
/* keeps running while you scroll (base.css §11 pauses other loops) */
.is-scrolling [data-live].is-live .ul-ticker > div { animation-play-state: running !important; }