/* Studio City Local — mid-century modern. Same tokens as template/carousel.html */
:root{
  --cream:#F3E8D2; --ink:#3B2A1F; --soft:#7A6552;
  --teal:#2F7D78; --mustard:#E3A92F; --orange:#D2602A;
  --wrap:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font:400 19px/1.6 'Jost',system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{flex:none}
.logo b{font:800 20px/1 'Jost';letter-spacing:.14em;text-transform:uppercase}
.logo i{font:400 30px/1 'Yellowtail',cursive;color:var(--orange);font-style:normal;margin-left:2px}
.nav{display:flex;gap:10px;flex-wrap:nowrap}
.logo span{white-space:nowrap}
.pill{display:inline-block;height:40px;padding:0 18px;border-radius:20px;font:500 14px/40px 'Jost';letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--cream);white-space:nowrap}
.pill.t{background:var(--teal)} .pill.m{background:var(--mustard);color:var(--ink)} .pill.o{background:var(--orange)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--teal);color:var(--cream);border-radius:36px;padding:64px 40px 72px;margin:8px 0 56px}
.hero h1{font:800 clamp(44px,8vw,96px)/.95 'Jost';text-transform:uppercase;max-width:760px}
.hero h1 i{font:400 1.25em/.8 'Yellowtail',cursive;text-transform:none;color:var(--mustard);font-style:normal}
.hero p{font-size:clamp(18px,2.2vw,22px);max-width:560px;margin-top:22px}
.hero .arcs{position:absolute;right:0;bottom:0;width:clamp(140px,26vw,300px);height:auto}
.hero .pill{margin-top:28px;background:var(--cream);color:var(--ink)}

/* section heads */
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px}
.sec h2{font:800 clamp(28px,4vw,40px)/1 'Jost';text-transform:uppercase}
.sec h2 i{font:400 1.25em/.8 'Yellowtail',cursive;text-transform:none;color:var(--orange);font-style:normal}

/* post cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-bottom:64px}
.card{display:block;text-decoration:none;background:#fff8ea;border-radius:28px;overflow:hidden}
.card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.card .in{padding:18px 22px 24px}
.card .kick{font:500 13px/1 'Jost';letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.card h3{font:700 23px/1.2 'Jost';margin-top:10px}
.card:hover h3{text-decoration:underline;text-decoration-thickness:2px}

/* series tiles */
.series{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-bottom:64px}
.tile{border-radius:28px;padding:26px 24px 28px;min-height:170px}
.tile h3{font:800 22px/1.1 'Jost';text-transform:uppercase}
.tile p{font-size:16px;line-height:1.45;margin-top:10px}
.tile.t{background:var(--teal);color:var(--cream)} .tile.m{background:var(--mustard)}
.tile.o{background:var(--orange);color:var(--cream)} .tile.c{background:var(--ink);color:var(--cream)}
.tile .soon{display:inline-block;margin-top:14px;font:500 12px/1 'Jost';letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* article */
.post{max-width:720px;margin:0 auto;padding:12px 0 72px}
.post .kick{font:500 14px/1 'Jost';letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.post h1{font:800 clamp(38px,6.5vw,68px)/1 'Jost';text-transform:uppercase;margin:14px 0 18px}
.post h1 i{font:400 1.25em/.8 'Yellowtail',cursive;text-transform:none;color:var(--orange);font-style:normal}
.post .meta{font-size:16px;color:var(--soft);margin-bottom:28px}
.post h2{font:800 26px/1.15 'Jost';text-transform:uppercase;margin:40px 0 12px}
.post p{margin:0 0 18px}
.post ul{margin:0 0 18px 22px}
.post figure{margin:28px 0}
.post figure img{border-radius:28px}
.facts{background:var(--mustard);border-radius:28px;padding:26px 28px;margin:28px 0}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px}
.facts dt{font:500 14px/1.7 'Jost';letter-spacing:.14em;text-transform:uppercase}
.facts dd{font-weight:500}
.todo{border:3px dashed var(--orange);color:var(--orange);border-radius:22px;padding:16px 20px;font-weight:500}

/* ranked / listed spots */
.spots{list-style:none;margin:24px 0 0!important;padding:0;counter-reset:n}
.spots li{counter-increment:n;position:relative;padding:22px 0 22px 72px;border-top:3px solid var(--ink)}
.spots li::before{content:counter(n);position:absolute;left:0;top:20px;width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--cream);font:800 22px/52px 'Jost';text-align:center}
.spots li:nth-child(3n+2)::before{background:var(--mustard);color:var(--ink)}
.spots li:nth-child(3n)::before{background:var(--orange)}
.spots.plain li::before{content:"";width:18px;height:18px;top:34px;left:14px}
.spots h3{font:800 24px/1.15 'Jost';text-transform:uppercase}
.spots .where{font-size:16px;color:var(--soft);margin:2px 0 6px}
.spots .drink{font:500 18px/1.4 'Jost';color:var(--orange)}
.spots p{margin:6px 0 0!important}
.tag{display:inline-block;font:500 12px/1 'Jost';letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--cream);border-radius:12px;padding:6px 10px;margin-left:8px;vertical-align:middle}
.src{font-size:14px;color:var(--soft)}

/* stickers */
.tile{position:relative;overflow:visible}
.tile .stk{position:absolute;right:-10px;top:-26px;width:84px;transform:rotate(8deg)}
.tile:has(.stk) h3{padding-right:72px}
.post .kick{position:relative}
.page-stk{float:right;width:clamp(96px,18vw,150px);margin:0 0 8px 16px;transform:rotate(6deg)}
.picks{list-style:none;margin:8px 0 18px!important;padding:0}
.picks li{position:relative;padding:14px 0 14px 86px;min-height:88px}
.picks li img{position:absolute;left:0;top:8px;width:70px}
.picks li:nth-child(odd) img{transform:rotate(-6deg)}
.picks li:nth-child(even) img{transform:rotate(6deg)}
.card .art{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.card .art img{width:58%;transform:rotate(-6deg)}

/* footer */
.foot{background:var(--ink);color:var(--cream);margin-top:24px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:36px 20px}
.foot small{font-size:15px;opacity:.8}

@media (max-width:600px){
  .nav{display:none}
  .hero{padding:44px 24px 120px;border-radius:28px}
  .facts dl{grid-template-columns:1fr;gap:2px}
  .facts dd{margin-bottom:10px}
}