/* Heart Athens shared stylesheet, 1 October 2026. The first block is the 1 October
   page stylesheet unchanged; the blocks after it add the section layout. */
:root{--blue:#0B6E99;--dk:#095a7f;--ink:#0b2e4a;--wash:#f4f9fc;--line:#d7e7f0;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.6;}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.2;}
a{color:var(--blue);}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 22px;background:rgba(255,255,255,.96);border-bottom:3px solid var(--blue);}
.brand{font-family:Georgia,serif;font-weight:bold;font-size:22px;color:var(--blue);text-decoration:none;}
.navlinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;}
.navlinks a{color:var(--ink);text-decoration:none;}
.navlinks a:hover{color:var(--blue);}
.hero{background:linear-gradient(135deg,#0B6E99,#0b2e4a);color:#fff;text-align:center;padding:110px 20px;}
.hero .kicker{letter-spacing:2px;text-transform:uppercase;font-size:13px;opacity:.85;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.hero h1{font-size:44px;margin:10px 0 14px;}
.hero p{max-width:680px;margin:0 auto 26px;font-size:19px;opacity:.95;}
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:bold;padding:13px 28px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;}
.btn:hover{background:var(--dk);}
.btn.light{background:#fff;color:var(--blue);}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
section{padding:54px 0;}
.alt{background:var(--wash);}
section h2{font-size:30px;color:var(--blue);margin:0 0 8px;text-align:center;}
.intro{max-width:720px;margin:0 auto 30px;text-align:center;}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(11,46,74,.05);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,46,74,.12);}
.card .ph{height:120px;background:linear-gradient(135deg,#0B6E99,#5bb0cf);overflow:hidden;}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block;}
.card .body{padding:16px;flex:1;display:flex;flex-direction:column;}
.card h3{font-size:17px;margin:0 0 6px;color:var(--blue);}
.card p{margin:0 0 12px;font-size:14.5px;flex:1;}
.card .btn{align-self:flex-start;font-size:13px;padding:8px 16px;}
.recipe{margin:12px 0;padding:12px;border-top:1px dashed var(--line);font-size:13.5px;}
.recipe h4{margin:0 0 8px;font-size:14px;color:var(--blue);}
.recipe-ingredients{margin:0 0 10px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;}
.recipe-ingredients dt{font-weight:600;}
.recipe-ingredients dd{margin:0;color:#4a5a63;}
.recipe-steps{margin:0 0 8px;padding-left:18px;}
.recipe-steps li{margin:0 0 4px;}
.recipe-meta{margin:0 0 10px;font-size:12.5px;color:#5b7483;}
.personal-pick{margin-top:8px;font-size:14px;}
.card .body{gap:6px;}
.card .btn.review{background:transparent;color:var(--blue);border:1px solid var(--line);padding:6px 12px;margin-top:6px;}
.card .btn.review:hover{background:var(--wash);}
.welcome{text-align:center;font-size:18px;max-width:760px;margin:0 auto;}
.book-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px;}
.note{background:#EAF4F9;border:1px solid var(--line);border-radius:8px;padding:14px 18px;max-width:760px;margin:22px auto 0;font-size:14.5px;}
.signup form{display:flex;gap:10px;max-width:460px;margin:16px auto 0;flex-wrap:wrap;justify-content:center;}
.signup input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:15px;}
footer{background:#0b2e4a;color:#cfe3ef;text-align:center;padding:30px 20px;font-size:14px;}
footer a{color:#fff;}
@media(max-width:600px){.hero h1{font-size:32px;}.navlinks{font-size:14px;gap:12px;}}
.azwrap{max-width:940px;margin:0 auto;}.azbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 auto 26px;max-width:820px;}.azbar a{min-width:30px;text-align:center;padding:6px 9px;border:1px solid var(--line);border-radius:6px;color:var(--blue);text-decoration:none;font-weight:bold;font-size:14px;background:#fff;}.azbar a:hover{background:var(--blue);color:#fff;}.azbar span{min-width:30px;text-align:center;padding:6px 9px;border:1px solid var(--line);border-radius:6px;color:#9bb7c6;font-size:14px;background:var(--wash);}.azletter{font-family:Georgia,serif;color:var(--blue);font-size:26px;border-bottom:2px solid var(--line);padding-bottom:4px;margin:26px 0 10px;scroll-margin-top:70px;}.azitem{padding:10px 0;border-bottom:1px solid #eef4f8;}.azitem h3{display:inline;font-size:16px;color:var(--ink);margin:0;font-family:Georgia,serif;}.azitem .chip{display:inline-block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:middle;}.azitem p{margin:5px 0 0;font-size:14.5px;}.toplink{display:inline-block;margin-top:14px;font-size:13px;color:var(--blue);text-decoration:none;font-weight:bold;}.azsource{background:#EAF4F9;border:1px solid var(--line);border-radius:8px;padding:14px 18px;max-width:820px;margin:26px auto 0;font-size:13.5px;}
.azsearch{max-width:820px;margin:0 auto 18px;}
.azsearch input{width:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;border:1px solid var(--line);border-radius:8px;font-family:inherit;color:var(--ink);}
.azsearch input:focus{outline:2px solid var(--blue);outline-offset:1px;}
.azfilters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px auto 6px;max-width:820px;}
.azfilters button{cursor:pointer;font-family:inherit;font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--blue);font-weight:600;}
.azfilters button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);}
.azcount{text-align:center;color:#5b7483;font-size:13.5px;margin:0 auto 20px;}
.azbar a.azoff{opacity:.28;pointer-events:none;}
.aznores{text-align:center;color:#5b7483;padding:26px 0;display:none;}
#toTop{position:fixed;right:18px;bottom:18px;z-index:60;display:none;width:44px;height:44px;border-radius:50%;border:none;background:var(--blue);color:#fff;font-size:20px;line-height:44px;text-align:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25);}
#toTop:focus{outline:2px solid #fff;outline-offset:-4px;}
@media print{.azsearch,.azfilters,#toTop{display:none;}}.azperma{float:right;margin-top:-26px;color:#b9cbd6;text-decoration:none;font-weight:700;opacity:0;transition:opacity .15s;}.azitem:hover .azperma,.azperma:focus{opacity:1;color:var(--accent,#0D5EAF);}.azitem:target{background:#fff9e6;box-shadow:0 0 0 3px #ffe9a8;border-radius:8px;}@media print{.nav,.navlinks,.azbar,.aznores,#signup,#book,#business{display:none!important;}.azitem{page-break-inside:avoid;break-inside:avoid;}.azperma{display:none;}#az{background:#fff!important;}#az .azitem h3{font-size:13pt;}#az .azitem p{font-size:10.5pt;}}

/* Beating heart nav logo (lub-dub); holds still for reduced-motion */
@keyframes hb-beat{0%{transform:scale(1)}10%{transform:scale(1.06)}20%{transform:scale(1)}30%{transform:scale(1.04)}42%{transform:scale(1)}100%{transform:scale(1)}}
.brand svg{display:inline-block;transform-origin:center;animation:hb-beat 1s ease-in-out infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){.brand svg{animation:none}}

@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.05)}60%{transform:scale(1)}100%{transform:scale(1)}}
.heart-logo{transform-origin:center;animation:heartbeat 1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.heart-logo{animation:none}}

.wsbanner{max-width:100%;height:auto;}
.evrow{display:grid;grid-template-columns:96px 1fr;gap:0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;margin-bottom:12px;box-shadow:0 2px 8px rgba(11,46,74,.05);transition:transform .15s,box-shadow .15s;}
.evrow:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,46,74,.12);}
.evdate{background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 6px;text-align:center;}
.evdate .d{font-size:24px;font-weight:bold;line-height:1;}
.evdate .m{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}
.evdate .y{font-size:11px;opacity:.86;margin-top:2px;}
.evbody{padding:14px 18px;display:flex;flex-direction:column;gap:5px;}
.evbody h3{margin:0;font-size:17px;color:var(--blue);}
.evbody p{margin:0;font-size:14.5px;}
.evmeta{font-size:13px;color:#5a6b76;}
.evtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;align-items:center;}
.evtag{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:#5a6b76;background:var(--wash);}
.evtag.ok{background:#E4F3E8;border-color:#B7DFC2;color:#1E7A3C;}
.evtag.ann{background:#FFF4E0;border-color:#F0D9A8;color:#8A6212;}
.evlinks{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;}
.evlinks a{font-size:13px;padding:7px 14px;}
.promo{background:linear-gradient(135deg,var(--blue),#5bb0cf);color:#fff;border-radius:12px;padding:30px 26px;margin-top:34px;}
.promo h3{margin:0 0 8px;font-size:23px;color:#fff;}
.promo>p{margin:0 auto 20px;max-width:640px;font-size:15px;opacity:.94;text-align:center;}
.promo .pgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.pcard{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:18px;display:flex;flex-direction:column;}
.pcard h4{margin:0 0 8px;font-size:16px;color:#fff;}
.pcard p{margin:0 0 14px;font-size:14px;flex:1;opacity:.94;}
.pcard .btn.light{align-self:flex-start;font-size:13px;padding:9px 18px;}
.promo .pnote{margin:18px 0 0;font-size:13px;opacity:.85;text-align:center;}
@media(max-width:560px){.evrow{grid-template-columns:70px 1fr;}.evdate .d{font-size:19px;}.evbody{padding:12px 14px;}}


.navlinks a.hopper{color:var(--blue);font-weight:bold;}
.navlinks a.hopper:hover{color:var(--dk);}

.flagword{display:inline-block;font-weight:900;letter-spacing:.04em;line-height:1;
 font-size:clamp(46px,11vw,104px);
 background-color:#0D5EAF;
 background-image:
   linear-gradient(#fff,#fff),
   linear-gradient(#fff,#fff),
   linear-gradient(#0D5EAF,#0D5EAF),
   repeating-linear-gradient(#0D5EAF 0 11.111%,#fff 11.111% 22.222%);
 background-repeat:no-repeat;
 background-size:.084em .42em, .42em .084em, .42em .42em, 100% 100%;
 background-position:.168em .02em, .02em .168em, .02em .02em, 0 0;
 -webkit-background-clip:text;background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
 .flagword{background:none;color:#fff;-webkit-text-fill-color:#fff;}}
.wordmark{text-align:center;margin:0 0 6px;}
.wordmark .sub{display:block;font-size:clamp(20px,4.4vw,40px);font-weight:800;
 letter-spacing:.34em;color:#fff;margin-top:6px;text-indent:.34em;
 text-shadow:0 2px 8px rgba(0,0,0,.45);}

.contact-block{padding:38px 0 46px;border-top:1px solid var(--line);}
.contact-block h2{margin:0 0 6px;}
.contact-block .lede{margin:0 0 22px;font-size:1.05rem;color:#3d5c73;max-width:62ch;}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.ccard{background:var(--wash);border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;}
.ccard h3{margin:0 0 8px;font-size:1.08rem;}
.ccard p{margin:0 0 14px;font-size:.95rem;}
.contact-block .cnote{margin:22px 0 0;font-size:.95rem;color:#3d5c73;
  background:var(--wash);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:14px 16px;}
img[data-failed="1"]{object-fit:contain;background:#e8eef3;}

.fnote{background:#EAF4F9;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:0 8px 8px 0;padding:12px 15px;margin:0 0 20px;font-size:14px;}
.fnote strong{color:var(--dk);}
.ftablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border:1px solid var(--line);border-radius:10px;background:#fff;}
table.ftable{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px;}
table.ftable caption{text-align:left;padding:12px 14px 10px;font-weight:bold;color:var(--dk);font-size:14.5px;}
table.ftable th,table.ftable td{border-top:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
table.ftable thead th{background:var(--wash);color:var(--dk);border-top:none;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;}
table.ftable tbody tr:nth-child(even){background:#fafdff;}
table.ftable td a{word-break:break-word;}
tr.fgroup th{background:#e4f0f7;font-weight:bold;color:var(--dk);font-size:13px;}
.fsrc{font-size:12.5px;color:#4a6b7a;}
.ftag{display:inline-block;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:20px;white-space:nowrap;margin-right:4px;}
.ftag.yr{background:#e3f4e8;color:#1c6b34;border:1px solid #b9e3c6;}
.ftag.su{background:#fff3df;color:#8a5300;border:1px solid #ffd9a0;}
.ftag.nv{background:#f1f1f1;color:#5a5a5a;border:1px solid #ddd;}
.fsources{font-size:13px;background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:12px 15px;margin:18px 0 0;}
.fsources h4{margin:0 0 6px;font-size:13px;color:var(--dk);text-transform:uppercase;letter-spacing:.4px;}
.fsources ul{margin:0 0 6px 18px;padding:0;}
.fsources li{margin:0 0 4px;}
.fsources p{margin:0;font-size:12.5px;color:#4a6b7a;}
.fsub{font-size:20px;color:var(--dk);margin:26px 0 10px;font-family:Georgia,serif;}
@media(max-width:640px){table.ftable{font-size:12.5px;}}
.rvid{margin:14px 0 0;padding:12px 14px;background:#f4f7fa;border-left:4px solid #1a7fc1;border-radius:0 8px 8px 0}.rvid b{display:block;font-size:13px;margin-bottom:6px;color:#22303a}.rvid a{display:inline-block;margin:0 14px 0 0;font-size:14px}.rvid small{display:block;margin-top:6px;color:#5a6672;font-size:12px}
/* Recipes A to Z index - letter groups must never split across columns */
.rcount{font-size:13px;color:#54758b;margin:0 0 14px;}.rvenue{display:inline;font-weight:400;font-size:.88em;color:#54758b;font-style:italic;}
.rindex{column-count:3;column-gap:34px;}
@media(max-width:900px){.rindex{column-count:2;}}
@media(max-width:560px){.rindex{column-count:1;}}
.rgroup{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 22px;}
.rletter{font-weight:bold;font-size:12px;letter-spacing:1.2px;color:var(--blue);border-bottom:2px solid var(--line);padding-bottom:4px;margin-bottom:7px;text-transform:uppercase;}
.rgroup a{display:block;padding:5px 0;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.rgroup a:last-child{border-bottom:none;}
.rgroup a:hover{color:var(--blue);text-decoration:underline;}

.credit{font-size:11.5px;color:#5a7381;margin:6px 0 8px;font-style:italic;}

/* ------------------------------------------------------------------
   Missing component rules, added 30 August 2026.
   Every class below was already in the markup with no rule anywhere in
   this stylesheet, so it rendered with browser defaults only. Values are
   taken from this site's own existing rules and design tokens. Nothing
   was removed and no existing rule was edited.
   ------------------------------------------------------------------ */

/* Off canvas section menu. The MENU button, the scrim, the drawer and the
   open/close script were all on the page already. With no rule the drawer
   sat permanently expanded above the header and the button did nothing. */
.sidetoggle{position:fixed;left:18px;bottom:18px;z-index:70;border:none;cursor:pointer;
 background:var(--blue);color:#fff;font-family:inherit;font-size:12px;font-weight:bold;
 letter-spacing:.08em;padding:13px 17px;border-radius:24px;
 box-shadow:0 3px 10px rgba(0,0,0,.25);}
.sidetoggle:hover{background:var(--dk);}
.sidetoggle:focus{outline:2px solid #fff;outline-offset:-4px;}
.sidescrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:79;
 background:rgba(11,46,74,.45);opacity:0;visibility:hidden;transition:opacity .2s;}
.sidescrim.on{opacity:1;visibility:visible;}
.sidenav{position:fixed;top:0;left:0;z-index:80;width:290px;max-width:86vw;height:100%;
 overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;
 border-right:3px solid var(--blue);box-shadow:4px 0 24px rgba(11,46,74,.18);
 visibility:hidden;transform:translateX(-100%);
 transition:transform .22s ease,visibility 0s linear .22s;}
.sidenav.open{visibility:visible;transform:translateX(0);
 transition:transform .22s ease,visibility 0s;}
.sidehead{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:14px 16px;border-bottom:3px solid var(--blue);
 font-family:Georgia,serif;font-weight:bold;font-size:19px;color:var(--blue);}
.sideclose{border:none;background:none;cursor:pointer;color:var(--blue);
 font-size:26px;line-height:1;padding:0 4px;font-family:inherit;}
.sideclose:hover{color:var(--dk);}
.sidegroup{padding:12px 10px 8px;border-bottom:1px solid var(--line);}
.sidegroup:last-child{border-bottom:none;padding-bottom:24px;}
.sidegroup h4{margin:0 0 6px;padding:0 8px;
 font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:11px;font-weight:bold;
 text-transform:uppercase;letter-spacing:1px;color:#5b7483;}
.sidenav a{display:flex;align-items:center;gap:9px;padding:8px;border-radius:6px;
 color:var(--ink);text-decoration:none;font-size:14.5px;}
.sidenav a:hover{background:var(--wash);color:var(--blue);}
.sidenav a.here{background:var(--wash);color:var(--blue);font-weight:bold;
 box-shadow:inset 3px 0 0 var(--blue);}
.sidenav .ico{flex:none;color:var(--blue);}
@media (prefers-reduced-motion:reduce){.sidenav,.sidescrim{transition:none;}}
@media print{.sidetoggle,.sidescrim,.sidenav{display:none!important;}}

/* For Expats and Newcomers, Apps Worth Having, Free Things to Do.
   Three card grids that had no grid rule and no card rule. */
.xcat{font-size:20px;color:var(--dk);margin:26px 0 10px;font-family:Georgia,serif;
 line-height:1.2;}
.xgrid,.appgrid,.freegrid{display:grid;gap:18px;
 grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.xcard,.appcard,.freecard{background:#fff;border:1px solid var(--line);border-radius:10px;
 padding:16px;box-shadow:0 2px 8px rgba(11,46,74,.05);
 transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;}
.xcard:hover,.appcard:hover,.freecard:hover{transform:translateY(-3px);
 box-shadow:0 8px 20px rgba(11,46,74,.12);}
.xcard h4,.appcard h4{margin:0 0 8px;font-size:16px;color:var(--blue);
 font-family:Georgia,serif;line-height:1.25;}
.freecard h3{margin:0 0 8px;font-size:17px;color:var(--blue);}
.xcard p,.appcard p,.freecard p{margin:0 0 12px;font-size:14.5px;flex:1;}
.xcard .btn,.appcard .btn,.freecard .btn{align-self:flex-start;font-size:13px;padding:8px 16px;}
.freebadge{align-self:flex-start;display:inline-block;font-size:11px;font-weight:bold;
 text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:20px;
 background:#e3f4e8;color:#1c6b34;border:1px solid #b9e3c6;margin:0 0 8px;}

/* What's On. Each category group had no spacing rule of its own. */
.wsgroup{margin:0 0 34px;}
.wsgroup h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;
 font-size:20px;color:var(--blue);}
.wsgroup>p{margin:0 0 14px;font-size:14.5px;color:#4a6b7a;max-width:760px;}

/* The three column contact band that sits above the footer. */
.footcontact{background:var(--wash);border-top:1px solid var(--line);padding:30px 0 34px;}
.fcwrap{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;gap:18px;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.footcontact h4{margin:0 0 6px;font-family:Georgia,serif;font-size:16px;color:var(--blue);}
.footcontact p{margin:0;font-size:14.5px;}

/* Arriving at a recipe by permalink. The script adds .rflash and there was
   nothing to show. Colours copied from the site's own .azitem:target rule. */
@keyframes rflash{0%{background:#fff9e6;box-shadow:0 0 0 3px #ffe9a8;}
 70%{background:#fff9e6;box-shadow:0 0 0 3px #ffe9a8;}
 100%{background:var(--wash);box-shadow:none;}}
.recipe.rflash{animation:rflash 1.8s ease-out 1;}
@media (prefers-reduced-motion:reduce){.recipe.rflash{animation:none;background:#fff9e6;}}

/* A photograph inside a card body, with no width limit of its own. */
.evphoto{display:block;width:100%;height:auto;border-radius:8px;margin:0 0 10px;}

/* Beaches by tram. The same component as the flights table above it, named
   with a b prefix instead of an f prefix, and none of its rules existed.
   Copied from this stylesheet's own .fnote, .ftablewrap and table.ftable. */
.bnote{background:#EAF4F9;border:1px solid var(--line);border-left:4px solid var(--blue);
 border-radius:0 8px 8px 0;padding:12px 15px;margin:0 0 20px;font-size:14px;}
.bnote strong{color:var(--dk);}
.btablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;
 border:1px solid var(--line);border-radius:10px;background:#fff;}
table.btable{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px;}
table.btable th,table.btable td{border-top:1px solid var(--line);padding:10px 12px;
 text-align:left;vertical-align:top;}
table.btable thead th{background:var(--wash);color:var(--dk);border-top:none;
 font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;}
table.btable tbody tr:nth-child(even){background:#fafdff;}
table.btable td.stop{color:var(--dk);font-weight:600;}
@media(max-width:640px){table.btable{font-size:12.5px;}}

/* Local Voices. A single card with no card rule. */
.lvcard{background:#fff;border:1px solid var(--line);border-radius:10px;
 padding:18px 20px;max-width:760px;margin:0 auto;
 box-shadow:0 2px 8px rgba(11,46,74,.05);}
.lvcard h3{margin:0 0 8px;font-size:18px;color:var(--blue);}
.lvcard p{margin:0 0 12px;font-size:15px;}
.lvcard .btn{font-size:13px;padding:8px 16px;}

/* ------------------------------------------------------------------
   Keyboard and screen reader pass, added 30 August 2026.
   The page had no main landmark and no way to bypass the header, so a
   keyboard user tabbed through every navigation link before reaching
   the content. Values below are copied from this site's own existing
   rules: padding from .nav, colour and shadow from #toTop, focus
   outline from the existing :focus rule, font size from .navlinks,
   radius from .azitem:target, and the scroll offset from the site's own
   section{padding:54px 0}. Nothing was removed and no existing rule was
   edited.
   ------------------------------------------------------------------ */
main{display:block;}
#main{scroll-margin-top:54px;}
.skiplink{position:absolute;left:-9999px;top:0;z-index:90;
 display:inline-block;padding:12px 22px;
 background:var(--blue);color:#fff;
 font-weight:bold;font-size:15px;text-decoration:none;
 border-bottom-right-radius:8px;
 box-shadow:0 3px 10px rgba(0,0,0,.25);}
.skiplink:focus{left:0;outline:2px solid #fff;outline-offset:-4px;}
@media print{.skiplink{display:none;}}

/* The beach table is the same component as the flights table above it,
   named with a b prefix instead of an f prefix. Its caption rule was
   missing in the same way run 46 found the rest of the b rules missing.
   Copied verbatim from table.ftable caption. */
table.btable caption{text-align:left;padding:12px 14px 10px;font-weight:bold;color:var(--dk);font-size:14.5px;}

/* ------------------------------------------------------------------
   Focus visibility pass, added 30 August 2026.
   Run 47 gave every page a main landmark and a way to bypass the header.
   This run answers the next question: once a keyboard user is moving,
   can they see where they are. Only five selectors on this page carried
   a focus style and nothing used :focus-visible, so almost every link,
   button and disclosure fell back to whatever ring the browser chose.
   Nothing below removes or edits an existing rule. Every value is taken
   from this site's own sheet: 2px solid var(--blue) with
   outline-offset:1px from .azsearch input:focus, and 2px solid #fff at
   an inset offset from #toTop:focus, .sidetoggle:focus and
   .skiplink:focus. The five existing :focus rules all outrank these on
   specificity, so they keep working exactly as before. A browser with no
   :focus-visible support drops these rules and keeps its default ring,
   which is today's behaviour.
   Solid blue buttons take the white ring inset, because an outside ring
   in the same blue would sit on the white card and read as a fatter
   button. White buttons take the blue ring inset for the mirror reason.
   ------------------------------------------------------------------ */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.btn.light:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.btn.review:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.xmeta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 8px;font-size:13px;flex:0 0 auto;}
.xprice{font-weight:bold;color:var(--blue);background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:3px 9px;white-space:nowrap;}
.xprice.free{background:#E4F3E8;border-color:#B7DFC2;color:#1E7A3C;}
.xdur{color:#4a6b7a;white-space:nowrap;}
.xtags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;flex:0 0 auto;}
.chip.occ{margin:0;cursor:default;}
.tmmonth{color:#4a6b7a;font-weight:normal;}
.xlink.xwo{display:inline;margin-top:0;font-weight:normal;}
.xnote{font-size:12.5px;color:#4a6b7a;text-align:center;margin:18px auto 0;max-width:820px;}
.xlink{display:inline-block;font-size:13px;font-weight:bold;color:var(--blue);text-decoration:underline;margin-top:6px;}
.tm{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;background:#fff;padding:18px 20px;margin:0 0 30px;box-shadow:0 2px 8px rgba(11,46,74,.05);}
.tm h3{margin:0 0 4px;font-size:20px;color:var(--blue);}
.tm>p{margin:0 0 14px;font-size:14.5px;color:#4a6b7a;}
.tmlist{display:flex;flex-direction:column;gap:8px;}
.tmrow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);}
.tmrow:first-child{border-top:none;}
.tmd{font-weight:bold;color:var(--blue);font-size:13px;letter-spacing:.03em;text-transform:uppercase;}
.tmt{font-size:14.5px;}
.tmt a{color:var(--blue);}
.tmnone{font-size:14.5px;color:#4a6b7a;margin:0;}
@media(max-width:640px){.tmrow{grid-template-columns:56px 1fr;gap:8px;}}

.rgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:0 0 22px;}
.rcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(11,46,74,.05);display:flex;flex-direction:column;}
.rcard.feat{border:2px solid var(--blue);}
.rcard h3{margin:0 0 4px;font-size:18px;color:var(--blue);}
.rprice{font-size:26px;font-weight:bold;color:var(--blue);margin:6px 0 2px;}
.rprice small{font-size:13px;font-weight:normal;color:#4a6b7a;}
.rcard>p{font-size:14.5px;margin:8px 0 12px;flex:1;}
.rlist{list-style:none;padding:0;margin:0 0 14px;font-size:14px;}
.rlist li{padding:5px 0;border-top:1px solid var(--line);}
.rlist li:first-child{border-top:none;}
.rtag{display:inline-block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--blue);margin:0 0 8px;}
.rnote{font-size:13px;color:#4a6b7a;max-width:820px;margin:0 auto;text-align:center;}

/* Acropolis pediment motif, hero background. Decorative, CSS only, 17 Sep 2026.
   Restored 1 Oct 2026: the 1 Oct build had lost this block. The drawing now lives in
   assets/acropolis-pediment.svg, decoded byte for byte from the 17 Sep master. */
.hero{position:relative;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(58%,300px);
 background:url("/assets/acropolis-pediment.svg") center bottom/contain no-repeat;
 opacity:.10;pointer-events:none;z-index:0}
@media (max-width:640px){.hero::after{height:min(46%,170px);opacity:.07}}
@media (prefers-reduced-motion:reduce){.hero::after{transition:none}}

/* ------------------------------------------------------------------
   Site chrome, added 1 October 2026: slim masthead, dark section bar,
   subsection strip, breadcrumbs and footer. Every class is prefixed ha-
   so the same file can sit on the Island Hopper page without touching
   its own styles. Colours are this site's own: #0b2e4a (footer ink),
   #0B6E99 (brand blue), #5bb0cf (the light blue of the card frames).
   ------------------------------------------------------------------ */
.ha-mast{background:#fff;border-bottom:1px solid #d7e7f0}
.ha-mast-in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:6px 18px;flex-wrap:wrap}
.ha-brand{display:inline-flex;align-items:center;gap:8px;font-family:Georgia,'Times New Roman',serif;font-weight:bold;font-size:22px;line-height:1.2;color:#0B6E99;text-decoration:none}
.ha-brand:hover{color:#095a7f}
.ha-brand svg{flex:none}
.ha-tag{font:13px/1.3 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#4a6b7a}
.ha-nav{background:#0b2e4a}
.ha-nav-in{max-width:1180px;margin:0 auto;padding:0 8px;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ha-nav a{flex:0 0 auto;white-space:nowrap;color:#fff;text-decoration:none;font:600 15px/1.2 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:14px 12px 10px;border-bottom:4px solid transparent}
.ha-nav a:hover,.ha-nav a[aria-current="page"]{border-bottom-color:#5bb0cf;color:#fff;background:none}
.ha-nav a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ha-sub{background:#f2f2f2;border-bottom:1px solid #e0e0e0}
.ha-sub-in{max-width:1180px;margin:0 auto;padding:0 8px;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.ha-sub a{flex:0 0 auto;white-space:nowrap;color:#1a1a1a;text-decoration:none;font:14px/1.2 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:11px 10px}
.ha-sub a:hover{text-decoration:underline;color:#1a1a1a}
.ha-sub a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ha-sub a:focus-visible{outline:2px solid #0B6E99;outline-offset:-3px}
.ha-crumbs{max-width:1180px;margin:0 auto;padding:12px 20px 0;font:13.5px/1.4 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#3d5c73}
.ha-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.ha-crumbs li{margin:0;padding:0}
.ha-crumbs li+li::before{content:"\203A";display:inline-block;margin:0 7px;color:#5b7483}
.ha-crumbs a{color:#0B6E99;text-decoration:none}
.ha-crumbs a:hover{text-decoration:underline}
.ha-foot{background:#0b2e4a;color:#cfe3ef;padding:34px 20px 22px;margin:0;border:0;border-image:none;font:14px/1.6 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;text-align:left}
.ha-foot-in{max-width:1180px;margin:0 auto;display:grid;gap:22px 26px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ha-fh{margin:0 0 8px;color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.07em}
.ha-foot ul{list-style:none;margin:0;padding:0}
.ha-foot li{margin:0 0 5px;padding:0;border:0}
.ha-foot a{color:#fff;text-decoration:none}
.ha-foot a:hover{text-decoration:underline;color:#fff}
.ha-copy{max-width:1180px;margin:24px auto 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);text-align:center;color:#cfe3ef}
@media print{.ha-nav,.ha-sub,.ha-foot{display:none!important}}
/* ------------------------------------------------------------------
   Second pass, 1 October 2026. The section bar sticks to the top while
   you scroll and is a little more compact (Independent pattern); each
   section's own colour marks its active and hover item (Guardian
   pattern, colours set per section in the build). Anchored links land
   below the bar. A compact News row sits in every footer.
   ------------------------------------------------------------------ */
html{scroll-padding-top:56px}
.ha-nav{position:sticky;top:0;z-index:70;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ha-nav a{padding:11px 11px 7px}
.ha-newsrow{max-width:1180px;margin:22px auto 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.ha-newsrow .ha-fh{margin:0 4px 0 0}
.ha-newsrow a{color:#fff;font-size:13.5px;text-decoration:none}
.ha-newsrow a:hover{text-decoration:underline}
.ha-newsrow a.ha-newsall{font-weight:700}
@media print{.ha-nav{position:static}}

/* ------------------------------------------------------------------
   Section pages, added 1 October 2026. Every subject now has its own
   page. Values reuse this sheet's own tokens and component sizes.
   ------------------------------------------------------------------ */
:root{--accent:#0B6E99;--accent-hi:#5bb0cf}
section h1{font-size:30px;color:var(--blue);margin:0 0 8px;text-align:center;}
section h1 .ico,.wsgroup h1 .ico{flex:none}
.wsgroup h1{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;font-size:30px;color:var(--blue)}
.wsgroup.pagelead>p{margin:0 auto 14px;text-align:center}
.wslegend{max-width:760px;margin:0 auto 18px;text-align:center;font-size:13.5px;color:#4a6b7a}
.tm h2.tmh{margin:0 0 4px;font-size:20px;color:var(--blue);text-align:left}
.wsh2{font-size:22px;color:var(--dk);margin:30px 0 12px;font-family:Georgia,serif;text-align:left}
.landing{padding:34px 0 10px}
.landing .intro{margin-bottom:22px}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:0 0 26px}
.tile{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:0 2px 8px rgba(11,46,74,.05);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,46,74,.12)}
.tile b{font-family:Georgia,serif;font-size:18px;line-height:1.25;color:var(--blue)}
.tile .tcount{align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:20px;padding:2px 10px}
.tile .tline{font-size:13.5px;color:#4a6b7a}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hblock{padding:26px 0 30px;border-top:1px solid var(--line)}
.hblock.alt{background:var(--wash)}
.hblock-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.hblock-head h2{margin:0;font-size:24px;color:var(--ink);text-align:left}
.hblock-more{font-weight:700;font-size:15px;color:var(--accent);text-decoration:none;white-space:nowrap}
.hblock-more:hover{text-decoration:underline}
.tgrid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tgrid{grid-template-columns:minmax(0,1fr)}}
.tcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 2px 8px rgba(11,46,74,.05);transition:transform .15s,box-shadow .15s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,46,74,.12)}
.tcard:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tcard .timg{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#0B6E99,#5bb0cf);overflow:hidden}
.tcard .timg img{width:100%;height:100%;object-fit:cover;display:block}
.tcard .tbody{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}
.tcard .tlabel{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.tcard .thead{font-family:Georgia,serif;font-weight:700;font-size:17px;line-height:1.28;color:var(--ink)}
.tcard:hover .thead{text-decoration:underline}
.tcard .tsum{font-size:14px;line-height:1.45;color:#3d5c73;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard .tmeta{font-size:12.5px;color:#5b7483}
.tcard.notimg .tbody{border-top:4px solid var(--accent-hi)}
.tops{display:grid;gap:18px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.tops .lead{grid-row:span 2}
.tops .lead .thead{font-size:25px}
.tops .lead .tsum{-webkit-line-clamp:4;font-size:15.5px}
.tops .lead .timg{aspect-ratio:16/10}
@media(max-width:900px){.tops{grid-template-columns:repeat(2,minmax(0,1fr))}.tops .lead{grid-column:1/-1;grid-row:auto}}
@media(max-width:560px){.tops{grid-template-columns:minmax(0,1fr)}}
.credits{margin:26px 0 0;font-size:12px;color:#5a7381}
.credits summary{cursor:pointer;font-weight:700}
.credits ul{margin:8px 0 0;padding-left:18px}
.credits li{margin:0 0 3px}
.seealso{max-width:760px;margin:18px auto 0;text-align:center;font-size:14.5px}
.oldanchor{display:block;position:relative;top:-60px;visibility:hidden;height:0}
/* Home page hero, 1 October 2026. The Acropolis photograph is a local file,
   assets/hero-acropolis.jpg, so it cannot break the way a hotlink can. A light
   ink tint keeps the temple visible and a darker plate behind the words keeps
   every line at 7:1 or better against white. */
.hero.hero-photo{background-color:#0b2e4a;background-image:linear-gradient(180deg,rgba(11,46,74,.42) 0%,rgba(11,46,74,.38) 45%,rgba(11,46,74,.62) 100%),url("/assets/hero-acropolis.jpg");background-size:cover;background-position:center 42%;background-repeat:no-repeat;padding:76px 20px 104px}
@media(max-width:700px){.hero.hero-photo{background-image:linear-gradient(180deg,rgba(11,46,74,.42) 0%,rgba(11,46,74,.38) 45%,rgba(11,46,74,.62) 100%),url("/assets/hero-acropolis-800.jpg");padding:44px 14px 92px}}
.hero-plate{display:inline-block;max-width:780px;background:rgba(11,46,74,.66);border-radius:14px;padding:22px 26px 26px;box-shadow:0 10px 34px rgba(0,0,0,.28)}
.hero-plate p{margin:0 auto 22px}
.hero>.hero-credit{position:absolute;right:10px;bottom:8px;z-index:2;margin:0;max-width:94%;font-size:11.5px;line-height:1.35;font-style:italic;color:#e6eef3;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:4px}
.hero>.hero-credit a{color:#fff}
@media(max-width:600px){.hero-plate{padding:16px 14px 20px}}
/* Weather, 1 October 2026. */
.wxbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px 12px}
.wxhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.wxhead h2{margin:0;font-size:20px;color:var(--ink);text-align:left}
.wxstrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);gap:8px;overflow-x:auto;padding-bottom:4px}
.wxday{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-radius:8px;background:var(--wash);padding:8px 6px;text-align:center;font-size:13px;color:var(--ink);text-decoration:none}
.wxday .wxn{font-weight:700}
.wxday .wxi{font-size:22px;line-height:1.2}
.wxday .wxw{font-size:12px;color:#3d5c73}
.wxday .wxt{font-weight:700}
.wxgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin:6px 0 0}
.wxcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 14px 12px;box-shadow:0 2px 8px rgba(11,46,74,.05)}
.wxcard h3{margin:0 0 4px;font-size:16px;color:var(--blue)}
.wxcard .wxi{font-size:30px;line-height:1.2}
.wxcard .wxw{margin:2px 0 8px;font-size:14px;color:#3d5c73}
.wxcard dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:13.5px}
.wxcard dt{color:#5b7483}
.wxcard dd{margin:0;font-weight:700;color:var(--ink)}
.wxstate{margin:6px 0;color:#3d5c73;font-size:14.5px}
.wxcredit{margin:12px 0 0;font-size:12.5px;color:#4a6b7a}
.wxnojs{margin:6px 0;font-size:14px}

.azvitem{padding:10px 0;border-bottom:1px solid #eef4f8;}
.azvitem h3{display:inline;font-size:16px;margin:0;font-family:Georgia,serif;}
.azvitem h3 a{color:var(--ink);}
.azvitem p{margin:5px 0 0;font-size:14.5px;}
h2.azletter{font-weight:normal;}
.cuitem .evbody h3 a{color:var(--blue);}

/* Section colours, 1 October 2026 (second pass) */
.sec-home,.s-home{--sec:#0B6E99;--sec-hi:#5bb0cf;--accent:#0B6E99;--accent-hi:#5bb0cf}
.sec-explore,.s-explore{--sec:#0B6E99;--sec-hi:#5bb0cf;--accent:#0B6E99;--accent-hi:#5bb0cf}
.sec-food,.s-food{--sec:#B5361C;--sec-hi:#FF8A6B;--accent:#B5361C;--accent-hi:#FF8A6B}
.sec-recipes,.s-recipes{--sec:#557A1F;--sec-hi:#A8D86E;--accent:#557A1F;--accent-hi:#A8D86E}
.sec-whatson,.s-whatson{--sec:#8C2F8C;--sec-hi:#E9A3E6;--accent:#8C2F8C;--accent-hi:#E9A3E6}
.sec-promotions,.s-promotions{--sec:#A34700;--sec-hi:#FFB55C;--accent:#A34700;--accent-hi:#FFB55C}
.sec-travel,.s-travel{--sec:#00756A;--sec-hi:#5ED6C8;--accent:#00756A;--accent-hi:#5ED6C8}
.sec-living,.s-living{--sec:#7A5C00;--sec-hi:#F2C94C;--accent:#7A5C00;--accent-hi:#F2C94C}
.sec-az,.s-az{--sec:#4547B8;--sec-hi:#A9ABFF;--accent:#4547B8;--accent-hi:#A9ABFF}
.sec-weather,.s-weather{--sec:#0062A3;--sec-hi:#7CC8FF;--accent:#0062A3;--accent-hi:#7CC8FF}
.sec-news,.s-news{--sec:#B0122E;--sec-hi:#FF8FA3;--accent:#B0122E;--accent-hi:#FF8FA3}
.sec-hopper,.s-hopper{--sec:#00658F;--sec-hi:#6FD0F5;--accent:#00658F;--accent-hi:#6FD0F5}
.sec-book,.s-book{--sec:#2E7D32;--sec-hi:#8BD48F;--accent:#2E7D32;--accent-hi:#8BD48F}
.sec-contact,.s-contact{--sec:#4F5D6B;--sec-hi:#C3CED8;--accent:#4F5D6B;--accent-hi:#C3CED8}
.ha-nav a.n-home:hover,.ha-nav a.n-home[aria-current="page"]{border-bottom-color:#5bb0cf}
.ha-nav a.n-explore:hover,.ha-nav a.n-explore[aria-current="page"]{border-bottom-color:#5bb0cf}
.ha-nav a.n-food:hover,.ha-nav a.n-food[aria-current="page"]{border-bottom-color:#FF8A6B}
.ha-nav a.n-recipes:hover,.ha-nav a.n-recipes[aria-current="page"]{border-bottom-color:#A8D86E}
.ha-nav a.n-whatson:hover,.ha-nav a.n-whatson[aria-current="page"]{border-bottom-color:#E9A3E6}
.ha-nav a.n-promotions:hover,.ha-nav a.n-promotions[aria-current="page"]{border-bottom-color:#FFB55C}
.ha-nav a.n-travel:hover,.ha-nav a.n-travel[aria-current="page"]{border-bottom-color:#5ED6C8}
.ha-nav a.n-living:hover,.ha-nav a.n-living[aria-current="page"]{border-bottom-color:#F2C94C}
.ha-nav a.n-az:hover,.ha-nav a.n-az[aria-current="page"]{border-bottom-color:#A9ABFF}
.ha-nav a.n-weather:hover,.ha-nav a.n-weather[aria-current="page"]{border-bottom-color:#7CC8FF}
.ha-nav a.n-news:hover,.ha-nav a.n-news[aria-current="page"]{border-bottom-color:#FF8FA3}
.ha-nav a.n-hopper:hover,.ha-nav a.n-hopper[aria-current="page"]{border-bottom-color:#6FD0F5}
.ha-nav a.n-book:hover,.ha-nav a.n-book[aria-current="page"]{border-bottom-color:#8BD48F}
.ha-nav a.n-contact:hover,.ha-nav a.n-contact[aria-current="page"]{border-bottom-color:#C3CED8}
/* ------------------------------------------------------------------
   Second pass, 1 October 2026: patterns borrowed from the layouts of
   the BBC, the Guardian and the Independent. Structure only: this
   site's own palette, Georgia headlines and system sans text stay.
   Every section colour (set per section in the build) reads at 4.5 to
   1 or better on white.
   ------------------------------------------------------------------ */
/* Section page header: a rule and the H1 in the section's colour */
body[class*="sec-"]:not(.sec-home) main>section:first-child{border-top:4px solid var(--sec)}
body[class*="sec-"]:not(.sec-home) main h1{color:var(--sec)}
.ha-sub a[aria-current="page"]{text-decoration-color:var(--sec)}
.tile{border-left-color:var(--sec,var(--accent))}
/* Home and landing blocks: heading in a left column on desktop, cards to the right,
   a thin rule in the section colour on top, cards split by thin grey lines, no boxes */
.secblock,.secblock.alt{background:#fff;border-top:0;padding:20px 0 24px}
.secblock>.wrap{border-top:3px solid var(--sec);padding-top:12px}
.secblock .hblock-head h2{color:var(--sec);font-size:22px}
.secblock .hblock-more{color:var(--sec)}
@media(min-width:980px){
 .secblock>.wrap{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
 .secblock .oldanchor{grid-column:1/-1}
 .secblock .hblock-head{grid-column:1;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
 .secblock .tgrid{grid-column:2}
}
.secblock .tgrid{column-gap:20px;row-gap:18px}
.secblock .tcard{background:none;border:0;border-radius:0;box-shadow:none;border-top:1px solid #dcdcdc;padding-top:10px;position:relative;overflow:visible}
.secblock .tcard:hover{transform:none;box-shadow:none}
.secblock .tcard .timg{border-radius:0}
.secblock .tcard .tbody{padding:10px 0 4px}
.secblock .tcard.notimg .tbody{border-top:0}
.secblock .tcard .thead{font-weight:700}
@media(min-width:901px){.secblock .tcard:not(:nth-child(4n+1))::before{content:"";position:absolute;left:-10px;top:10px;bottom:0;border-left:1px solid #dcdcdc}}
@media(min-width:561px) and (max-width:900px){.secblock .tcard:nth-child(2n)::before{content:"";position:absolute;left:-10px;top:10px;bottom:0;border-left:1px solid #dcdcdc}}
/* Top stories: the lead is a large photo with the headline over a dark gradient
   at the bottom. Every line of text sits on at least 86 percent dark ink, so it
   stays readable over any photo, or over the ink colour when no photo loads. */
.tops .tcard{border-radius:0}
.tops .lead{position:relative;display:block;min-height:420px;background:#0b2e4a;border:0;color:#fff;overflow:hidden}
.tops .lead .timg{position:absolute;top:0;right:0;bottom:0;left:0;aspect-ratio:auto;height:100%}
.tops .lead .timg img{width:100%;height:100%;object-fit:cover}
.tops .lead .tbody{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 20px;background:linear-gradient(180deg,rgba(6,18,30,0) 0,rgba(6,18,30,.86) 56px,rgba(6,18,30,.94) 100%)}
.tops .lead .tlabel{align-self:flex-start;color:#fff;background:var(--sec);padding:2px 8px}
.tops .lead .thead{color:#fff;font-size:28px;line-height:1.2;font-weight:700}
.tops .lead .tsum{color:#f1f5f8;-webkit-line-clamp:3}
.tops .lead .tmeta{color:#e6eef3}
.tops .lead:hover .thead{text-decoration:underline}
@media(max-width:560px){.tops .lead{min-height:380px}.tops .lead .thead{font-size:22px}}
/* Promotions */
.promos{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:8px 0 10px}
.promo{background:#fff;border:1px solid var(--line);border-top:4px solid var(--sec,#A34700);border-radius:0;padding:14px 16px 12px}
.promo .pkind{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sec,#A34700)}
.promo h2,.promo h3{margin:0 0 10px;font-family:Georgia,serif;font-size:19px;line-height:1.3;color:var(--ink);text-align:left}
.promo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 10px;font-size:14px}
.promo dt{color:#5b7483;font-weight:700}
.promo dd{margin:0;color:var(--ink)}
.promo .psrc{margin:0 0 4px;font-size:14px}
.promo .psrc a{font-weight:700}
.promo .pchecked{margin:0;font-size:12.5px;color:#4a6b7a}
.adbox{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--sec,#A34700);padding:18px 20px}
.adbox h2{text-align:left;font-size:21px;margin:18px 0 8px}
.adbox ul{margin:0 0 10px;padding-left:20px}
.adbox li{margin:0 0 6px}
.sponsored-note{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:#fff3e6;color:#7a3500;border:1px solid #e0b083;padding:1px 6px}
/* News */
.outlets{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:8px 0 10px}
.outlet{background:#fff;border:0;border-top:3px solid var(--sec,#B0122E);padding:12px 2px 6px}
.outlet h2{margin:0 0 6px;font-family:Georgia,serif;font-size:19px;text-align:left;color:var(--ink)}
.outlet .olang{display:inline-block;margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sec,#B0122E)}
.outlet p{margin:0 0 8px;font-size:14.5px}
.outlet .olink{font-weight:700}

/* 4 October 2026: Heart Picks and Forums sections, venue cards, comparison tables, Athens character. */
.sec-picks,.s-picks{--sec:#A0185A;--sec-hi:#FF9CC8;--accent:#A0185A;--accent-hi:#FF9CC8}
.sec-forums,.s-forums{--sec:#5B4B8A;--sec-hi:#C2B5F0;--accent:#5B4B8A;--accent-hi:#C2B5F0}
.ha-nav a.n-picks:hover,.ha-nav a.n-picks[aria-current="page"]{border-bottom-color:#FF9CC8}
.ha-nav a.n-forums:hover,.ha-nav a.n-forums[aria-current="page"]{border-bottom-color:#C2B5F0}
.guide{padding:0 20px 30px;max-width:1100px}
.guide h2{font-family:Georgia,serif;color:var(--sec,#0B6E99);margin:28px 0 12px}
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));margin:0 0 18px}
.vcard{background:#fff;border:1px solid var(--line,#d7e7f0);border-top:3px solid var(--sec,#0B6E99);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.vcard h3{margin:0;font-family:Georgia,serif;font-size:18px;line-height:1.25}
.vcard p{margin:0;font-size:14.5px;line-height:1.5}
.vmeta{color:#4a6b7a;font-size:13px!important}
.vaddr{font-size:13px!important;color:#3d5c73}
.vdist{font-size:13px!important;font-weight:600;color:var(--sec,#0B6E99)}
.vtags .vtl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5b7483;margin-right:4px}
.vtag{display:inline-block;font-size:11.5px;background:#f3f6f8;border:1px solid #dfe8ee;border-radius:20px;padding:1px 8px;margin:2px 3px 0 0}
.vbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px!important}
.vb{display:inline-block;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--sec,#0B6E99);border:1px solid var(--line,#d7e7f0);border-radius:6px;padding:5px 10px;background:#fff}
.vb:hover{background:#f3f6f8}
.vb.rv-mail{border-color:var(--sec,#0B6E99)}
.vdeliv{font-size:12.5px!important;color:#5b7483}
.vsrc summary{cursor:pointer;font-size:12.5px;color:#5b7483}
.vsrc ul{margin:6px 0 0 18px;padding:0;font-size:12.5px}
.vhow,.pickhow,.picknext,.stay-new{background:#faf8f3;border:1px solid #e8e1d0;border-radius:8px;padding:12px 16px;margin:0 0 16px;font-size:14.5px}
.vjump a,.vother a{display:inline-block;margin:3px 8px 3px 0}
.vjump a span{font-size:11px;color:#fff;background:var(--sec,#0B6E99);border-radius:10px;padding:0 6px}
.varea-block h2,.pickh{font-family:Georgia,serif;color:var(--sec,#0B6E99);border-bottom:1px solid #e5e5e5;padding-bottom:4px;margin:26px 0 12px}
.vcount{font-size:13px;color:#fff;background:var(--sec,#0B6E99);border-radius:12px;padding:1px 9px;vertical-align:middle}
.rvnote{font-size:12.5px;color:#5b7483;border-top:1px solid #e5e5e5;padding-top:10px;margin-top:18px}
.osm-note,.tnote{font-size:12.5px;color:#5b7483}
.pickflag{font-size:11px!important;text-transform:uppercase;letter-spacing:.08em;color:#A0185A;font-weight:700}
.pickq{margin:4px 0;padding:6px 10px;border-left:3px solid #A0185A;background:#fff7fb;font-size:14.5px}
.tablewrap{overflow-x:auto;margin:0 0 12px}
table.cmp{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
table.cmp th,table.cmp td{border:1px solid #e1e8ed;padding:8px 10px;text-align:left;vertical-align:top}
table.cmp thead th{background:var(--sec,#0B6E99);color:#fff}
table.cmp tbody th{background:#f6f9fb}
.rulecols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
ol.rules li,ul.plain li{margin:0 0 8px;line-height:1.55}
ul.srcs{font-size:13px}
.itin ol li{margin:0 0 6px}
.ftopics{font-size:12.5px!important;color:#5b7483}
/* Athens character: a Greek key strip and marble panel, used only on this site. */
.landing h1,.ath-diff h2{font-family:Georgia,'Times New Roman',serif;letter-spacing:.01em}
.landing h1::after,.ath-diff h2::after{content:"";display:block;height:9px;margin:10px 0 0;max-width:180px;opacity:.75;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'><path d='M0 8.5h7.5V1.5h-5v4h2.5' fill='none' stroke='%230B6E99' stroke-width='1.2'/><path d='M9 8.5h7.5V1.5h-5v4h2.5' fill='none' stroke='%230B6E99' stroke-width='1.2'/></svg>") repeat-x}
.ath-diff{background:linear-gradient(180deg,#fbfaf6,#f4f1e8);border:1px solid #e6dfcc;border-radius:10px;padding:18px 22px}
.ath-diff ul{margin:8px 0 0 18px;padding:0}
.ath-diff li{margin:0 0 7px;line-height:1.55}
.hero .ath-line{font-family:Georgia,serif;font-style:italic;opacity:.95}

/* 4 October 2026, current programmes on Family and science. */
.famnow{background:#f6f9fb;border:1px solid #e1e8ed;border-radius:8px;padding:8px 12px}
.famnow p{font-size:14px!important}

/* NIGHT v9: language switcher EN | ΕΛ in the masthead */
.ha-lang{margin-left:auto;font-size:.95em;white-space:nowrap;color:#1C1C1C}
.ha-lang a{color:#0B5E86;text-decoration:none;padding:4px 6px;display:inline-block;min-width:24px;text-align:center}
.ha-lang a[aria-current]{font-weight:700;color:#1C1C1C;text-decoration:underline}
.ha-404{columns:2 220px;padding-left:1.2em}

/* NIGHT v10: Take the virtual tour button on place cards */
.btn.vtour,.vb.vtour{background:#FFF8E6;border:1px solid #B88A2E;color:#5A3D0E}
.btn.vtour::before,.vb.vtour::before{content:"\25CE  ";}

/* NIGHT v18, 10 Oct 2026: the masthead search box (A28) and a visually hidden label class; the venue card phone, note and feature lines */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ha-search{display:flex;align-items:center;gap:6px;margin:0}
.ha-search input{width:170px;font:15px/1.2 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:7px 12px;border:1px solid #7fa9bf;border-radius:18px;background:#fff;color:#1c1c1c}
.ha-search input:focus{outline:2px solid #0B6E99;outline-offset:1px}
.ha-search button{font:600 14px/1.2 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:7px 13px;border:1px solid #0B6E99;border-radius:18px;background:#0B6E99;color:#fff;cursor:pointer}
.ha-search button:hover{background:#095a7f}
@media (max-width:640px){.ha-search{flex:1 1 100%;order:3}.ha-search input{flex:1 1 auto;width:auto;min-width:0}}
.vphone{margin:0;font-size:14px}