:root{
    --ink:#0e2430;
    --ink-2:#14323f;
    --brass:#e8ae4a;
    --brass-hi:#ffd589;
    --peach:#f6d8ad;
    --paper:#f2ebdd;
    --sage:#5c8382;
    --dim:rgba(242,235,221,.45);
    --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
    --body:"Karla","Helvetica Neue",Arial,sans-serif;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--ink);
    background-image:
      radial-gradient(120% 70% at 50% 108%, rgba(232,174,74,.22) 0%, rgba(232,174,74,0) 60%),
      radial-gradient(90% 60% at 12% -10%, rgba(92,131,130,.28) 0%, rgba(92,131,130,0) 70%);
    background-attachment:fixed;
    color:var(--paper);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    font-variant-numeric:tabular-nums;
  }

  .wrap{width:100%;max-width:1440px;margin:0 auto;padding:clamp(18px,2.5vw,36px) clamp(16px,3.5vw,52px) 56px}

  /* ---------- masthead ---------- */
  .masthead{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
    border-bottom:1px solid rgba(242,235,221,.14);
    padding-bottom:14px;
  }
  .brand{
    font-family:var(--display);
    font-weight:300;font-size:clamp(19px,3.4vw,25px);
    letter-spacing:-.01em;
  }
  .brand em{font-style:italic;color:var(--brass-hi)}
  .utc{
    font-size:13px;color:var(--dim);
    display:flex;gap:8px;align-items:baseline;
  }
  .utc b{font-weight:500;color:var(--peach);font-size:15px}
  .local-clock{
    display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
    background:rgba(242,235,221,.055);border:1px solid rgba(242,235,221,.12)
  }
  .local-clock .clockface{font-family:var(--display);font-size:21px;color:var(--brass-hi);white-space:nowrap}
  .local-clock .where{font-size:11px;line-height:1.25;color:var(--dim);max-width:15ch}
  .local-clock .where b{display:block;color:var(--peach);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
  .nav button,.nav a,.action,.social-action{
    appearance:none;border:1px solid rgba(242,235,221,.2);background:transparent;color:var(--paper);
    border-radius:999px;padding:8px 13px;font:500 13px var(--body);cursor:pointer;text-decoration:none
  }
  .nav button:hover,.nav button.active,.nav a:hover,.nav a.active,.action:hover,.social-action:hover{border-color:var(--brass);color:var(--brass-hi);background:rgba(232,174,74,.08)}

  /* ---------- hero ---------- */
  .hero{padding:44px 0 8px}
  .lede{
    font-family:var(--display);
    font-weight:300;font-style:italic;
    font-size:clamp(17px,2.6vw,20px);
    color:var(--dim);
    margin:0 0 14px;
  }
  .roll{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(23px,3.7vw,40px);
    line-height:1.12;
    letter-spacing:-.02em;
    margin:0;
    max-width:19ch;
  }
  @media(min-width:700px){.roll{max-width:26ch}}
  .place{
    color:var(--peach);
    cursor:default;
    transition:color .18s ease;
  }
  .place.lit,.place:hover{color:var(--brass-hi)}
  .sep{color:rgba(242,235,221,.28)}
  .tail{
    margin:20px 0 0;font-size:15px;color:var(--dim);max-width:52ch;line-height:1.6;
  }
  .flags{display:inline-flex;gap:7px;align-items:center;vertical-align:middle;margin-right:6px}
  .flag-img{width:clamp(30px,4.5vw,42px);height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;
    box-shadow:0 0 0 1px rgba(242,235,221,.3),0 3px 8px rgba(0,0,0,.24)}
  .tip .flag-img{width:24px;border-radius:2px;margin-right:6px;vertical-align:middle}
  .pour{
    margin:30px 0 0;
    display:flex;align-items:center;gap:16px;
    max-width:30rem;
  }
  .pour .glass{flex:0 0 auto;width:86px;line-height:0}
  @media(min-width:700px){.pour .glass{width:104px}}
  .drinksvg{width:100%;height:auto;display:block;overflow:visible}
  .pour-text{min-width:0}
  .pour.fresh .glass{animation:tipIn .5s cubic-bezier(.2,.8,.3,1) both}
  .pour.fresh .pour-text{animation:rise .5s ease .08s both}
  @keyframes tipIn{
    from{opacity:0;transform:translateY(7px) rotate(-7deg)}
    to{opacity:1;transform:none}
  }
  .pour .drink{
    display:block;
    font-family:var(--display);font-weight:500;
    font-size:clamp(21px,4vw,27px);line-height:1.15;letter-spacing:-.015em;
    color:var(--brass-hi);
  }
  .pour .build{
    display:block;margin-top:5px;
    font-size:14.5px;line-height:1.5;color:var(--dim);
  }
  .pour{cursor:pointer;border-radius:12px;padding:8px;margin-left:-8px;text-decoration:none;color:inherit}
  .pour:hover{background:rgba(242,235,221,.045)}
  .pour .hint{display:block;margin-top:8px;font-size:12px;color:var(--brass);letter-spacing:.04em;text-transform:uppercase}

  .view[hidden]{display:none}
  .rankings{padding:42px 0 20px}
  .rankings h1{font:500 clamp(32px,6vw,54px)/1.05 var(--display);margin:0 0 10px;color:var(--peach)}
  .rankings .intro{color:var(--dim);line-height:1.55;max-width:62ch;margin:0 0 28px}
  .rankings h2{font:500 clamp(23px,3vw,31px)/1.1 var(--display);color:var(--peach);margin:34px 0 18px}
  .chart{display:grid;gap:12px;max-width:760px}
  .barrow{display:grid;grid-template-columns:minmax(120px,210px) 1fr auto;align-items:center;gap:12px}
  .barname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bartrack{height:12px;background:rgba(242,235,221,.09);border-radius:999px;overflow:hidden}
  .bar{height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-hi));border-radius:inherit;min-width:3px}
  .bar.disliked{background:linear-gradient(90deg,var(--sage),var(--peach))}
  .barvalue{color:var(--peach);font-size:13px;min-width:3ch;text-align:right}
  .chart-empty{padding:18px;border:1px dashed rgba(242,235,221,.18);border-radius:12px;color:var(--dim);line-height:1.5}
  .country-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
  .country-card{padding:19px;border:1px solid rgba(242,235,221,.12);border-radius:14px;background:rgba(242,235,221,.035)}
  .country-card h3{font:500 21px/1.2 var(--display);color:var(--brass-hi);margin:0 0 15px;display:flex;align-items:center;gap:10px}
  .country-card h3 .flag-img{width:28px}
  .country-card .chart{gap:9px}.country-card .barrow{grid-template-columns:minmax(100px,145px) 1fr auto;font-size:12px;gap:8px}
  .country-card .bartrack{height:8px}

  dialog{width:min(620px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid rgba(232,174,74,.42);
    border-radius:18px;background:var(--ink-2);color:var(--paper);padding:0;box-shadow:0 28px 80px rgba(0,0,0,.5)}
  dialog::backdrop{background:rgba(4,15,20,.78);backdrop-filter:blur(5px)}
  .modal{padding:26px}.modalhead{display:flex;justify-content:space-between;gap:20px;align-items:start}
  .modal h2{font:500 clamp(30px,6vw,46px)/1.05 var(--display);color:var(--brass-hi);margin:0}
  .origin{color:var(--dim);margin:6px 0 24px}.close{appearance:none;border:0;background:transparent;color:var(--paper);font-size:30px;cursor:pointer}
  .recipegrid{display:grid;grid-template-columns:1fr;gap:22px}.recipegrid h3{font:500 18px var(--display);color:var(--peach);margin:0 0 9px}
  .recipegrid ul,.recipegrid ol{margin:0;padding-left:21px;line-height:1.65;color:rgba(242,235,221,.83)}
  .vote-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}
  .vote-action{min-height:46px;font-size:14px}
  .vote-action.selected[data-vote="liked"]{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:700}
  .vote-action.selected[data-vote="disliked"]{background:var(--sage);border-color:var(--sage);color:var(--paper);font-weight:700}
  .vote-action:disabled{cursor:wait;opacity:.72}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.action.primary{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:700}
  .stats{font-size:12px;color:var(--dim);margin-top:12px}.toast{min-height:18px;margin-top:8px;color:var(--brass-hi);font-size:13px}
  .share-block{margin-top:20px;padding-top:18px;border-top:1px solid rgba(242,235,221,.12)}
  .share-label{font:500 17px var(--display);color:var(--peach);margin:0 0 5px}
  .share-note{font-size:12px;line-height:1.45;color:var(--dim);margin:0 0 11px}
  .social-share{display:flex;gap:7px;flex-wrap:wrap}
  .social-action{padding:7px 11px;font-size:12px;min-height:36px}
  .recipe-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 24px}
  .recipe-meta div{padding:10px;background:rgba(242,235,221,.055);border-radius:8px}
  .recipe-meta small{display:block;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
  .recipe-meta b{font-size:13px;color:var(--peach);font-weight:500}

  /* ---------- map ---------- */
  .mapwrap{position:relative;margin:38px 0 0}
  svg.map{display:block;width:100%;height:auto;overflow:hidden}
  .zone{
    fill:rgba(92,131,130,.28);
    stroke:rgba(242,235,221,.20);
    stroke-width:.4;
    stroke-linejoin:round;
    transition:fill .55s ease,stroke .55s ease;
  }
  .zone.on{fill:rgba(232,174,74,.62);stroke:var(--brass-hi);stroke-width:.55}
  .dot{fill:rgba(242,235,221,.38);transition:fill .4s ease,r .35s ease}
  .dot.on{fill:#fffaf0;stroke:rgba(14,36,48,.9);stroke-width:.9}
  .halo{fill:var(--brass-hi);opacity:0;transition:opacity .5s ease,r .5s ease}
  .halo.on{opacity:.28}
  .dot.lit{fill:#fff;stroke:var(--brass-hi);stroke-width:1.3}
  .dot.next{fill:var(--peach)}
  .tip{
    position:absolute;pointer-events:none;opacity:0;
    transform:translate(-50%,-140%);
    background:var(--ink-2);border:1px solid rgba(232,174,74,.4);
    padding:5px 9px;border-radius:3px;white-space:nowrap;
    font-size:12.5px;color:var(--peach);
    transition:opacity .15s ease;
    z-index:5;
  }
  .tip.show{opacity:1}
  .tip b{color:var(--brass-hi);font-weight:500}
  .maplegend{
    display:flex;gap:18px;flex-wrap:wrap;
    font-size:12.5px;color:var(--dim);margin-top:10px;
  }
  .maplegend span{display:flex;align-items:center;gap:7px}
  .swatch{width:8px;height:8px;border-radius:50%;display:inline-block}

  /* ---------- footer strip ---------- */
  .strip{
    margin-top:30px;padding-top:22px;
    border-top:1px solid rgba(242,235,221,.14);
    display:grid;grid-template-columns:1fr;gap:22px;
  }
  @media(min-width:760px){
    .strip{grid-template-columns:auto 1fr;align-items:end;gap:38px}
  }
  .timer{
    display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
    padding:18px 22px;border-radius:16px;
    background:linear-gradient(135deg,rgba(242,235,221,.07),rgba(232,174,74,.055));
    border:1px solid rgba(232,174,74,.22);box-shadow:0 14px 36px rgba(0,0,0,.13)
  }
  .count{
    font-family:"Karla","Arial Narrow",sans-serif;
    font-weight:700;
    font-size:clamp(48px,7vw,88px);
    line-height:.9;
    letter-spacing:-.06em;
    color:var(--brass-hi);
    text-shadow:0 0 28px rgba(232,174,74,.28);
    font-variant-numeric:tabular-nums;
    white-space:nowrap
  }
  .count .sec{font-size:.7em;letter-spacing:-.04em;color:var(--peach)}
  .timer-label{font-size:14px;line-height:1.35;color:var(--dim);max-width:23ch;margin:0}
  .timer-label b{
    display:block;font-family:var(--display);font-weight:500;font-style:normal;
    color:var(--paper);font-size:20px;letter-spacing:-.01em;margin:2px 0;
  }
  .five-clock{
    display:flex;align-items:center;gap:16px;padding:16px 19px;border-radius:16px;
    background:rgba(242,235,221,.045);border:1px solid rgba(242,235,221,.12);min-height:112px
  }
  .masthead{align-items:center}
  .masthead .brand{order:1}
  .masthead .five-clock{order:2;margin-left:auto;min-height:86px;padding:10px 15px}
  .masthead .five-clock .analog{width:60px;height:60px;flex-basis:60px}
  .masthead .nav{order:3;margin-left:0}
  .analog{position:relative;width:76px;height:76px;flex:0 0 76px;border:2px solid var(--brass-hi);border-radius:50%;
    background:radial-gradient(circle at center,var(--brass-hi) 0 3px,transparent 4px),rgba(14,36,48,.8);
    box-shadow:inset 0 0 0 4px rgba(232,174,74,.08),0 6px 18px rgba(0,0,0,.18)}
  .analog:before,.analog:after{content:"";position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:4px}
  .analog:before{width:3px;height:22px;background:var(--paper);transform:translateX(-50%) rotate(var(--hour-angle,150deg))}
  .analog:after{width:2px;height:29px;background:var(--brass);transform:translateX(-50%) rotate(var(--minute-angle,0deg))}
  .five-clock-copy small{display:block;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
  .five-clock-copy strong{display:block;font:500 25px/1.1 var(--display);color:var(--brass-hi);margin:4px 0}
  .five-clock-copy span{display:flex;align-items:center;gap:7px;color:var(--peach);font-size:13px}
  .five-clock-copy .flag-img{width:25px}

  /* one orchestrated entrance */
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hero,.mapwrap,.strip{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .mapwrap{animation-delay:.12s}
  .strip{animation-delay:.22s}
  @media (prefers-reduced-motion:reduce){
    .hero,.mapwrap,.strip{animation:none}
    *{transition:none !important}
  }
  @media(max-width:699px){
    .wrap{padding:18px 16px 38px}
    .masthead{align-items:center}.brand{width:100%;font-size:20px}.masthead .five-clock{width:100%;margin-left:0;justify-content:center}
    .nav{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}
    .nav button:first-child,.nav a:first-child{grid-column:1/-1}
    .nav button,.nav a{padding:8px 6px;font-size:11px;white-space:nowrap}
    .utc{font-size:0;margin-left:auto}.utc b{font-size:12px}
    .hero{padding-top:30px}.roll{font-size:clamp(22px,7vw,30px);line-height:1.2}
    .tail{font-size:13px}.pour{gap:10px;margin-top:20px}.pour .glass{width:72px}
    .mapwrap{margin-top:24px}.map{width:100%;min-width:0}
    .maplegend{font-size:11px;gap:10px}.strip{margin-top:22px}
    .timer{padding:15px 16px;gap:13px}.count{font-size:clamp(44px,15vw,62px)}.timer-label{font-size:12px}.timer-label b{font-size:17px}
    .five-clock{padding:14px 16px}.analog{width:66px;height:66px;flex-basis:66px}
    .modal{padding:20px}.recipe-meta{grid-template-columns:repeat(2,1fr)}
    .action{flex:1;text-align:center;min-height:44px}.rankings{padding-top:30px}
    .social-action{flex:1 1 calc(33.333% - 7px);min-height:42px;padding:8px 7px}
    .barrow{grid-template-columns:minmax(96px,135px) 1fr 28px;gap:7px;font-size:12px}
  }
  @media(min-width:1200px){
    .hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);column-gap:48px}
    .hero .lede,.hero .roll,.hero .tail{grid-column:1}.hero .pour{grid-column:2;grid-row:1/5;align-self:center;margin:0}
    .mapwrap{margin-top:28px}
  }
  :focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-radius:2px}

  /* ---------- Where It's Five production interface ---------- */
  body{
    min-width:0;
    background:
      radial-gradient(circle at 70% 22%,rgba(22,102,101,.2),transparent 35%),
      linear-gradient(145deg,#061018 0%,#03080d 76%);
    color:#edf7f5;
    font-family:var(--body);
  }
  .age-gate{
    position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
    background:rgba(2,8,12,.94);backdrop-filter:blur(18px)
  }
  .age-gate[hidden]{display:none}
  .age-card{width:min(500px,100%);padding:clamp(25px,5vw,42px);border:1px solid rgba(232,174,74,.46);border-radius:20px;
    background:linear-gradient(145deg,#0b2029,#07141b);box-shadow:0 34px 100px rgba(0,0,0,.55);text-align:center}
  .age-mark{position:relative;display:grid;width:54px;height:54px;place-items:center;margin:0 auto 22px;overflow:hidden;
    border:1px solid var(--brass);border-radius:14px;color:var(--brass-hi);font:700 12px ui-monospace,monospace}
  .age-mark::after{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:1px;background:var(--brass);box-shadow:0 0 10px var(--brass)}
  .age-card .eyebrow{margin:0 0 9px;color:#67d9d0;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
  .age-card h1{margin:0;color:#f6ead5;font:500 clamp(30px,7vw,46px)/1.05 var(--display);letter-spacing:-.035em}
  .age-copy{margin:16px auto 24px;color:#91a8ad;font-size:16px;line-height:1.55}
  .age-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .age-actions button{min-height:48px;border:1px solid #31515a;border-radius:10px;background:#0b222b;color:#c4d4d6;cursor:pointer;font-weight:700}
  .age-actions .primary{border-color:var(--brass);background:var(--brass);color:#07151b}
  .age-note{margin:18px 0 0;color:#6f8a90;font-size:12px;line-height:1.45}
  .age-denied{margin:22px 0 0;color:#b9c9cb;font-size:15px;line-height:1.5}
  .age-denied[hidden]{display:none}
  .app-shell{min-height:100vh}
  .topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;min-height:64px;
    padding:10px clamp(14px,2vw,26px);border-bottom:1px solid #183139;background:rgba(7,21,28,.9);backdrop-filter:blur(18px)}
  .os-logo{display:flex;align-items:center;gap:10px;color:#edf7f5;font-size:14px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
  .os-logo-mark{position:relative;display:grid;width:36px;height:36px;place-items:center;overflow:hidden;border:1px solid rgba(232,174,74,.75);
    border-radius:10px;background:rgba(232,174,74,.07);color:var(--brass-hi);font:700 10px ui-monospace,monospace}
  .os-logo-mark::after{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:1px;background:var(--brass);box-shadow:0 0 9px var(--brass)}
  .network-status{display:flex;align-items:center;justify-content:center;gap:8px;color:#78939a;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
  .network-status:hover{color:#ffd589}
  .network-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#67d9d0;box-shadow:0 0 12px #67d9d0}
  .profile{display:flex;align-items:center;gap:9px;color:#8ba1a6;font-size:12px}
  .avatar{display:grid;width:32px;height:32px;place-items:center;border:1px solid #2a4a52;border-radius:50%;color:#67d9d0;font-size:11px}
  .app-body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:calc(100vh - 64px)}
  .sidebar{position:sticky;top:64px;height:calc(100vh - 64px);padding:18px 12px;border-right:1px solid #183139;background:rgba(3,10,15,.75)}
  .sidebar-label{display:block;margin:3px 10px 12px;color:#526d74;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .sidebar .nav{display:grid;width:100%;gap:5px;margin:0}
  .sidebar .nav button,.sidebar .nav a{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px;border:1px solid transparent;border-radius:9px;
    background:transparent;color:#839da3;font-size:13px;text-align:left;white-space:normal}
  .sidebar .nav button span,.sidebar .nav a span{width:20px;color:#67d9d0;font-family:ui-monospace,monospace;text-align:center}
  .sidebar .nav button:hover,.sidebar .nav button.active,.sidebar .nav a:hover,.sidebar .nav a.active{border-color:#284850;background:linear-gradient(90deg,rgba(103,217,208,.1),rgba(232,174,74,.035));color:#edf7f5}
  .sidebar-foot{position:absolute;right:15px;bottom:22px;left:15px;padding-top:14px;border-top:1px solid #173039;color:#56737a;font-size:11px;line-height:1.5}
  .workspace.wrap{width:100%;max-width:none;margin:0;padding:clamp(16px,2.2vw,30px) clamp(12px,2.2vw,30px) 54px;min-width:0}
  .workspace .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 15px;border-bottom:0}
  .page-eyebrow{margin:0 0 6px;color:#67d9d0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .page-title{margin:0;color:#f0f8f6;font:700 clamp(29px,4.2vw,48px)/1 var(--body);letter-spacing:-.055em}
  .sync-note{color:#607b82;font-size:12px;white-space:nowrap}
  .kpi-grid{display:grid;grid-template-columns:.8fr .72fr 1.35fr 1fr;gap:10px;margin-bottom:12px}
  .metric{min-width:0;padding:15px 16px;border:1px solid #1b3841;border-radius:12px;background:linear-gradient(145deg,rgba(11,31,39,.96),rgba(6,18,25,.96))}
  .metric-label{display:block;margin-bottom:8px;color:#678187;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .metric>strong{display:block;overflow:hidden;color:var(--brass-hi);font:700 clamp(23px,3vw,34px)/1 ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap}
  .metric>small{display:block;margin-top:7px;color:#6f898f;font-size:11px}
  .metric-place{padding:12px 14px}
  .metric-place .five-clock{display:flex;align-items:center;gap:12px;min-height:0;margin:0;padding:0;border:0;background:transparent}
  .metric-place .analog{width:52px;height:52px;flex-basis:52px;border-width:1px}
  .metric-place .analog::before{height:16px}
  .metric-place .analog::after{height:21px}
  .metric-place .five-clock-copy{min-width:0}
  .metric-place .five-clock-copy small{font-size:10px}
  .metric-place .five-clock-copy strong{font:700 21px/1.05 ui-monospace,monospace;color:var(--brass-hi)}
  .metric-place .five-clock-copy span{display:block;overflow:hidden;color:#d9e7e5;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
  .metric-place .five-clock-copy .flag-img{width:27px;margin-right:6px;vertical-align:middle}
  .cheers-metric{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
  .cheers-metric .metric-label{grid-column:1/-1;margin-bottom:0}
  .cheers-count{color:var(--brass-hi);font:700 clamp(22px,2.5vw,31px)/1 ui-monospace,monospace}
  .cheers-button{min-height:39px;padding:8px 12px;border:1px solid var(--brass);border-radius:9px;background:var(--brass);color:#08161c;cursor:pointer;font-size:12px;font-weight:800;white-space:nowrap}
  .cheers-button.is-counted{background:transparent;color:var(--brass-hi)}
  .dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.68fr);gap:12px;align-items:start}
  .panel{min-width:0;overflow:hidden;border:1px solid #1b3841;border-radius:13px;background:rgba(7,21,28,.92)}
  .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:47px;padding:12px 15px;border-bottom:1px solid #1b3841}
  .panel-head strong{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
  .panel-head span{color:#658087;font-size:11px;text-align:right}
  .map-panel{position:relative}
  .mapframe{position:relative;overflow:hidden;padding:10px 12px 2px;background:radial-gradient(circle at 50% 45%,rgba(27,99,98,.2),transparent 61%)}
  .mapframe::before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(90deg,rgba(80,132,139,.22) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 96%)}
  .map-panel .mapwrap{position:relative;z-index:1;width:100%;margin:0;padding:12px 0 6px}
  .map-panel svg.map{display:block;width:100%;height:auto;min-width:0;overflow:visible;filter:drop-shadow(0 0 24px rgba(103,217,208,.12))}
  .meridian-sweep{position:absolute;z-index:4;top:4%;bottom:5%;left:var(--meridian-left,50%);width:4.1667%;border-left:2px solid #fff0bf;background:linear-gradient(90deg,rgba(232,174,74,.2),rgba(232,174,74,.08));box-shadow:-4px 0 17px rgba(232,174,74,.7);pointer-events:none;will-change:left}
  .meridian-sweep::after{content:"5 PM";position:absolute;top:4%;left:8px;color:rgba(255,224,160,.9);font:700 9px/1 ui-monospace,monospace;letter-spacing:.11em;white-space:nowrap}
  .map-panel .maplegend{position:relative;z-index:2;margin:0;padding:12px 15px;border-top:1px solid #1b3841;color:#789297;font-size:12px}
  .map-panel .zone{fill:rgba(65,123,128,.27);stroke:none}
  .map-panel .zone.on{fill:rgba(232,174,74,.82);stroke:#ffe4a0;stroke-width:.72;filter:drop-shadow(0 0 2px rgba(232,174,74,.45))}
  .map-panel .dot{fill:rgba(217,235,232,.38)}
  .map-panel .dot.on{fill:#fff8e8;stroke:#07151b}
  .tip{background:#0b222b;border-color:rgba(232,174,74,.5);color:#dceae8}
  .rail{display:grid;gap:12px}
  .cocktail-panel .hero{display:block;padding:17px;margin:0}
  .hidden-generated{display:none}
  .cocktail-kicker{margin:0 0 7px;color:#67d9d0;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
  .cocktail-panel .pour{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:14px;max-width:none;margin:0;padding:5px;border-radius:10px}
  .cocktail-panel .pour .glass{width:92px}
  .cocktail-panel .pour .drink{font:700 clamp(28px,4vw,43px)/.95 var(--body);letter-spacing:-.055em;color:#f1f8f6}
  .cocktail-panel .pour .build{color:#829ba1;font-size:14px;line-height:1.5}
  .cocktail-panel .pour .hint{color:var(--brass);font-size:11px;font-weight:700}
  .utility-panel{padding-bottom:8px}
  .utility-link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:calc(100% - 24px);min-height:45px;margin:8px 12px 0;padding:10px 12px;
    border:1px solid #284850;border-radius:9px;background:#0a2028;color:#c2d3d5;cursor:pointer;font-size:13px;text-align:left}
  .utility-link span{color:var(--brass-hi)}
  .rankings{padding:0 0 28px}
  .rankings h1{margin:0;padding:22px 22px 8px;color:#f0f8f6;font:700 clamp(30px,5vw,50px)/1 var(--body);letter-spacing:-.055em}
  .rankings .intro{max-width:70ch;margin:0;padding:0 22px 8px;color:#81999f;font-size:15px}
  .rankings h2{margin:18px 22px 13px;color:var(--brass-hi);font:700 19px/1.2 var(--body)}
  .rankings>.chart,.rankings>.country-charts{margin-right:22px;margin-left:22px}
  .rankings>.chart{max-width:none;padding:18px;border:1px solid #1d3a43;border-radius:11px;background:#081b23}
  .country-card{border-color:#1d3a43;background:#081b23}
  .country-card h3{font-family:var(--body);font-weight:700}
  dialog{border-color:rgba(232,174,74,.45);background:#0a2029}
  dialog::backdrop{background:rgba(2,8,12,.82)}
  .modal h2,.recipegrid h3,.share-label{font-family:var(--body)}
  .modal h2{font-weight:700;letter-spacing:-.04em}

  @media(max-width:1050px){
    .app-body{grid-template-columns:1fr}
    .sidebar{position:sticky;top:64px;z-index:15;width:100%;height:auto;padding:8px 12px;border-right:0;border-bottom:1px solid #183139;background:rgba(4,13,18,.94);backdrop-filter:blur(15px)}
    .sidebar-label,.sidebar-foot{display:none}
    .sidebar .nav{display:grid;grid-template-columns:1fr;gap:7px}
    .sidebar .nav button,.sidebar .nav a{justify-content:center;text-align:center}
    .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-grid{grid-template-columns:1fr}
    .rail{grid-template-columns:1.15fr .85fr}
  }
  @media(max-width:700px){
    .topbar{grid-template-columns:1fr auto;min-height:58px;padding:9px 12px}
    .network-status{font-size:10px;letter-spacing:.04em}
    .profile>span{display:none}
    .app-body{min-height:calc(100vh - 58px)}
    .sidebar{top:58px;padding:7px 8px}
    .sidebar .nav button,.sidebar .nav a{min-height:42px;padding:7px 5px;font-size:11px;line-height:1.15}
    .sidebar .nav button span,.sidebar .nav a span{display:none}
    .workspace.wrap{padding:16px 9px 36px}
    .workspace .masthead{display:block;padding:0 4px 14px}
    .sync-note{display:none}
    .page-title{font-size:clamp(29px,9vw,39px)}
    .kpi-grid{gap:7px}
    .metric{padding:12px}
    .metric>strong{font-size:clamp(22px,8vw,29px)}
    .metric-place .analog{width:44px;height:44px;flex-basis:44px}
    .metric-place .analog::before{height:14px}.metric-place .analog::after{height:18px}
    .metric-place .five-clock-copy strong{font-size:17px}
    .metric-place .five-clock-copy span{font-size:10px}
    .cheers-metric{grid-template-columns:1fr}.cheers-button{width:100%;white-space:normal}
    .panel-head{align-items:flex-start}.panel-head span{max-width:15ch}
    .mapframe{padding:8px 3px 0}
    .map-panel .mapwrap{padding:8px 0 3px}
    .map-panel .maplegend{gap:8px;padding:10px;font-size:10px}
    .meridian-sweep::after{font-size:7px}
    .rail{grid-template-columns:1fr}
    .cocktail-panel .pour{grid-template-columns:78px 1fr;gap:10px}
    .cocktail-panel .pour .glass{width:78px}
    .cocktail-panel .pour .drink{font-size:clamp(25px,9vw,36px)}
    .rankings h1{padding:18px 14px 7px}.rankings .intro{padding:0 14px 6px;font-size:14px}.rankings h2{margin:17px 14px 11px}
    .rankings>.chart,.rankings>.country-charts{margin-right:14px;margin-left:14px}
    .age-actions{grid-template-columns:1fr}
  }
  @media(max-width:430px){
    .metric-place .analog{display:none}
    .metric-place .five-clock-copy strong{font-size:16px}
    .cheers-count{font-size:22px}
    .cocktail-panel .pour{grid-template-columns:1fr}
    .cocktail-panel .pour .glass{width:92px;margin:auto}
  }

  /* ---------- concept-first revision ---------- */
  .concept-hero{position:relative;overflow:hidden;margin-bottom:12px;padding:clamp(24px,4.5vw,58px);background:
    radial-gradient(circle at 83% 25%,rgba(232,174,74,.16),transparent 30%),linear-gradient(135deg,#0b2731,#07151c 70%)}
  .concept-hero::after{content:"";position:absolute;inset:auto -9% -58% 43%;height:280px;border:1px solid rgba(232,174,74,.2);border-radius:50%;box-shadow:0 0 100px rgba(232,174,74,.08);pointer-events:none}
  .hero-kicker{margin:0 0 12px;color:#67d9d0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .hero-line{position:relative;z-index:1;max-width:980px;margin:0;color:#f3f8f6;font:700 clamp(38px,6vw,78px)/.98 var(--body);letter-spacing:-.065em}
  .hero-line .hero-place{color:var(--brass-hi)}
  .hero-line .flag-img{width:clamp(40px,5vw,64px);margin:0 .08em;vertical-align:.05em}
  .hero-pour{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;margin-top:30px}
  .hero-pour .pour{display:grid;grid-template-columns:88px minmax(0,560px);align-items:center;gap:16px;max-width:680px;margin:0;padding:7px}
  .hero-pour .pour .glass{width:88px}.hero-pour .pour .drink{font:700 clamp(27px,4vw,44px)/1 var(--body);letter-spacing:-.05em;color:#fff4d5}
  .server-drink-icon{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:14px}
  .hero-pour .pour .build{color:#9bb0b3}.hero-pour .pour .hint{color:var(--brass-hi);font-weight:800}
  .hero-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
  .hero-action{min-height:48px;padding:11px 17px;border:1px solid #36565f;border-radius:10px;background:#0c2831;color:#e9f4f2;cursor:pointer;font:800 14px var(--body)}
  .hero-action.primary{border-color:var(--brass);background:var(--brass);color:#07151b}
  .hero-action.selected[data-vote="liked"]{border-color:var(--brass);background:rgba(232,174,74,.12);color:var(--brass-hi)}
  .hero-action:disabled{cursor:wait;opacity:.72}
  .hero-action:hover{border-color:var(--brass-hi);transform:translateY(-1px)}
  .cheer-share-card{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:13px 14px;border:1px solid rgba(232,174,74,.35);border-radius:10px;background:rgba(232,174,74,.08)}
  .cheer-share-card[hidden]{display:none}.cheer-share-card p{margin:0;color:#f4dfb7;font-size:14px;line-height:1.45}
  .cheer-share-card button{flex:0 0 auto;min-height:40px;padding:8px 12px;border:1px solid var(--brass);border-radius:8px;background:transparent;color:var(--brass-hi);cursor:pointer;font-weight:800}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 12px}
  .places-metric{appearance:none;width:100%;color:inherit;text-align:left;cursor:pointer}
  .places-metric:hover,.places-metric:focus-visible{border-color:rgba(232,174,74,.72);outline:none;box-shadow:0 0 0 3px rgba(232,174,74,.1)}
  .places-metric .metric-prompt{color:var(--brass);font-weight:700}
  .places-modal{width:min(820px,calc(100% - 28px))}
  .places-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 22px 24px}
  .place-pour{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:76px;padding:12px;border:1px solid #284850;border-radius:12px;background:#081b23;color:#edf7f5;cursor:pointer;text-align:left;text-decoration:none}
  .place-pour:hover,.place-pour:focus-visible{border-color:var(--brass);outline:none;background:#0c2731}
  .place-pour .flag-img{width:38px}
  .place-pour-city{display:block;font-size:15px;font-weight:800}
  .place-pour-country,.place-pour-time{display:block;margin-top:3px;color:#78949a;font-size:11px}
  .place-pour-drink{display:block;max-width:18ch;color:var(--brass-hi);font-size:13px;font-weight:800;text-align:right}
  .place-pour-label,.drink-label{display:block;margin-top:5px;color:#8ca8ad;font-size:10px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
  .place-pour-label{max-width:24ch;text-align:right}
  .place-pour-arrow{color:var(--brass);font-size:17px}
  .social-proof{display:none}.social-proof.is-visible{display:block}
  .map-panel{margin-bottom:12px}.meridian-sweep{left:var(--meridian-left,50%);transition:none;will-change:left}
  .meridian-sweep::after{content:"5 PM"}
  .meridian-sweep::before{content:"";position:absolute;left:0;top:8%;width:9px;height:9px;border:1px solid rgba(255,245,207,.92);border-radius:50%;
    background:#fff4cf;box-shadow:0 0 8px #fff4cf,0 0 19px rgba(232,174,74,.95);transform:translate(-50%,-50%);animation:meridianPulse 3.2s linear infinite}
  @keyframes meridianPulse{
    0%{top:8%;opacity:0;transform:translate(-50%,-50%) scale(.55)}
    12%{opacity:1}
    82%{opacity:1}
    100%{top:92%;opacity:0;transform:translate(-50%,-50%) scale(1.1)}
  }
  @media (prefers-reduced-motion:reduce){.meridian-sweep::before{top:50%;animation:none}}
  .rank-shortcut{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:18px}
  .rank-shortcut h2{margin:0 0 4px;font-size:20px;color:#f1f8f6}.rank-shortcut p{margin:0;color:#7f999f;font-size:14px}
  .rank-shortcut .utility-link{width:auto;min-width:190px;margin:0}
  .map-noscript{display:block;width:100%;height:auto;border-radius:10px}
  .maplegend-five{width:15px;height:9px;border-radius:2px;background:rgba(232,174,74,.85)}
  .maplegend-city{background:#fffaf0}
  .maplegend-other{background:rgba(103,217,208,.34)}
  .about-five{margin:0 0 12px;padding:clamp(24px,4vw,46px);background:linear-gradient(145deg,rgba(11,39,49,.98),rgba(7,21,28,.98))}
  .about-five-kicker{margin:0 0 8px;color:#67d9d0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .about-five h2{max-width:780px;margin:0;color:#f1f8f6;font:700 clamp(27px,4vw,44px)/1.04 var(--body);letter-spacing:-.045em}
  .about-five-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:24px}
  .about-five-copy p{margin:0 0 17px;color:#9db1b5;font-size:15px;line-height:1.68}
  .about-five-copy strong{color:#f4dcae;font-weight:800}
  .ranking-tabs{display:flex;gap:8px;margin:16px 22px 2px;padding-bottom:14px;border-bottom:1px solid #1d3a43}
  .ranking-tabs button,.ranking-tabs a{min-height:42px;padding:8px 14px;border:1px solid #294952;border-radius:9px;background:#0a2028;color:#a9bec1;cursor:pointer;font-weight:800;text-decoration:none}
  .ranking-tabs button.active,.ranking-tabs a.active{border-color:var(--brass);color:var(--brass-hi);background:rgba(232,174,74,.08)}
  .proof-note{margin:0 0 12px;padding:11px 12px;border:1px dashed #2b4a52;border-radius:9px;color:#91a8ad;font-size:13px}
  .barvalue.is-hidden{color:transparent}.barvalue.is-hidden::after{content:"—";color:#617c82}

  @media(max-width:1050px){
    html{scroll-padding-top:112px}.sidebar{top:56px}.hero-pour{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}
  }
  @media(max-width:700px){
    html{scroll-padding-top:96px}.topbar{min-height:50px;padding:6px 10px}.os-logo-mark{width:32px;height:32px}.os-logo{font-size:13px}.profile{display:none}
    .app-body{min-height:calc(100vh - 50px)}.sidebar{top:50px;padding:5px 7px}.sidebar .nav{grid-template-columns:1fr}
    .sidebar .nav button,.sidebar .nav a{min-height:36px}.workspace.wrap{padding-top:14px}.workspace .masthead{display:none}
    .concept-hero{padding:24px 17px}.hero-line{font-size:clamp(36px,11vw,54px);line-height:1.02}.hero-pour{margin-top:23px}
    .hero-pour .pour{grid-template-columns:68px 1fr;gap:10px}.hero-pour .pour .glass{width:68px}.hero-pour .pour .drink{font-size:clamp(25px,8vw,35px)}
    .hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-action{width:100%}.hero-actions .hero-action.primary{grid-column:1/-1}.cheer-share-card{align-items:stretch;flex-direction:column}
    .places-modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px);overflow-x:hidden;overscroll-behavior:contain}
    .places-modal .modal{padding:0 12px 14px}
    .places-modal .modalhead{position:sticky;top:0;z-index:3;gap:12px;margin:0 -12px;padding:16px 12px 12px;border-bottom:1px solid #1b3841;background:linear-gradient(180deg,#0a2029 82%,rgba(10,32,41,.96))}
    .places-modal .modal h2{font-size:clamp(27px,8vw,34px);line-height:1.05}
    .places-modal .origin{margin:5px 0 0;font-size:13px;line-height:1.4}
    .places-modal .close{flex:0 0 auto;min-width:44px;min-height:44px;margin:-7px -7px 0 0}
    .places-list{grid-template-columns:1fr;gap:9px;padding:12px 0 0}
    .place-pour{grid-template-columns:38px minmax(0,1fr);align-items:start;gap:9px 11px;min-height:0;padding:12px}
    .place-pour>.flag-img{grid-row:1/span 2;align-self:center;width:38px}
    .place-pour>span{min-width:0}
    .place-pour>span:nth-of-type(1){grid-column:2}
    .place-pour>span:nth-of-type(2){display:grid;grid-column:2;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;margin-top:1px;padding-top:8px;border-top:1px solid rgba(40,72,80,.72)}
    .place-pour-city{font-size:16px;line-height:1.2}
    .place-pour-country,.place-pour-time{font-size:12px;line-height:1.3}
    .place-pour-drink{grid-column:1;max-width:none;overflow-wrap:anywhere;font-size:14px;line-height:1.25;text-align:left}
    .place-pour-label{grid-column:1;max-width:none;overflow-wrap:anywhere;font-size:10px;line-height:1.35;text-align:left}
    .place-pour-arrow{grid-column:2;grid-row:1/span 2;align-self:center;font-size:20px}
    .kpi-grid{grid-template-columns:1fr 1fr}.kpi-grid .metric-place{grid-column:1/-1}.mapframe{padding-top:16px}
    .about-five{padding:25px 18px}.about-five-copy{grid-template-columns:1fr;gap:0}.about-five-copy p{font-size:14px;line-height:1.62}
    .rank-shortcut{grid-template-columns:1fr}.rank-shortcut .utility-link{width:100%}.ranking-tabs{margin:10px 14px 0;position:relative;z-index:1}
  }
  @media(max-width:430px){
    .hero-pour .pour{grid-template-columns:1fr}.hero-pour .pour .glass{width:82px;margin:0}.kpi-grid{grid-template-columns:1fr}.kpi-grid .metric-place{grid-column:auto}
  }

  /* ---------- literal 5 PM band, rankings and footer ---------- */
  .panel-head>div{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;flex:1}
  .panel-head>div>span{margin-left:auto}
  .watch-day{flex:0 0 auto;min-height:36px;padding:7px 11px;border:1px solid rgba(232,174,74,.55);border-radius:8px;background:rgba(232,174,74,.08);color:var(--brass-hi);cursor:pointer;font:800 11px var(--body)}
  .watch-day:hover,.watch-day:focus-visible{border-color:var(--brass-hi);outline:none;background:rgba(232,174,74,.14)}
  .watch-day:disabled{cursor:progress;opacity:.78}
  .meridian-trail{position:absolute;z-index:3;top:4%;bottom:5%;left:calc(var(--meridian-left,50%) + 4.1667%);width:2.0833%;background:linear-gradient(90deg,rgba(232,174,74,.13),transparent);pointer-events:none;will-change:left}
  .meridian-wrap-copy.meridian-sweep{left:calc(var(--meridian-left,50%) - 100%)}
  .meridian-wrap-copy.meridian-trail{left:calc(var(--meridian-left,50%) - 95.8333%)}
  .meridian-wrap-copy.meridian-sweep::before,.meridian-wrap-copy.meridian-sweep::after{display:none}
  .map-panel .zone.on{fill:rgba(232,174,74,.76);stroke:none;filter:drop-shadow(0 0 2px rgba(232,174,74,.4))}
  .maplegend-five{width:18px;height:9px;border-radius:2px;background:linear-gradient(90deg,#fff0bf 0 2px,rgba(232,174,74,.45) 2px)}
  .meridian-caption{margin:0;padding:0 15px 14px;color:#829ba1;font-size:12px;line-height:1.5}
  .about-five-copy{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
  .about-five-copy article{min-width:0}
  .about-five-copy h3{margin:0 0 9px;color:var(--brass-hi);font-size:18px;line-height:1.2}
  .about-five-copy p{margin:0;color:#9db1b5;font-size:15px;line-height:1.68}
  .site-footer{display:grid;grid-template-columns:minmax(240px,1.2fr) minmax(260px,1fr);gap:14px 28px;margin-top:12px;padding:28px;border:1px solid #1b3841;border-radius:13px;background:#06151c;color:#91a8ad}
  .site-footer p{max-width:62ch;margin:0;color:#b8c9ca;font-size:14px;line-height:1.6}
  .site-footer nav{display:flex;justify-content:flex-end;align-items:flex-start;gap:10px 18px;flex-wrap:wrap}
  .site-footer a{color:var(--brass-hi);font-size:13px;text-decoration:none}
  .site-footer a:hover,.site-footer a:focus-visible{text-decoration:underline}
  .site-footer small{grid-column:1/-1;padding-top:13px;border-top:1px solid #173039;color:#627d83;font-size:11px}
  .compact-footer{margin-bottom:0}

  .rankings-page{padding:clamp(22px,4vw,46px)}
  .rankings-kicker{margin:0 0 9px;color:#67d9d0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .rankings-page h1{margin:0;color:#f0f8f6;font:700 clamp(36px,6vw,64px)/1 var(--body);letter-spacing:-.055em}
  .rankings-page>.intro{max-width:65ch;margin:14px 0 0;color:#91a8ad;font-size:15px;line-height:1.6}
  .rankings-page .ranking-tabs{margin:24px 0 0;padding:0 0 20px}
  .ranking-empty{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:20px;border:1px dashed #31515a;border-radius:12px;background:#081b23}
  .ranking-empty p{margin:0;color:#b8c9ca;font-size:15px}
  .ranking-empty button{flex:0 0 auto;min-height:42px;padding:9px 14px;border:1px solid var(--brass);border-radius:9px;background:var(--brass);color:#07151b;cursor:pointer;font-weight:800}
  .ranking-results h2{margin:30px 0 14px;color:var(--brass-hi);font-size:20px}
  .ranking-bars,.ranking-plain{display:grid;gap:9px;margin:0;padding:0;list-style:none}
  .ranking-bars li,.ranking-plain li{display:grid;grid-template-columns:28px minmax(130px,220px) minmax(100px,1fr) 42px;align-items:center;gap:10px;min-height:38px}
  .ranking-plain li{grid-template-columns:28px 1fr 42px}
  .ranking-position{display:grid;width:25px;height:25px;place-items:center;border:1px solid #294952;border-radius:50%;color:#91a8ad;font-size:11px}
  .ranking-name{overflow:hidden;color:#d9e7e5;text-overflow:ellipsis;white-space:nowrap}
  .ranking-track{height:10px;overflow:hidden;border-radius:999px;background:rgba(242,235,221,.07)}
  .ranking-track i{display:block;height:100%;min-width:3px;border-radius:inherit;background:linear-gradient(90deg,var(--brass),var(--brass-hi))}
  .ranking-track i.disliked{background:linear-gradient(90deg,var(--sage),var(--peach))}
  .ranking-bars strong,.ranking-plain strong{color:var(--peach);font-size:13px;text-align:right}
  .ranking-results .country-charts{margin:0}
  .ranking-results .country-card h3{display:block;font-family:var(--body);font-size:17px;font-weight:800}
  .ranking-results .country-card .ranking-bars li{grid-template-columns:25px minmax(90px,140px) minmax(70px,1fr) 36px;font-size:12px;gap:7px}
  .ranking-results .country-card .ranking-plain li{grid-template-columns:25px 1fr 36px;font-size:12px;gap:7px}

  @media(max-width:900px){
    .about-five-copy{grid-template-columns:1fr}
    .site-footer{grid-template-columns:1fr}.site-footer nav{justify-content:flex-start}.site-footer small{grid-column:auto}
  }
  @media(max-width:700px){
    .panel-head{display:grid;grid-template-columns:1fr auto;align-items:start}.panel-head>div{display:block}.panel-head>div>span{display:block;max-width:none;margin:4px 0 0;text-align:left}
    .watch-day{align-self:center;font-size:10px}
    .meridian-caption{font-size:11px}
    .ranking-empty{align-items:stretch;flex-direction:column}.ranking-empty button{width:100%}
    .ranking-bars li{grid-template-columns:24px minmax(96px,1fr) 70px 34px;gap:7px;font-size:12px}
    .ranking-plain li{grid-template-columns:24px 1fr 34px}
    .site-footer{padding:22px 17px}.site-footer nav{display:grid;gap:10px}
  }