/* ============================================================
    MY LIFE IN BERKELEY — Infographic Poster
    Canvas 564 x 846
    Fonts: Romestone (title), Delirium (section headings),
          Oswald (numbers/labels), Playfair Display Italic (captions)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Romestone';
  src: url(https://res.cloudinary.com/iqfyy3kl/raw/upload/v1790242542/romestone.ttf) format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delirium';
  src: url(https://res.cloudinary.com/iqfyy3kl/raw/upload/v1790242542/DELIRIUM.ttf) format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url(https://res.cloudinary.com/iqfyy3kl/raw/upload/v1790242542/Oswald.ttf) format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Italic';
  src: url(https://res.cloudinary.com/iqfyy3kl/raw/upload/v1790242543/Playfair-Italic.ttf) format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #EBEBED;
  --ink: #3A3436;
  --yellow: #EDDF00;
  --gray: #A2A2A2;
  --gray-label: #6A6A6A;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #d9d9dc;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.poster {
  position: relative;
  width: 564px;
  height: 846px;
  background: var(--bg);
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

/* ---------- Typography helpers ---------- */
/* Section headings: Delirium, with per-heading horizontal scale */
.display {
  position: absolute;
  font-family: 'Delirium', 'Arial Narrow', sans-serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.serif-it {
  position: absolute;
  font-family: 'Playfair Italic', Georgia, serif;
  font-style: italic;
  color: var(--ink);
  line-height: 1.15;
}

.body-sans {
  position: absolute;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  color: var(--ink);
  line-height: 1.1;
}

/* ---------- Divider rules ---------- */
.rule {
  position: absolute;
  height: 1.5px;
  background: var(--gray);
}

/* ============================================================
    1. TITLE — Romestone
   ============================================================ */
.title {
  font-family: 'Romestone', 'Arial Narrow', sans-serif;
  left: 28px;
  top: 26px;
  font-size: 96px;
  line-height: 0.92;
  transform: scaleX(1.04);
  transform-origin: left top;
}
.rule-title { left: 28px; top: 133px; width: 384px; }

/* ============================================================
    2. VERTICAL STEPS (right edge) — Oswald, rotated
   ============================================================ */
.steps {
  position: absolute;
  left: 441px;
  top: 240px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.steps-squeeze {
  transform: scaleX(0.728);
  transform-origin: left top;
}
.steps-num {
  position: absolute;
  left: 0; top: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 74px;
  line-height: 0.82;
  color: var(--ink);
  white-space: nowrap;
}
.steps-lbl {
  position: absolute;
  left: 130px; top: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 74px;
  line-height: 0.82;
  color: var(--yellow);
  white-space: nowrap;
}
/* thin italic caption beside the number, same length (y29-240) */
.steps-cap {
  position: absolute;
  left: 515px;
  top: 240px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.steps-cap-sq {
  font-family: 'Playfair Italic', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
  transform: scaleX(0.55);
  transform-origin: left top;
}

/* ============================================================
    3. MOST COMMONLY CONSUMED GOODS
   ============================================================ */
.goods-head-1 { left: 29px; top: 150px; font-size: 55px; transform: scaleX(0.75); transform-origin: left top; }
.goods-head-2 { left: 29px; top: 202px; font-size: 55px; transform: scaleX(0.75); transform-origin: left top; }

.food-dot {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--yellow);
}
.food-img {
  position: absolute;
  object-fit: fill;
}

/* food bullet list — Oswald */
.goods-list { left: 350px; top: 158px; font-size: 14px; }
.goods-list .item { position: relative; padding-left: 18px; margin-bottom: 7px; white-space: nowrap; }
.goods-list .item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.rule-goods-l { left: 28px; top: 267px; width: 214px; }
.rule-goods-r { left: 268px; top: 267px; width: 272px; }

/* ============================================================
    4. MY HOT SPOTS — vertical bars
   ============================================================ */
.hotspot-bar {
  position: absolute;
  width: 12px;
  background: var(--yellow);
}
/* Rotated -90 around its own top-left; Oswald, natural width */
.hotspot-label {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}
.hotspot-label.gray { color: var(--gray-label); }

.hotspots-head { left: 28px; top: 366px; font-size: 39px; transform: scaleX(0.8); transform-origin: left top; }
.hotspots-cap { left: 132px; top: 375px; font-size: 13px; width: 132px; }
.rule-hotspots { left: 28px; top: 416px; width: 214px; }

/* ============================================================
    5. MOST LISTENED PLAYLISTS — pie
   ============================================================ */
.playlists-head-1 { left: 268px; top: 278px; font-size: 39px; transform: scaleX(0.8); transform-origin: left top; }
.playlists-head-2 { left: 268px; top: 320px; font-size: 39px; transform: scaleX(0.77); transform-origin: left top; }

.pie { position: absolute; }
.pie-num {
  position: absolute;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  color: var(--ink);
  line-height: 1;
}

/* legend — Oswald, smaller, mildly compressed */
.legend {
  left: 268px;
  top: 360px;
  font-size: 12px;
  transform: scaleX(0.88);
  transform-origin: left top;
}
.legend .lrow { white-space: nowrap; line-height: 1.4; }
.spotify { left: 268px; top: 458px; font-size: 14px; }

/* ============================================================
    ============================================================ */
.trans-bar { position: absolute; height: 28px; background: var(--yellow); }
.trans-label {
  position: absolute;
  left: 28px;
  font-family: 'Romestone', serif;
  font-size: 33px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.trans-cap { left: 28px; top: 575px; font-size: 13px; width: 235px; }
.rule-trans { left: 28px; top: 601px; width: 214px; }

/* ============================================================
    7. BEST PLACES TO EAT — boxed star ratings
   ============================================================ */
.eat-box {
  position: absolute;
  left: 269.5px; top: 476.5px;
  width: 265px; height: 124px;
  border: 1.5px solid var(--gray);
}
.eat-head { left: 280px; top: 486px; font-size: 39px; transform: scaleX(0.83); transform-origin: left top; }
.eat-cap { left: 410px; top: 490px; font-size: 13px; width: 124px; }

.rest-col { position: absolute; }
.rest-inner {
  position: absolute;
  left: 0; top: 0;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.rest-name {
  position: absolute;
  left: 0; top: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.stars {
  position: absolute;
  left: 0; top: 17px;
  display: flex;
}
.star { width: 11px; height: 11px; display: block; }

/* ============================================================
    8. WEEKLY TIME SPENT IN COMMITMENTS — area chart
   ============================================================ */
.week-head-1 { left: 28px; top: 622px; font-size: 39px; transform: scaleX(0.82); transform-origin: left top; }
.week-head-2 { left: 28px; top: 664px; font-size: 39px; transform: scaleX(0.77); transform-origin: left top; }
.area { position: absolute; }
.day-label { font-size: 13px; }
.rule-area { left: 28px; top: 718px; width: 508px; }

/* ============================================================
    9. BOTTOM — wake / sleep times — Delirium
   ============================================================ */
.wake-time {
  left: 28px; top: 744px;
  font-family: 'Delirium', sans-serif;
  font-size: 97px;
  line-height: 1;
  transform: scaleX(1.06);
  transform-origin: left top;
}
.sleep-time {
  left: 356px; top: 744px;
  font-family: 'Delirium', sans-serif;
  font-size: 97px;
  line-height: 1;
  transform: scaleX(1.06);
  transform-origin: left top;
}
.time-arrow { position: absolute; }