/* One committed look, light only: a warm Riviera travel poster. Linen paper, olive and sage, sea blue, terracotta, saffron. */
:root{
  color-scheme:light;
  --bg:#F3EDE1; --paper:#FBF8F1; --paper-2:#F6F0E4; --ink:#2A2922; --muted:#6E6A5C; --line:#E3D9C6; --line-2:#D6CAB2;
  --terracotta:#B5472F; --olive:#5F6F32; --olive-soft:#E6E8D3; --sea:#2F5D7C; --wine:#7A3B4E;
  --saffron:#9A6B12; --saffron-bg:#F8ECCB; --saffron-line:#E3C57C;
  --shadow:0 1px 1px rgba(60,48,20,.04),0 10px 30px -12px rgba(60,48,20,.18);
  --r:18px;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,"Times New Roman",serif;
  --sans:"Jost","Futura","Avenir Next",ui-sans-serif,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(60px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;background:#F3EDE1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--sans);padding-inline:16px;padding-block:0 calc(40px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
a{color:var(--sea);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
b,strong{font-weight:600}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.005em}

/* regions */
.r-sf{--region:var(--terracotta)} .r-south{--region:var(--olive)} .r-coast{--region:var(--sea)} .r-east{--region:var(--wine)}

.lbl{font:600 11px/1.1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- hero: travel poster ---------- */
.hero{position:relative;margin-inline:-16px;padding-inline:16px;background:linear-gradient(180deg,#F1E3C8 0%,#F4E9D6 45%,#F3EDE1 100%)}
.hero-inner{position:relative;z-index:2;padding-block:calc(30px + env(safe-area-inset-top,0px)) 0;display:grid;gap:10px}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta)}
.hero h1{font-size:clamp(46px,13vw,92px);font-weight:600;line-height:.92;letter-spacing:-.02em}
.hero h1 em{font-style:italic;font-weight:500;color:var(--olive)}
.hero .sub{font:italic 400 clamp(18px,4.6vw,22px)/1.35 var(--serif);color:var(--muted);max-width:30ch}
.poster{position:relative;height:clamp(190px,40vw,330px);margin-inline:-16px;overflow:hidden}
.poster svg{position:absolute;inset:0;width:100%;height:100%}
.fog{animation:drift 80s ease-in-out infinite alternate}
.fog.b{animation-duration:110s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
@media (prefers-reduced-motion:reduce){.fog{animation:none}}
.hero-foot{position:relative;z-index:2;display:grid;gap:12px;padding-block:18px 24px}

.route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stop{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 12px 11px;display:grid;gap:4px;align-content:start}
.stop b{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--region)}
.stop h3{font:italic 600 clamp(17px,4.8vw,22px)/1.05 var(--serif)}
.stop span{font:500 13px/1.3 var(--sans);color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fact{display:grid;gap:5px;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.fact b{font:600 16.5px/1.2 var(--sans)}
.fact.warn{background:var(--saffron-bg);border-color:var(--saffron-line)}
.fact.warn .lbl{color:var(--saffron)}

/* ---------- sticky nav ---------- */
.nav{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(243,237,225,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.nav .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{flex:none;text-decoration:none;color:var(--ink);font:500 15px/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper)}
.nav a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- sections ---------- */
section.block{padding-block:40px 4px;display:grid;gap:16px}
.sec-head{display:grid;gap:6px}
.sec-head h2{font-size:clamp(34px,9vw,52px);font-weight:600;letter-spacing:-.015em}
.sec-head h2 em{font-style:italic;font-weight:500;color:var(--olive)}
.sec-head p{margin:0;color:var(--muted);font-size:16px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:50%;background:var(--region)}

/* ---------- chips / pills ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 15px/1 var(--sans);padding:7px 11px;border-radius:999px;background:var(--olive-soft);color:#3F4A1F}
.chip.food{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.pill{display:inline-flex;align-items:center;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border-radius:999px;
  background:var(--paper-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.pill.decide{background:var(--saffron-bg);color:var(--saffron);border-color:var(--saffron-line)}
.pill.go{background:var(--olive-soft);color:var(--olive);border-color:transparent}
.region{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--region)}
.region::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--region)}

/* ---------- overview day cards ---------- */
.days{display:grid;gap:14px}
.day{display:grid;grid-template-areas:"head" "mosaic" "rows" "more";gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.date{grid-area:head;display:flex;align-items:center;gap:14px}
.cal{flex:none;width:56px;text-align:center;border-right:1px solid var(--line-2);padding-right:12px}
.cal b{display:block;font:600 11px/1 var(--sans);letter-spacing:.16em;color:var(--region)}
.cal span{display:block;font:500 34px/1 var(--serif);margin-top:4px}
.date .lbl{color:var(--region)}
.date h3{font-size:clamp(23px,6.2vw,28px);margin-top:5px}
.rows{grid-area:rows;display:grid;gap:10px}
.row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:start}
.row .lbl{padding-top:9px}
.row .val{font-weight:500;padding-top:4px}
.more{grid-area:more;display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:var(--ink);
  font:italic 600 18px/1 var(--serif);padding:13px 16px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.more span{font-style:normal;color:var(--terracotta)}

.mosaic{grid-area:mosaic;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;border-radius:12px;overflow:hidden;align-self:start;width:100%;max-width:100%}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:1;grid-column:span 3}
.mosaic figure:first-child{grid-column:1/-1;aspect-ratio:3/2}
.m-4 figure:not(:first-child){grid-column:span 4;aspect-ratio:4/3}
.m-3 figure:not(:first-child){grid-column:span 6;aspect-ratio:16/10}
.m-2 figure,.m-2 figure:first-child{grid-column:span 6;aspect-ratio:4/5}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic figcaption{position:absolute;left:8px;bottom:8px;font:italic 500 14px/1.15 var(--serif);color:var(--ink);background:rgba(251,248,241,.92);padding:4px 10px 5px;border-radius:999px;max-width:calc(100% - 16px)}
.mosaic figure:not(:first-child) figcaption{display:none}
.m-2 figure figcaption{display:block!important}

/* ---------- meals ---------- */
.meal-note{display:grid;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px}
.meal-day{display:grid;gap:10px}
.meal-day > h3{font-size:clamp(22px,6vw,26px);display:grid;gap:6px}
.slot-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.slot-head .hint{font:italic 500 15px/1 var(--serif);color:var(--muted)}
.swipe{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;padding-bottom:4px;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe > *{scroll-snap-align:start}
.one{display:grid}
.rest{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;align-content:start;box-shadow:var(--shadow)}
.rest.alt{background:var(--paper-2);border-style:dashed;box-shadow:none}
.rest-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.rest .slot{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);margin-bottom:7px}
.rest h4{font-size:24px}
.rest .meta{color:var(--muted);font:italic 400 16px/1.3 var(--serif);margin-top:4px}
.rest .note{color:var(--muted);font-size:15px}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:16px}
.menu li{display:grid;grid-template-columns:6px minmax(0,1fr);gap:10px;align-items:baseline}
.menu li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);transform:translateY(-2px)}
.menu .en{display:block;font-size:13.5px;color:var(--muted);margin-top:1px}
.v{display:inline-grid;place-items:center;width:18px;height:18px;font:600 10px/1 var(--sans);color:var(--olive);border:1.5px solid var(--olive);border-radius:50%;margin-left:6px;vertical-align:1px}
.links{display:flex;gap:8px;flex-wrap:wrap}
.links a{font:500 15px/1 var(--sans);text-decoration:none;padding:10px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);color:var(--sea)}
.decide-box{border:1px solid var(--saffron-line);background:var(--saffron-bg);border-radius:18px;padding:14px;display:grid;gap:12px}
.decide-box > .slot-head .lbl{color:var(--saffron)}
.decide-box .swipe{margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px}

/* ---------- day by day ---------- */
.day-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.day-pick button{display:grid;gap:4px;justify-items:center;padding:9px 4px 13px;border-radius:12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;position:relative}
.day-pick button b{font:500 24px/1 var(--serif)}
.day-pick button span{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.day-pick button::after{content:"";position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--region)}
.day-pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.day-pick button[aria-pressed="true"] b,.day-pick button[aria-pressed="true"] span{color:var(--paper)}
.dd{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.dd-hero{position:relative;aspect-ratio:4/3;max-height:340px;width:100%}
.dd-hero img{width:100%;height:100%;object-fit:cover}
.dd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,16,0) 35%,rgba(30,26,16,.72))}
.dd-hero .t{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#FBF8F1;display:grid;gap:6px}
.dd-hero .dow{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.dd-hero .dow i{width:8px;height:8px;border-radius:50%;background:var(--region);box-shadow:0 0 0 2px rgba(251,248,241,.9)}
.dd-hero h3{font-size:clamp(28px,7.6vw,40px);font-style:italic;font-weight:500}
.dd-body{padding:16px;display:grid;gap:16px}
.sleep{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.sleep > span:nth-child(2){font:600 17px/1.25 var(--serif)}
.sleep .pills{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.tl > li{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px 14px;align-items:start}
.tile{position:relative;width:82px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--region) 12%,var(--paper-2))}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .when{position:absolute;left:5px;right:5px;bottom:5px;font:600 11px/1.1 var(--sans);color:var(--ink);background:rgba(251,248,241,.93);padding:4px 3px;border-radius:999px;text-align:center;font-variant-numeric:tabular-nums}
.tile.plain{display:grid;place-items:center}
.tile.plain .when{position:static;background:transparent;color:var(--region);font:italic 600 15px/1.1 var(--serif);padding:6px}
.tl h4{font-size:21px;padding-top:2px}
.tl p{margin:4px 0 0;color:var(--muted);font-size:16px}
.tl .full{grid-column:1/-1}
.drive{display:flex;gap:8px;align-items:flex-start;font:500 14.5px/1.3 var(--sans);color:var(--sea);margin-top:7px}
.drive svg{flex:none;margin-top:3px}
.drive span{min-width:0}
.opts{display:grid;gap:7px;border:1px solid var(--saffron-line);background:var(--saffron-bg);border-radius:14px;padding:12px 14px}
.opts .lbl{color:var(--saffron)}
.opts ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:16px}
.tip{display:grid;gap:7px;border:1px solid var(--line);background:var(--olive-soft);border-radius:14px;padding:12px 14px}
.tip .lbl{color:var(--olive)}
.tip ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:16px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pager button{padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);font:italic 600 17px/1 var(--serif);cursor:pointer;color:var(--ink)}
.pager button:disabled{opacity:.35;cursor:default}
.pager button:last-child{text-align:right}

/* ---------- hotels ---------- */
.stay-list{display:grid;gap:12px}
.stay{display:grid;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.stay-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.stay .n{font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--region)}
.stay h4{font-size:24px;margin-top:6px}
.stay p{margin:0;color:var(--muted);font-size:16px}
.hotel{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:7px;align-content:start}
.hotel h5{font-size:21px}
.hotel .price{font:500 15px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.hotel p{margin:0;font-size:15px;color:var(--muted)}
.stay .swipe{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}

/* ---------- to-do ---------- */
.todo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo li{background:var(--paper);border:1px solid var(--line);border-radius:14px}
.todo label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;align-items:start;padding:13px 14px;cursor:pointer;font-size:16px}
.todo input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--olive)}
.todo .w{grid-column:2;font:italic 400 15px/1.3 var(--serif);color:var(--muted)}
.todo input:checked + span{text-decoration:line-through;color:var(--muted)}

footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line-2);color:var(--muted);font-size:14px}
footer summary{cursor:pointer;font:italic 500 16px/1 var(--serif);padding-block:6px}
footer ol{padding-left:18px;display:grid;gap:4px;margin-top:8px}

/* ---------- larger screens ---------- */
@media (min-width:640px){
  body{padding-inline:28px}
  .hero,.nav{margin-inline:-28px;padding-inline:28px}
  .poster{margin-inline:-28px}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .day-pick{grid-template-columns:repeat(8,minmax(0,1fr))}
  .swipe,.decide-box .swipe,.stay .swipe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .swipe-hint{display:none}
  .tl > li{grid-template-columns:132px minmax(0,1fr);gap:8px 18px}
  .tile{width:132px;aspect-ratio:4/3}
  .dd-hero{aspect-ratio:21/9}
  .dd-body{padding:22px}
}
@media (min-width:880px){
  .hero-inner{padding-top:52px}
  .day{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"head mosaic" "rows mosaic" "more mosaic";grid-template-rows:auto auto 1fr;column-gap:24px;padding:18px}
  .more{align-self:end;justify-self:start;background:none;border:0;padding:4px 0;gap:10px}
  .mosaic{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:16/10;gap:6px}
  .mosaic figure,.mosaic figure:first-child,.m-4 figure:not(:first-child),.m-3 figure:not(:first-child),.m-2 figure,.m-2 figure:first-child{aspect-ratio:auto;grid-column:auto}
  .mosaic figure:first-child{grid-column:1/3;grid-row:1/3}
  .m-4 figure:last-child{grid-column:3/5}
  .m-3 figure:not(:first-child){grid-column:3/5}
  .m-2 figure:not(:first-child){grid-column:3/5;grid-row:1/3}
  .mosaic figure:not(:first-child) figcaption{display:block}
  .stay .swipe{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Chinese edition ---------- */
html[lang^="zh"]{--serif:"Bodoni Moda","Songti SC","STSong","Noto Serif SC",serif;--sans:"Jost","PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif}
html[lang^="zh"] *{font-style:normal!important}
html[lang^="zh"] .lbl,html[lang^="zh"] .pill,html[lang^="zh"] .region,html[lang^="zh"] .stop b,html[lang^="zh"] .rest .slot,html[lang^="zh"] .stay .n,html[lang^="zh"] .cal b,html[lang^="zh"] .eyebrow{letter-spacing:.06em}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] h4,html[lang^="zh"] h5{letter-spacing:0;font-weight:700}
html[lang^="zh"] .hero h1{line-height:1.08}
html[lang^="zh"] .hero h1 em,html[lang^="zh"] .sec-head h2 em{font-weight:700}

/* ---------- print / PDF ---------- */
@media print{
  @page{size:A5;margin:9mm 8mm 10mm}
  html,body{background:#F3EDE1}
  body{padding-inline:0;padding-block:0;font-size:15px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.day-pick,.pager,.swipe-hint,.more{display:none!important}
  .hero,.poster{margin-inline:0;padding-inline:0}
  .hero{border-radius:16px;overflow:hidden;padding-inline:14px}
  .poster{margin-inline:-14px}
  .fog{animation:none}
  .day,.rest,.stay,.dd,.hotel{box-shadow:none}
  section.block{padding-block:0 4px;break-before:page}
  #overview{break-before:auto;padding-top:22px}
  .swipe,.decide-box .swipe,.stay .swipe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding-inline:0}
  .day,.rest,.hotel,.stay,.tl > li,.opts,.tip,.meal-note,.fact,.stop,.todo li,.sec-head,.dd-hero,.sleep{break-inside:avoid}
  .meal-day > h3,.slot-head{break-after:avoid}
  #detail{display:grid;gap:0}
  .dd{break-before:page;border:0;background:transparent;border-radius:0;overflow:visible}
  .dd:first-child{break-before:auto}
  .dd-hero{border-radius:16px;overflow:hidden;aspect-ratio:16/9}
  .dd-body{padding:14px 0 0}
  footer details > *:not(summary){display:block}
  footer{break-before:page}
  /* block flow fragments more reliably than grid across pages */
  #days,.days,#meals,.meal-day,.one,.swipe,.decide-box,.decide-box .swipe,.stay .swipe,#detail,.tl,.stay-list,.todo{display:block}
  .days > .day{margin-bottom:12px}
  #meals > .meal-day{margin-bottom:20px}
  .meal-day > * + *,.decide-box > * + *,.swipe > * + *{margin-top:10px}
  .meal-day > h3{display:grid}
  .tl > li{margin-bottom:14px}
  .stay-list > .stay,.todo > li{margin-bottom:8px}
  .day{padding:12px;gap:10px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic figure:first-child{aspect-ratio:2/1}
  .rest{padding:12px 14px;gap:9px}
  .rest h4{font-size:20px}
  .menu{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:6px;font-size:15px}
  .menu .en{font-size:12px}
  .links a{padding:7px 12px;font-size:14px}
  footer ol{display:block;columns:2;column-gap:16px;font-size:9.5px;line-height:1.35}
  footer li{break-inside:avoid;margin-bottom:2px}
}
.rest-top .pill{white-space:normal;text-align:center;max-width:46%;line-height:1.25;flex:none}