:root{
  --bg:#111111;
  --white:#fff;
  --muted:#d0d0d0;
  --card:rgba(255,255,255,.88);
  --card-text:#0e1724;
  --city-card-opacity:.88;
  --city-card-lightness:255;
  --city-card-blur:7px;
  --city-card-radius:34px;
  --city-bg-brightness:1;
  --city-overlay-extra:0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,"Segoe UI",sans-serif}
body{background:var(--bg);color:#fff}
a{color:inherit;text-decoration:none}

/* HOME */
.home-page{min-height:100vh;background:#111}
.home-shell{width:min(1780px,calc(100% - 64px));margin:0 auto;padding:42px 0 54px}
.brand-header{text-align:center;height:112px;display:flex;align-items:flex-start;justify-content:center}
.brand-wordmark,.city-brand{font-family:Arial,"Segoe UI",sans-serif;font-weight:300;letter-spacing:.23em;white-space:nowrap}
.brand-wordmark{font-size:42px;line-height:1}
.home-content{padding-top:31px}
.home-content h1{margin:0;text-align:center;font-size:42px;line-height:1.2;font-weight:700}
.home-subtitle{margin:22px auto 30px;text-align:center;font-size:25px;font-weight:300;color:#f3f3f3}
.search-row{display:grid;grid-template-columns:1fr 218px;gap:26px;margin:0 0 36px}
.search-box{height:76px;border:1px solid #ddd;display:flex;align-items:center;padding:0 26px;background:#111}
.search-box input{width:100%;height:100%;border:0;outline:0;background:transparent;color:white;font-size:23px;padding:0 10px}
.search-box input::placeholder{color:#696969;font-weight:600}
.search-symbol{width:30px;height:30px;border:3px solid #aaa;border-radius:50%;position:relative;margin-right:12px;flex:0 0 auto}
.search-symbol:after{content:"";position:absolute;width:17px;height:3px;background:#aaa;right:-12px;bottom:-7px;transform:rotate(-48deg);transform-origin:center}
.search-button{border:0;background:#898989;color:white;font-size:20px;font-weight:700;cursor:pointer}
.search-button:hover{background:#9b9b9b}
.city-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:49px;row-gap:60px}
.city-card{display:block;min-width:0}
.city-card-image{width:100%;aspect-ratio:1.53/1;background-size:cover;background-position:center;background-color:#222;transition:filter .18s ease,transform .18s ease}
.city-card-name{padding-top:10px;font-size:20px;line-height:1.1;font-weight:700;color:white}
.city-card:hover .city-card-image{filter:brightness(1.08);transform:translateY(-2px)}
.empty-state{text-align:center;color:#aaa;font-size:24px;padding:60px 0}

/* CITY */
.city-page{height:100vh;min-height:620px;overflow:hidden;background:#111}
.city-background,.city-overlay{position:fixed;inset:0}
.city-background{z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.01);filter:brightness(var(--city-bg-brightness))}
.city-overlay{z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.03) 58%,rgba(0,0,0,.19) 100%);box-shadow:inset 0 0 0 9999px rgba(0,0,0,var(--city-overlay-extra))}
.secret-home{position:fixed;left:0;top:0;width:100px;height:100px;z-index:9999;background:transparent}
.city-shell{position:relative;z-index:2;height:100vh;min-height:620px;display:grid;grid-template-rows:auto 1fr auto auto;padding:58px clamp(26px,5.1vw,98px) 44px}
.flight-wish{margin:0;text-align:center;font-size:clamp(42px,4.15vw,80px);line-height:1.08;font-weight:400;text-shadow:0 1px 12px rgba(0,0,0,.22)}
.ce-mark{display:flex;justify-content:center;align-items:center;padding-top:20px}
.ce-mark svg{width:clamp(110px,11vw,180px);height:auto;overflow:visible}
.ce-mark path{fill:none;stroke:white;stroke-width:8;stroke-linecap:square;stroke-linejoin:round}
.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.12fr;gap:clamp(18px,2vw,38px);align-self:end;margin-bottom:clamp(42px,5vh,72px)}
.glass-card{height:clamp(190px,24vh,270px);background:rgba(var(--city-card-lightness),var(--city-card-lightness),var(--city-card-lightness),var(--city-card-opacity));color:var(--card-text);border-radius:var(--city-card-radius);backdrop-filter:blur(var(--city-card-blur));-webkit-backdrop-filter:blur(var(--city-card-blur));box-shadow:0 6px 22px rgba(0,0,0,.12)}
.compact-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:25px 20px 20px;text-align:center}
.line-icon{height:34px;width:46px;position:relative;margin-bottom:10px;opacity:.45}
.line-icon:before{content:"✈";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:31px;color:#6d747a;font-weight:400}
.takeoff:before{transform:translate(-50%,-50%) rotate(-17deg)}
.landing:before{transform:translate(-50%,-50%) rotate(17deg)}
.flight:before{transform:translate(-50%,-50%) rotate(-8deg)}
.card-label{font-size:clamp(18px,1.2vw,24px);font-weight:400;margin:3px 0 10px;color:#172131}
.card-value{font-size:clamp(29px,1.65vw,36px);font-weight:700;color:#142033;line-height:1.08}
.card-value-large{font-size:clamp(34px,2.4vw,52px);margin-top:14px}
.weather-card{padding:21px 28px 17px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.weather-city{font-size:clamp(16px,1.05vw,21px);font-weight:700;margin-bottom:4px}
.weather-main-row{display:flex;justify-content:center;align-items:center;gap:25px}
.weather-temp{font-size:clamp(48px,4.1vw,77px);font-weight:400;line-height:1}
.weather-glyph{font-size:clamp(38px,3vw,58px);line-height:1;color:#f2b900;text-shadow:0 1px 3px rgba(0,0,0,.12)}
.weather-description{font-size:clamp(17px,1.15vw,23px);margin:5px 0 9px}
.weather-meta{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:clamp(15px,1.05vw,21px)}
.weather-meta b{font-size:1.15em;font-weight:400}
.weather-note{height:18px;font-size:12px;margin-top:5px;opacity:.65}
.city-brand{text-align:center;font-size:clamp(32px,3.2vw,58px);line-height:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}

@media (max-width:1400px){
  .city-grid{column-gap:34px}
  .home-subtitle{font-size:22px}
}
@media (max-width:1100px){
  .city-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .info-grid{grid-template-columns:repeat(2,1fr);align-self:center;margin-bottom:24px}
  .city-page{overflow:auto;height:auto}
  .city-shell{height:auto;min-height:100vh;grid-template-rows:auto auto auto auto;gap:24px}
  .glass-card{height:210px}
}
@media (max-width:760px){
  .home-shell{width:calc(100% - 30px);padding-top:28px}
  .brand-wordmark{font-size:26px;letter-spacing:.15em}
  .brand-header{height:82px}
  .home-content{padding-top:10px}
  .home-content h1{font-size:32px}
  .home-subtitle{font-size:18px;line-height:1.4}
  .search-row{grid-template-columns:1fr;gap:10px}
  .search-box{height:58px}
  .search-button{height:54px}
  .city-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .city-card-name{font-size:17px}
  .info-grid{grid-template-columns:1fr}
  .city-page{overflow:auto}
  .city-shell{padding:34px 18px 30px}
  .flight-wish{font-size:36px}
  .ce-mark{padding:0}
  .glass-card{height:190px}
  .city-brand{white-space:normal}
}