@import url("https://fonts.font.im/css?family=Oswald");
 @font-face {
    font-family: "DELI";
    src: url("https://res.cloudinary.com/bgi4jgqa/raw/upload/v1790232713/DELIRIUM_NCV.ttf")format("opentype");
 }

@font-face {
  font-family:"Romestone";
  src:url("https://res.cloudinary.com/bgi4jgqa/raw/upload/v1790232713/Romestone.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:block;
}
@import url("https://fonts.font.im/css?family=Playfair+Display");
*{box-sizing:border-box}
:root{--paper:#ececef;--ink:#393536;--yellow:#ebe33f;--rule:#a7a7a8;--display:"Romestone", sans-serif;--body:'Oswald', sans-serif;--serif:Georgia,"Times New Roman",serif}
html,body{margin:0;padding:0;background:#d7d7d9}body{min-height:100vh;color:var(--ink);font-family:var(--body)}
.poster{width:786px;height:1182px;margin:0 auto;padding:39px 38px 34px;background:var(--paper);overflow:hidden;position:relative}
h1,h2,p,ul,ol{margin:0}h1,h2,.step-word,.transport-row span{font-family:var(--display);font-weight:400}
h1{font-size:138px;line-height:.86;letter-spacing:.1px;white-space:nowrap}h2{font-size:28px;line-height:.96;letter-spacing:0}
.italic-note{font-family:var(--serif);font-style:italic;color:var(--ink);line-height:1.27}
/* header */
.top-header{height:149px;position:relative}
.top-header h1{position:absolute;left:0;top:0}
.header-rule{position:absolute;left:0;top:147px;width:536px;height:2px;background:var(--rule)}
.step-block{position:absolute;right:0;top:-1;width:145px;height:149px}
.step-word{position:absolute;right:32px;top:-10px;color:var(--yellow);font-size:130px;line-height:.78;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:5px;z-index:3}
.step-number{position:absolute;right:5px;left:10px;top:130px;font-size:150px;line-height:.78;writing-mode:vertical-rl;letter-spacing:2px;z-index:4;font-family:"DELI";font-weight: 100;text-align: center;transform: scaleX(-1.4);transform: scaleX(-1.4);transform: scaleY(1);transform: rotate(180deg);}
.step-caption{position:absolute;right:-5px;top:2px;height:px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);z-index:4}
/* foods */
.foods{height:188px;position:relative;border-bottom:2px solid var(--rule);display:grid;grid-template-columns:299px 1fr;column-gap:37px;padding-top:27px}
.food-title h2{font-size:70px;line-height:.99}
.food-grid{position:absolute;left:225px;top:27px;width:200px;display:grid;grid-template-columns:95px 95px;grid-template-rows:70px 70px;gap:8px 9px}
.food-item{position:relative;display:flex;align-items:center;justify-content:center}
.yellow-disc{position:absolute;width:51px;height:51px;border-radius:50%;background:var(--yellow);left:50px;top:10px}
.food-item img{position:relative;z-index:2;max-width:94px;max-height:68px;object-fit:contain;filter:grayscale(100%);mix-blend-mode:normal}
.food-item:nth-child(1) img{max-width:70px;max-height:63px}
.food-item:nth-child(2) img{max-width:95px;max-height:58px}
.food-item:nth-child(3) img{max-width:93px;max-height:70px}
.food-item:nth-child(4) img{max-width:93px;max-height:65px}
.food-list{position:absolute;left:442px;top:28px;padding:0;list-style:none;font-family:var(--body);font-size:20px;line-height:1.65;font-weight: 500;transform: scaleX(0.8);}
.food-list li::before{content:"•";margin-right:13px}
/* columns */
.two-col{display:grid;grid-template-columns:299px 379px;column-gap:37px}
.left-col{width:299px}
.right-col{width:379px}
/* hot spots */
.hotspots{height:208px;position:relative;border-bottom:2px solid var(--rule)}
.hotspot-bars{position:absolute;left:0;top:25px;width:299px;height:99px;display:flex;justify-content:space-between;align-items:flex-end;padding-right:7px}
.hbar-row{height:99px;width:40px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.hbar-row span{writing-mode:vertical-rl;transform:rotate(180deg);position:absolute;left:2px;bottom:0;font-family:var(--body);font-size:13px;z-index:2;font-weight: 500;}
.hbar-row i{position:absolute;right:0;bottom:0;width:17px;background:var(--yellow);display:block}
.hotspot-caption{position:absolute;left:0;right:0;bottom:17px;display:flex;align-items: stretch;gap:14px;}
.hotspot-caption h2{font-size:45px;white-space:nowrap;margin-top:40px;}
.hotspot-caption .italic-note{margin-top:45px;width:1000px;font-size: 14px;}
/* transport */
.transport{height:258px;padding-top:25px;border-bottom:2px solid var(--rule)}
.transport-chart{width:292px;position: relative;}
.transport-row{height:48px;display:flex;align-items:center;gap:8px}
.transport-row span{width:40px;font-size:40px;line-height:.9}
.transport-row i{height:40px;background:var(--yellow);display:block}
.bus1{
    position:absolute;
    width:161px;
    left:32px;
    z-index:2;
}
.scooter1{
    position:absolute;
    width:174px;
    left: 66px;
    z-index:2;
}
.foot1{
    position:absolute;
    width:253px;
    left:39px;
    z-index:2;
}
.car1{
    position:absolute;
    width:90px;
    left:32px;
    z-index:2;
}
.transport .italic-note{
    margin-top:8px;font-size: 13px;
}
/* weekly */
.weekly{
  margin-top: 22px;
}
.wave-chart{
  height:120px;
  background:var(--yellow);
  clip-path: polygon(
    0% 90%,
    15% 85%,
    28% 40%,
    40% 75%,
    55% 55%,
    72% 20%,
    88% 60%,
    100% 90%,
    100% 100%,
    0% 100%
  );
}
.week-label{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
}
/* right */
.playlist{height:291px;padding-top:22px;display:grid;grid-template-columns:126px 1fr;gap:12px}
.playlist h2{font-size:38px;line-height:.96}
.playlist ol{margin-top:13px;padding-left:10px;font-family: var(--body), sans-serif;;font-size:13px;line-height:1.55}
.playlist .italic-note{margin-top:11px;font-size: 13px;}
.pie-chart{width:233px;height:233px;margin-top:6px;border-radius:50%;position:relative;background:conic-gradient(from 0deg,var(--yellow) 0deg 23deg,var(--paper) 23deg 25deg,var(--yellow) 25deg 64deg,var(--paper) 64deg 66deg,var(--yellow) 66deg 192deg,var(--paper) 192deg 194deg,var(--yellow) 194deg 282deg,var(--paper) 282deg 284deg,var(--yellow) 284deg 353deg,var(--paper) 353deg 355deg,var(--yellow) 355deg 360deg)}
.pie-number{position:absolute;z-index:3;font-family:"DELI";font-size:38px;line-height:1;font-weight:580}.n1{right:67px;bottom:55px}.n2{left:48px;bottom:53px}.n3{left:56px;top:44px}.n4{left:122px;top:21px}.n5{right:56px;top:38px}
/* restaurants */
.restaurants{height:175px;border:1.5px solid #a2a2a2;padding:13px 12px 9px;position:relative}
.restaurant-heading{height:63px;display:flex;align-items:flex-start;gap:10px}
.restaurant-heading h2{font-size:48px;white-space:nowrap}
.restaurant-heading .italic-note{margin-top:3px;width:170px;font-size:14px;}
.restaurant-list{position:absolute;left:12px;right:12px;bottom:9px;height:92px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:2px;align-items:end}
.restaurant{height:92px;display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;gap:4px;min-width:0;overflow:hidden}
.restaurant-name{font-family:var(--body);font-size:16px;line-height:1;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;height:auto;max-height:78px;display:block}
.restaurant .stars{height:auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:var(--yellow);font-family:Arial,sans-serif;font-size:17px;line-height:.82;letter-spacing:0;white-space:normal;flex:0 0 17px}
.restaurant .stars span{display:block;height:16px;line-height:16px}
/* footer */
.sleep{position:absolute;left:38px;right:38px;bottom:34px;height:143px;border-top:3px solid var(--rule);display:grid;grid-template-columns:235px 1fr 235px;align-items:end}
.sleep-time{font-family: "DELI";font-size:120px;line-height:.90;letter-spacing:-1.2px}
.sleep-right{text-align:right;position: absolute;left:500px}
.sleep-center{position:absolute;left:246px;bottom:37px;width:180px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:2;color:#3A3436}
.sleep-arrow{position:absolute;left:370px;bottom:38px;font-family:Arial,sans-serif;font-style:normal;font-size:60px;color:#A2A2A2;line-height:1;z-index:2;font-weight: 700;font-weight: bold;}
.line-arrow{
    display: inline-block;
    width: 130px;
    height: 5px;
    background-color: #A2A2A2;
    position: relative;
    bottom: 62px;
    left: 20px;
    vertical-align: middle;
}
@media(max-width:820px){.poster{transform-origin:top left;margin:0}body{overflow-x:auto}}