/* Original 564 × 846 Figma poster. BEM names; Flexbox for document layout. */
@font-face { font-family: Romestone; src: url('assets/fonts/romestone.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: 'Delirium NCV'; src: url('assets/fonts/delirium-ncv.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: Oswald; src: url('assets/fonts/oswald.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: 'Playfair Display'; src: url('assets/fonts/playfair-display-italic.ttf') format('truetype'); font-style: italic; font-weight: 400; font-display: block; }
:root { --poster-width: 564px; --poster-height: 846px; --color-paper: #ebebed; --color-ink: #3a3436; --color-accent: #eddf00; --color-rule: #a2a2a2; --font-display: Romestone, sans-serif; --font-numbers: 'Delirium NCV', sans-serif; --font-label: Oswald, sans-serif; --font-caption: 'Playfair Display', serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #d8d8dc; color: var(--color-ink); }
h1, h2, p, figure, ol, ul { margin: 0; padding: 0; }
h1, h2 { font-weight: 400; }
img { display: block; flex-shrink: 0; align-self: flex-start; }
.poster-view { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 24px; }
.poster { display: flex; flex-direction: column; flex: 0 0 var(--poster-width); width: var(--poster-width); height: var(--poster-height); padding: 13px 3px 4px 27px; overflow: hidden; background: var(--color-paper); }
.poster > *, .poster__hero > *, .poster__intro > *, .poster__main > *, .poster__column > * { flex-shrink: 0; }
.section-title { font-family: var(--font-display); font-size: 32.563026px; line-height: 1.0526171923; letter-spacing: .01em; white-space: nowrap; }
.section-title > span, .food__title > span { display: block; }
.caption { font-family: var(--font-caption); font-size: 10.341953px; font-style: italic; font-weight: 400; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; }
/* Hero: introduction and rotated step statistic form two flex columns. */
.poster__hero { display: flex; height: 254px; }
.poster__intro { display: flex; flex-direction: column; width: 409px; }
.poster__header { display: flex; flex-direction: column; height: 137px; }
.poster__title { font-family: var(--font-display); font-size: 96px; line-height: normal; letter-spacing: .01em; width: 505px; height: 119.25px; flex-shrink: 0; white-space: nowrap; }
.poster__divider { margin-left: 1px; }
.food { display: flex; align-items: flex-start; position: relative; height: 117px; padding-left: 1px; }
.food__title { flex: 0 0 161px; font-family: var(--font-display); font-size: 46.194061px; letter-spacing: .01em; line-height: 1.0526171923; }
.food__grid { display: flex; flex-direction: column; flex: 0 0 142px; transform: translateY(-1px); }
.food__row { display: flex; height: 50px; }
.food__row:last-child { height: 49px; }
.food__item { position: relative; flex: 0 0 69px; height: 100%; }
.food__item:nth-child(2) { flex-basis: 73px; }
.food__accent, .food__image { position: absolute; }
.food__image { object-fit: cover; left: 0; top: 0; }
.food__accent { left: 24px; top: 3px; }
.food__item--salmon .food__accent, .food__item--avocado .food__accent { left: 31px; }
.food__item--figs .food__image, .food__item--salmon .food__image { top: 4px; }
.food__item--eggs .food__accent, .food__item--avocado .food__accent { top: 2px; }
.food__item--avocado .food__image { top: 6px; }
.food__legend { flex: 0 0 80px; margin-left: 9px; margin-top: -1px; padding-left: 22.5px; font-family: var(--font-label); font-size: 15px; line-height: 1.6; letter-spacing: .01em; }
.food__divider { position: absolute; left: 1px; bottom: -.75px; }
.steps { display: flex; width: 125px; }
.steps__numbers { display: flex; flex-direction: column; flex: 0 0 89px; min-width: 0; padding-top: 11px; }
.steps__slot { display: flex; flex: 0 0 126px; width: 100px; align-items: center; justify-content: center; }
.steps__slot--value { margin-top: -32px; }
.steps__label, .steps__value { width: 126px; height: 100px; flex-shrink: 0; transform: rotate(-90deg) translateY(-7px); font-family: var(--font-numbers); font-size: 98.285233px; line-height: 1.0526171923; letter-spacing: .01em; }
.steps__label { color: var(--color-accent); }
.steps__caption-slot { display: flex; flex: 0 0 42px; min-width: 0; height: 228px; justify-content: center; align-items: center; }
.steps__caption { flex: 0 0 228px; height: 42px; transform: rotate(-90deg); }
/* Main body: two flex columns, each containing two stacked sections. */
.poster__main { display: flex; gap: 21px; height: 334px; margin-bottom: 18px; }
.poster__column { display: flex; flex-direction: column; }
.poster__column--left { width: 215px; }
.poster__column--right { width: 298px; }
.hotspots { position: relative; display: flex; flex-direction: column; height: 166px; padding-top: 19px; }
.hotspots__chart { display: flex; align-items: flex-end; margin-left: 3px; height: 69.5px; flex-shrink: 0; }
.hotspots__item { display: flex; align-items: flex-end; height: 69.5px; flex: 0 0 37px; }
.hotspots__item--jacobs { flex-basis: 38px; }
.hotspots__item--cheit { flex-basis: 35px; }
.hotspots__item--kresge { flex-basis: 28px; }
.hotspots__label-slot { display: flex; align-items: center; justify-content: center; width: 13.666666px; height: 61.5px; flex-shrink: 0; }
.hotspots__label { flex: 0 0 61.5px; height: 13.666666px; transform: rotate(-90deg); font-family: var(--font-label); font-size: 11.711265px; line-height: 1.0526171923; letter-spacing: .01em; white-space: nowrap; }
.hotspots__item--soda .hotspots__label { color: #6a6a6a; }
.hotspots__bar { width: 12px; margin-left: 2.333334px; margin-bottom: .5px; background: var(--color-accent); }
.hotspots__item--jacobs .hotspots__bar { height: 69px; }
.hotspots__item--soda .hotspots__bar { height: 61px; }
.hotspots__item--dwinelle .hotspots__bar { height: 29px; width: 13px; }
.hotspots__item--cheit .hotspots__bar { height: 13px; }
.hotspots__item--mlk .hotspots__bar { height: 21px; }
.hotspots__item--kresge .hotspots__bar { height: 9px; }
.hotspots__heading { display: flex; margin-top: 11.5px; margin-left: 1px; }
.hotspots__title { flex: 0 0 98px; }
.hotspots__caption { padding-top: 5px; }
.hotspots__divider { position: absolute; top: 148.25px; left: 1px; }
.transport { position: relative; display: flex; flex-direction: column; height: 168px; }
.transport__chart { display: flex; flex-direction: column; margin-left: 1px; }
.transport__row { display: flex; height: 34px; flex-shrink: 0; }
.transport__label { flex: 0 0 27px; }
.transport__bar { height: 28px; margin-top: 3px; background: var(--color-accent); width: 115px; }
.transport__row--scooter .transport__label { flex-basis: 56px; }
.transport__row--scooter .transport__bar { width: 117px; }
.transport__row--foot .transport__label { flex-basis: 33px; }
.transport__row--foot .transport__bar { width: 175px; }
.transport__row--car .transport__bar { width: 64px; }
.transport__caption { margin-top: 5px; }
.transport__divider { position: absolute; bottom: -.75px; left: 1px; }
.playlists { position: relative; height: 209px; display: flex; flex-direction: column; }
.playlists__divider { position: absolute; left: 5px; top: -.75px; }
.playlists__body { display: flex; margin-top: 12px; }
.playlists__copy { display: flex; flex-direction: column; flex: 0 0 101px; padding-top: 1px; }
.playlists__title { margin-left: 5px; height: 77px; }
.playlists__legend { font-family: var(--font-label); font-size: 10.341953px; line-height: 1.4; letter-spacing: .01em; padding-left: 15.513px; height: 79px; white-space: nowrap; }
.playlists__caption { margin-left: 5px; }
.playlists__chart { position: relative; width: 170.136px; height: 174px; }
.playlists__pie { position: absolute; top: -.4176px; left: -.374px; }
.playlists__index { position: absolute; font-family: var(--font-numbers); line-height: .8900743127; letter-spacing: .01em; transform: translateY(-.072em); }
.playlists__index--1 { left: 121.178574px; top: 101.5px; font-size: 43px; }
.playlists__index--2 { left: 37.285713px; top: 105.64286px; font-size: 37px; }
.playlists__index--3 { left: 40.392857px; top: 40.392857px; font-size: 30px; }
.playlists__index--4 { left: 83.89286px; top: 23.821428px; font-size: 27px; }
.playlists__index--5 { left: 121.178574px; top: 34.17857px; font-size: 23px; }
.restaurants { display: flex; flex-direction: column; width: 266px; height: 125px; margin-left: 6px; border: 1px solid var(--color-rule); padding: 7px 9px 9px; }
.restaurants__heading { display: flex; height: 38px; flex-shrink: 0; }
.restaurants__title { flex: 0 0 132px; }
.restaurants__caption { padding-top: 5px; }
.restaurants__chart { display: flex; height: 69px; align-items: flex-end; }
.restaurants__item { display: flex; flex: 0 0 32px; align-items: flex-end; height: 69px; }
.restaurants__item--jupiters { flex-basis: 31px; }
.restaurants__item--sizzling { flex-basis: 26px; }
.restaurants__label-slot { display: flex; align-items: center; justify-content: center; width: 14px; height: 61.5px; flex-shrink: 0; margin-bottom: .5px; }
.restaurants__label { flex: 0 0 61.5px; height: 13.666666px; transform: rotate(-90deg); font-family: var(--font-label); font-size: 11.711265px; line-height: 1.0526171923; letter-spacing: .01em; white-space: nowrap; }
.restaurants__item--la-vals .restaurants__label-slot { height: 68px; margin-bottom: 0; }
.restaurants__item--la-vals .restaurants__label { flex-basis: 68px; height: 14px; }
.restaurants__item--la-note .restaurants__label-slot { height: 92px; margin-bottom: 0; }
.restaurants__item--la-note .restaurants__label { flex-basis: 92px; height: 14px; }
.restaurants__item--sizzling .restaurants__label-slot { height: 76px; margin-bottom: 0; width: 13px; }
.restaurants__item--sizzling .restaurants__label { flex-basis: 76px; height: 14px; }
.restaurants__rating { position: relative; display: flex; flex-direction: column-reverse; width: 12px; }
.restaurants__star { display: flex; justify-content: center; align-items: flex-start; height: 11px; flex-shrink: 0; }
.restaurants__star--tall { height: 12px; }
.restaurants__half-mask { position: absolute; top: -4px; left: 0; height: 9px; width: 12px; background: var(--color-paper); }
.restaurants__item--sizzling .restaurants__half-mask { top: -5px; }
/* Decorative chart layers keep local positioning; their sections remain in flex flow. */
.weekly { position: relative; display: flex; flex-direction: column; height: 122px; padding-left: 3px; }
.weekly__title { position: relative; z-index: 1; }
.weekly__area { position: absolute; left: 3px; top: 10px; }
.weekly__days { position: absolute; display: flex; top: 84px; left: 3px; }
.weekly__day { flex: 0 0 104px; }
.weekly__day:first-child { flex-basis: 121px; }
.weekly__day:nth-child(4) { flex-basis: 96px; }
.weekly__day:last-child { flex-basis: 19px; }
.weekly__divider { position: absolute; left: 1px; top: 98.25px; }
.routine { display: flex; height: 101px; }
.routine__time { font-family: var(--font-numbers); font-size: 98.285233px; line-height: 1.0526171923; letter-spacing: .01em; white-space: nowrap; transform: translateY(-7px); }
.routine__time--wake { flex: 0 0 178px; padding-top: 1px; }
.routine__time--sleep { flex: 0 0 207px; }
.routine__connection { position: relative; flex: 0 0 149px; padding-top: 22px; }
.routine__arrow { position: absolute; left: -.007446px; top: 29.95405px; width: 136.515px; height: 22.0919px; }
/* Keep the poster composition intact on smaller screens using a CSS-only scaled canvas. */
@media (max-width: 611px) { .poster-view { padding: 0; justify-content: flex-start; width: 100%; overflow: hidden; } .poster { zoom: calc(100vw / 564px); } }
@media print { @page { size: 564px 846px; margin: 0; } body { background: var(--color-paper); } .poster-view { padding: 0; min-height: 0; } .poster { zoom: 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; } }