/* A framed scene and leather journal entries for life outside the party. */
#cidade {
  background:#171510;
  border-block:1px solid #b58e4b23;
  padding-block:92px;
}
#cidade .freedom-backdrop {
  background:radial-gradient(ellipse at 18% 46%,#8c633323,transparent 56%),radial-gradient(ellipse at 95% 85%,#66563212,transparent 60%),url('./assets/parchment-grain.svg') repeat;
}
#cidade::before,#cidade::after {
  content:''; position:absolute; left:5%; right:5%; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#c59c5555,transparent);
}
#cidade::before { top:10px; }
#cidade::after { bottom:10px; }
#cidade .freedom-grid { grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,68px); align-items:center; }
#cidade .city-window {
  isolation:isolate;
  padding:10px;
  border:1px solid #b2935e90;
  border-radius:3px 22px 3px 22px;
  background:url('./assets/parchment-grain.svg'),linear-gradient(135deg,#423323,#211c15 45%,#44321c);
  box-shadow:inset 0 0 0 4px #e5c0830b,0 22px 50px #0006;
}
#cidade .city-window::before {
  content:''; position:absolute; inset:5px; border:1px solid #d8b77138;
  border-radius:1px 16px 1px 16px; z-index:2; pointer-events:none;
}
#cidade .city-window::after {
  content:''; position:absolute; inset:11px; border-radius:0 12px 0 12px;
  background:linear-gradient(180deg,#120d0620,transparent 38%,#100c0580);
  box-shadow:inset 0 0 40px #130c0950; pointer-events:none;
}
#cidade .city-window>img {
  width:100%; height:516px; border-radius:0 12px 0 12px;
  object-fit:cover; object-position:48% center;
  filter:brightness(.99) saturate(.86);
  animation:city-lantern-light 9s ease-in-out infinite;
}
#cidade .window-corner {
  display:block; position:absolute; z-index:4; width:26px; height:26px;
  border:0 solid #d9b875; pointer-events:none;
  filter:drop-shadow(0 1px 1px #0008);
}
#cidade .window-corner.tl { top:0; left:0; border-top-width:3px; border-left-width:3px; }
#cidade .window-corner.tr { top:0; right:0; border-top-width:3px; border-right-width:3px; border-top-right-radius:18px; }
#cidade .window-corner.bl { bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; border-bottom-left-radius:18px; }
#cidade .window-corner.br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; }
#cidade .city-label {
  z-index:3; display:block; left:28px; right:28px; bottom:28px; padding:16px 21px;
  border:1px solid #f2dba876; border-radius:2px 10px 2px 10px;
  background:url('./assets/parchment-grain.svg'),linear-gradient(105deg,#ddc18a,#ecd9aa 48%,#c8a674);
  box-shadow:inset 0 0 0 4px #6a47240b,inset 0 0 22px #784b2024,0 7px 24px #0008;
  backdrop-filter:none; color:#76532d;
}
#cidade .city-label-kicker { font-size:9px; font-weight:800; letter-spacing:.2em; line-height:1.5; text-transform:uppercase; }
#cidade .city-label strong { margin-top:5px; color:#352615; font:500 clamp(16px,1.6vw,21px)/1.45 Cinzel,Georgia,serif; }
#cidade .freedom-copy { min-width:0; max-width:none; }
#cidade .freedom-copy>.eyebrow { color:#cead73; font-size:10px; letter-spacing:.16em; line-height:1.9; margin-bottom:19px; }
#cidade .freedom-copy h2 { color:#f2e4ca; font:500 clamp(29px,2.75vw,41px)/1.3 Cinzel,Georgia,serif; letter-spacing:-.025em; margin-bottom:21px; text-wrap:balance; }
#cidade .freedom-copy h2 em { color:#d8b575; }
#cidade .freedom-copy>p:not(.eyebrow) { color:#bfb49f; font-size:14px; line-height:1.9; margin-bottom:0; max-width:510px; }
#cidade .freedom-list { gap:9px; margin:27px 0 0; }
#cidade .freedom-list li {
  position:relative; display:flex; align-items:center; gap:15px; padding:10px 15px 10px 10px;
  border:1px solid #a4804333; border-left-color:#bd985871; border-radius:2px 10px 2px 10px;
  background:linear-gradient(100deg,#ba8a4520,#49342112);
  box-shadow:inset 0 1px 0 #ffe3a305;
  transition:background .35s,border-color .35s,transform .35s;
}
#cidade .freedom-list li>img { flex:0 0 58px; width:58px; height:58px; max-width:none; filter:drop-shadow(0 4px 4px #0005); }
#cidade .freedom-list li>span { min-width:0; display:block; }
#cidade .freedom-list strong { display:block; color:#ead7b4; font:500 clamp(14px,1.3vw,18px)/1.5 Cinzel,Georgia,serif; }
#cidade .freedom-list li>span>span { display:block; margin-top:3px; color:#bdae96; font-size:12px; line-height:1.65; }
@keyframes city-lantern-light { 0%,100% { filter:brightness(.96) saturate(.84); } 50% { filter:brightness(1.05) saturate(.92); } }
@media (hover:hover) and (pointer:fine) {
  #cidade .freedom-list li:hover { background:linear-gradient(100deg,#bd91442b,#4934211c); border-color:#b9955a78; transform:translateX(3px); }
}
@media (min-width:901px) and (max-width:1100px) {
  #cidade .freedom-grid { gap:32px; }
  #cidade .freedom-copy h2 { font-size:29px; }
  #cidade .city-window>img { height:536px; }
  #cidade .city-label { left:23px; right:23px; bottom:23px; padding:15px; }
}
@media (max-width:900px) {
  #cidade { padding-block:64px; }
  #cidade .freedom-grid { grid-template-columns:1fr; gap:34px; max-width:700px; }
  #cidade .city-window { width:100%; max-width:none; }
  #cidade .city-window>img { height:350px; object-position:27% 46%; }
  #cidade .freedom-copy h2 { font-size:35px; }
  #cidade .freedom-copy>p:not(.eyebrow) { max-width:620px; }
  #cidade .freedom-list strong { font-size:17px; }
}
@media (max-width:600px) {
  #cidade { padding-block:46px; }
  #cidade .freedom-grid { gap:29px; }
  #cidade .city-window { padding:7px; border-radius:3px 17px 3px 17px; }
  #cidade .city-window::before { inset:4px; border-radius:1px 12px 1px 12px; }
  #cidade .city-window::after { inset:8px; }
  #cidade .city-window>img { height:280px; border-radius:0 9px 0 9px; }
  #cidade .window-corner { width:20px; height:20px; }
  #cidade .city-label { bottom:19px; left:19px; right:19px; padding:12px 14px; }
  #cidade .city-label-kicker { font-size:8px; }
  #cidade .city-label strong { font-size:15px; margin-top:4px; }
  #cidade .freedom-copy>.eyebrow { font-size:8px; letter-spacing:.12em; margin-bottom:14px; }
  #cidade .freedom-copy h2 { font-size:clamp(26px,7.4vw,33px); line-height:1.32; margin-bottom:17px; }
  #cidade .freedom-copy>p:not(.eyebrow) { font-size:13px; line-height:1.85; }
  #cidade .freedom-list { margin-top:22px; gap:8px; }
  #cidade .freedom-list li { padding:9px 12px 9px 7px; gap:10px; }
  #cidade .freedom-list li>img { flex-basis:52px; width:52px; height:52px; }
  #cidade .freedom-list strong { font-size:14px; }
  #cidade .freedom-list li>span>span { font-size:11px; }
}
@media (max-width:359px) {
  #cidade .city-window>img { height:254px; }
  #cidade .city-label strong { font-size:13px; }
  #cidade .freedom-list li>img { flex-basis:46px; width:46px; height:46px; }
  #cidade .freedom-list strong { font-size:13px; }
}
.is-paused #cidade .city-window>img,.is-paused #cidade .freedom-list li { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) #cidade .city-window>img,html:not(.motion-enabled) #cidade .freedom-list li { animation:none!important; transition:none!important; }
}