:root{--hairline-color:rgba(201,162,92,.55);--hairline:1px solid var(--hairline-color);--hairline-grad:linear-gradient(90deg,transparent,#C9A25C 18%,#E4C47E 50%,#C9A25C 82%,transparent)}
/* TheMediterranean.com: the homepage look for every page.
   Loaded after each page's own styles; it turns the pages to deep blue, ivory type, gold frames and gold buttons. */
:root{
  --paper:#0E2F52;--mist:#0B2846;--deep:#F4EDE1;--deeper:#081F38;
  --ink:#E9E1D2;--muted:#B9B2A3;--line:rgba(201,162,92,.28);
  --gold:#C9A25C;--gold-dark:#D9B56A;--sea-link:#8CC0E0;--ivory:#F4EDE1;
  --navy:#0E2F52;--navy-deep:#0A2440;color-scheme:dark}
html,body{background:var(--navy)!important;color:var(--ink)}
body{font-size:17px}
h1,h2,h3,h4{color:var(--ivory)}
a{color:var(--sea-link)}a:hover{color:#BFDDF0}
.eyebrow,.where,.town,.stars,.region+.lead{color:var(--gold-dark)}
p,li,dd,td{color:inherit}
.muted,.sub,.lead,.checked,.note,.small{color:var(--muted)!important}

/* Bands: deep blue alternating with the darker blue, like the homepage */
.band{background:var(--navy);padding-block:clamp(56px,7vw,88px)}
.band.mist,.mist{background:var(--navy-deep)!important}
.head h2{font-size:clamp(32px,4vw,52px);line-height:1.08;color:var(--ivory)}
.head .eyebrow{letter-spacing:.32em}
.head::after{content:"";display:block;width:72px;height:1px;margin-top:10px;background:linear-gradient(90deg,var(--gold),transparent)}

/* Photos: always in a thin gold frame, never touching another photo */
.photo,figure.rv{border:var(--hairline);border-radius:3px;overflow:hidden;background:var(--navy-deep)}
.photo-pair{gap:18px}
figure.pg-photo img{border-radius:0!important}figure.pg-photo figcaption{padding:0 16px 14px;margin-top:12px!important}

.photo img{transition:transform 1.4s ease}.photo:hover img{transform:scale(1.03)}
.photo figcaption,.photo .cap{color:#EADFCB}

/* Cards: destinations, resorts, questions */
.dest,.resort,details.faq,.index{background:#0B2846!important;border:var(--hairline)!important;border-radius:3px;box-shadow:none}
.dest:hover,.resort:hover{border-color:var(--gold)!important}
.dest h3,.resort h3{color:var(--ivory)}
.dest .best b,.resort .where{color:var(--gold-dark)}
.resort p,.dest p{color:var(--muted)}
details.faq summary{color:var(--ivory)}

/* Lists */
.entries li{border-color:var(--line)!important}
.entries b,.region{color:var(--ivory)}
.entries p{color:var(--muted)}
.picks li>span{color:var(--gold-dark)}
.customs div{border-color:var(--line)}.customs dt{color:var(--gold-dark)}.customs dd{color:var(--ink)}
.badge{color:var(--gold-dark);border-color:rgba(201,162,92,.55)}
table,th,td{border-color:var(--line)!important;color:var(--ink)}th{color:var(--gold-dark)}
.tablebox{border:1px solid var(--line);border-radius:3px}

/* Buttons: every action is gold */
.btn-gold,details.all>summary,a.btn,.cr-btns a,.re-more a:not([href^="mailto:"]){display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border:0!important;border-radius:2px;background:linear-gradient(180deg,#E4C47E,#B88D43)!important;color:#1A140A!important;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn-gold:hover,details.all>summary:hover{filter:brightness(1.06)}
details.more-info summary{color:var(--gold-dark)}

/* The jump bar under the hero */
.jump{background:rgba(8,31,56,.94)!important;border-bottom:var(--hairline)!important}
.jump a{color:#E9E1D2!important;letter-spacing:.14em}.jump a:hover,.jump a[aria-current]{color:#F0D08E!important}

/* Search results, drawer */
.search-panel,.results{background:#F7F3EA;color:#1D1A14}.hit{color:#1D1A14}.hit b{color:#2E6B8E}.hit span{color:#6B604E}

/* Season Letter and footer */
.letter{background:var(--navy-deep)!important;border-top:var(--hairline)}
.foot{background:#071B31!important;border-top:var(--hairline)}
.foot a{color:#E9E1D2}.foot a:hover{color:#F0D08E}

/* Cookie and invite panels stay readable */
.tmc,.invite-card{background:#0A2440;color:#E9E1D2;border:var(--hairline)}

/* Photo rows with gold arrows, as on the homepage */
.dnav{display:flex;justify-content:flex-end;gap:10px;margin:-64px 0 22px}
.dscroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23%,300px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
.dscroll::-webkit-scrollbar{display:none}
.dc{position:relative;display:block;aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;border:var(--hairline);border-radius:3px;background:#0A2440;text-decoration:none;transition:border-color .3s}
.dc:hover{border-color:#C9A25C}
.dimg,.dimg img{position:absolute;inset:0;width:100%;height:100%}.dimg img{object-fit:cover;transition:transform 1.2s ease}
.dc:hover .dimg img{transform:scale(1.06)}
.dc::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,rgba(7,28,52,0),rgba(7,28,52,.6) 45%,rgba(7,28,52,.95))}
.dt{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:flex;flex-direction:column;gap:3px}
.dt .loc{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#E9C97F}
.dt b{font-family:var(--display);font-size:32px;font-weight:600;line-height:1.05;color:#fff}
.dt .sub{font-size:14px;line-height:1.4;color:#E6DCC8}
.dt .more{margin-top:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#E9C97F;opacity:0;transform:translateY(6px);transition:.3s}
.dc:hover .more,.dc:focus-visible .more{opacity:1;transform:none}
.arr{width:46px;height:46px;border-radius:50%;border:1px solid #C9A25C;background:transparent;color:#E9C97F;font-size:24px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.arr:hover{background:linear-gradient(180deg,#E4C47E,#B88D43);color:#1A140A}.arr:disabled{opacity:.3;cursor:default;background:transparent;color:#E9C97F}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px}
.dfoot .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#D9B56A;text-decoration:none}
.dprog{flex:1;height:2px;background:rgba(217,181,106,.2);max-width:420px}.dprog i{display:block;height:100%;width:20%;background:#C9A25C;transition:width .2s}
@media (max-width:700px){.dscroll{grid-auto-columns:78%}.dnav{display:none}.dfoot{flex-direction:column;align-items:stretch;gap:14px}.dprog{flex:none;width:100%;max-width:none}.dt .more{opacity:1;transform:none}}
#more .sections{display:none}

/* Season Letter over the sea */
.letter[style*="--bg"]{position:relative;isolation:isolate;background:#0A2440 var(--bg) center/cover no-repeat!important}
.letter[style*="--bg"]::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,26,48,.74),rgba(9,26,48,.6) 50%,rgba(9,26,48,.85))}
.letter form button{background:linear-gradient(180deg,#E4C47E,#B88D43)!important;color:#1A140A!important;border:0}

/* ===== The homepage top: utility bar, sticky section bar, hero ===== */
.util{background:#0A2440;border-bottom:1px solid #2E6B8E;font-size:12px;position:relative;z-index:40}
.util .wrap{max-width:1320px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 22px;padding-top:9px;padding-bottom:9px}
.ulogo img{height:26px;width:auto;display:block}
.util nav{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.util nav>a{color:#BDB19B;text-decoration:none;letter-spacing:.08em}.util nav>a:hover{color:#F0D08E}
.util .mbtn,.util .sbtn{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border:1px solid #2E6B8E;border-radius:999px;background:#133A63;color:#F4EDE1;font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;width:auto;height:auto}
.util .sbtn{padding:0 10px}.util .sbtn svg,.util .mbtn svg{width:15px;height:15px}
.util .mbtn .eq{display:none}
.top2{position:sticky;top:0;z-index:35;background:rgba(10,36,64,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(217,181,106,.35)}
.top2 nav{max-width:1320px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding-top:15px;padding-bottom:15px}
.top2 nav a{color:#E9E1D2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}.top2 nav a:hover,.top2 nav a.g{color:#D9B56A}
@media (max-width:760px){.top2 nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:20px;scrollbar-width:none}.top2 nav::-webkit-scrollbar{display:none}.top2 nav a{white-space:nowrap}.util nav>a{display:none}}
/* hide the old header, menu drawer and old sticky bar on pages with the new top */
body.nl .hero header.top,body.nl .drawer,body.nl .stick,body.nl .hero .top{display:none!important}
body.nl .jump{top:47px!important}
/* hero like the homepage: photo, dark sweep from the left, gold title */
.hero.country{min-height:min(88vh,820px)!important;display:flex!important;flex-direction:column;justify-content:flex-end}
.hero.country::before{background:linear-gradient(90deg,rgba(7,28,52,.92) 0%,rgba(7,28,52,.66) 40%,rgba(7,28,52,.08) 72%),linear-gradient(0deg,rgba(7,28,52,.75),rgba(7,28,52,0) 40%)!important}
.hero.country .slide img,.hero.country img{animation:herokb 14s ease-out both}
@keyframes herokb{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-body{max-width:1320px!important;padding-bottom:28px}
.hero-body .crumbs{font-size:11px;letter-spacing:.3em;color:#D9B56A}.hero-body .crumbs a{color:#D9B56A}
.hero-body h1.country-name{font-family:"Ibarra Real Nova",Georgia,serif;font-size:clamp(72px,11vw,150px)!important;line-height:.95;font-weight:600;margin:14px 0 6px}
.hero-body h1.country-name em{font-style:normal;background:linear-gradient(180deg,#F4D58E 0%,#D9B56A 45%,#A9803C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.hero-body .lede{max-width:600px;font-size:18px;line-height:1.65;color:#EDE4D3}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 28px}.hbtns .btn-gold{margin:0}
.hero-body .facts{border-top:1px solid rgba(217,181,106,.3);padding-top:18px;gap:10px 30px;font-size:11px;letter-spacing:.16em}
.hero.country .credit{border-top:0;opacity:.75}
@media (max-width:640px){.hero.country{min-height:720px!important}.hbtns .btn-gold{width:100%;justify-content:center}}
.search-panel #q,.search-panel input{color:#1D1A14!important}
.tablebox table{width:100%;border-collapse:collapse}.tablebox caption,.tablebox h3{padding:14px 16px 4px;text-align:left}.tablebox th,.tablebox td{padding:10px 16px!important}
@media (max-width:760px){.util .wrap{flex-wrap:nowrap;gap:10px}.ulogo img{height:19px}.util nav{flex-wrap:nowrap;gap:8px}.util .mbtn{padding:0 11px;font-size:10px;letter-spacing:.1em;white-space:nowrap}}
/* "On this page" bar: slim text links like the homepage section bar, no pill buttons */
.jump .wrap{gap:4px 26px!important;padding-block:12px!important;max-width:1320px}
.jump a{border:0!important;border-radius:0!important;background:none!important;padding:4px 0!important;min-height:0!important;font-size:11px!important;letter-spacing:.2em!important;text-transform:uppercase;color:#BDB19B!important;box-shadow:none!important;border-bottom:1px solid transparent!important}
.jump a:hover,.jump a[aria-current],.jump a.on{color:#F0D08E!important;border-bottom-color:#D9B56A!important}

/* ===== Alternating sections: ivory white and deep blue (about 60/40), as on TheMiddleEast.com ===== */
.band:not(.mist):not(.letter){background:#FBF8F1!important;color:#1B2430;
  --ink:#1B2430;--muted:#5B6675;--line:#E3DACB;--ivory:#0E2F52;--deep:#0E2F52;--gold-dark:#8A6A36;--sea-link:#2E6B8E}
.band:not(.mist):not(.letter) h1,.band:not(.mist):not(.letter) h2,.band:not(.mist):not(.letter) h3,.band:not(.mist):not(.letter) .head h2{color:#0E2F52}
.band:not(.mist):not(.letter) a{color:#2E6B8E}.band:not(.mist):not(.letter) a:hover{color:#0E2F52}
.band:not(.mist):not(.letter) .eyebrow,.band:not(.mist):not(.letter) .where,.band:not(.mist):not(.letter) .town,.band:not(.mist):not(.letter) .stars,.band:not(.mist):not(.letter) .dest .best b,.band:not(.mist):not(.letter) .picks li>span,.band:not(.mist):not(.letter) .customs dt,.band:not(.mist):not(.letter) th,.band:not(.mist):not(.letter) .badge{color:#8A6A36}
.band:not(.mist):not(.letter) .sub,.band:not(.mist):not(.letter) .lead,.band:not(.mist):not(.letter) .checked,.band:not(.mist):not(.letter) p.note{color:#5B6675!important}
.band:not(.mist):not(.letter) .dest,.band:not(.mist):not(.letter) .resort,.band:not(.mist):not(.letter) details.faq,.band:not(.mist):not(.letter) .index{background:#FFFFFF!important;border:var(--hairline)!important;box-shadow:0 10px 30px rgba(14,47,82,.06)}
.band:not(.mist):not(.letter) .dest h3,.band:not(.mist):not(.letter) .resort h3,.band:not(.mist):not(.letter) .entries b,.band:not(.mist):not(.letter) .region,.band:not(.mist):not(.letter) details.faq summary{color:#0E2F52}
.band:not(.mist):not(.letter) .resort p,.band:not(.mist):not(.letter) .dest p,.band:not(.mist):not(.letter) .entries p{color:#5B6675}
.band:not(.mist):not(.letter) .entries li,.band:not(.mist):not(.letter) .customs div,.band:not(.mist):not(.letter) table,.band:not(.mist):not(.letter) th,.band:not(.mist):not(.letter) td,.band:not(.mist):not(.letter) .tablebox{border-color:#E3DACB!important;color:#1B2430}
.band:not(.mist):not(.letter) .customs dd,.band:not(.mist):not(.letter) .prose,.band:not(.mist):not(.letter) .prose p{color:#1B2430}
.band:not(.mist):not(.letter) .photo,.band:not(.mist):not(.letter) figure.rv{background:#EFE9DD}
.band:not(.mist):not(.letter) .head::after{background:linear-gradient(90deg,#AE8B55,transparent)}
.band:not(.mist):not(.letter) .dfoot .k{color:#8A6A36}
.band:not(.mist):not(.letter) .arr{color:#8A6A36;border-color:#AE8B55}.band:not(.mist):not(.letter) .arr:hover{color:#1A140A}
.band:not(.mist):not(.letter) .dprog{background:rgba(174,139,85,.25)}
.band:not(.mist):not(.letter) details.more-info summary{color:#2E6B8E}
/* photo cards keep white text on their photos */
.band:not(.mist):not(.letter) .dc .dt b{color:#fff}.band:not(.mist):not(.letter) .dc .dt .loc{color:#E9C97F}.band:not(.mist):not(.letter) .dc .dt .sub{color:#E6DCC8}
/* gold buttons keep dark text */
.band:not(.mist):not(.letter) .btn-gold,.band:not(.mist):not(.letter) details.all>summary{color:#1A140A!important}
/* blue sections: deep blue with a fine gold rule at the top */
.band.mist{border-top:var(--hairline)}
/* Own a Home: facts and the Founding Partner box */
.ownfacts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ownfacts li{border:var(--hairline);border-radius:3px;padding:16px 18px;background:rgba(255,255,255,.04)}
.ownfacts b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#D9B56A;margin-bottom:6px}
.band:not(.mist):not(.letter) .ownfacts li{background:#fff}.band:not(.mist):not(.letter) .ownfacts b{color:#8A6A36}
.ownh{font-family:"Ibarra Real Nova",Georgia,serif;font-size:28px;margin:44px 0 18px}
.fpbox{margin:44px 0 10px;padding:28px 30px;border:var(--hairline);border-radius:3px;background:linear-gradient(135deg,rgba(201,162,92,.12),rgba(201,162,92,.02))}
.fpbox h3{font-family:"Ibarra Real Nova",Georgia,serif;font-size:26px;margin:6px 0 8px}

/* House rule: no orphaned words */
h1,h2,h3,h4,.lede,.sub,.eyebrow{text-wrap:balance}p,li,figcaption,blockquote,dd,td{text-wrap:pretty}

/* House rule (Keith, 31 Oct 2026): never blur a photo */
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.top2{background:#0A2440!important}

/* Hero words at 70% (Keith, 31 Oct) */
html body .hero-body h1.country-name{font-size:clamp(50px,7.7vw,105px)!important}
html body .hero-body h1:not(.country-name){font-size:clamp(27px,3.9vw,48px)!important}
/* Hero words raised a little (Keith, 31 Oct) */
html body .hero .hero-body{padding-bottom:84px!important}
@media(max-width:760px){html body .hero .hero-body{padding-bottom:48px!important}}
/* Extra Music buttons lower on the page: same look as the top-bar button (they are clones of it) */
.music-row .mbtn{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 11px;border:1px solid #2E6B8E;border-radius:999px;background:#133A63;color:#F4EDE1;font-family:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;width:auto;height:auto}
.music-row .mbtn svg{width:15px;height:15px}
.music-row .mbtn .eq{display:none}
/* Spacing polish (Keith, 31 Oct 22:46): one generous rhythm for every band, heading and card grid */
.band:not(.letter){padding-block:clamp(64px,8vw,104px)}
.band .head{gap:10px;margin-bottom:clamp(30px,3.6vw,46px)}
.band .head .sub,.band .head p:not(.eyebrow){margin-top:6px}
#keep-exploring .xl-grid{gap:clamp(18px,2.2vw,26px)}
/* Gold buttons keep their dark lettering on deep-blue bands too (bands now alternate from the Season Letter up) */
.band.mist .btn-gold,.band.mist details.all>summary,.band.mist a.btn,.band.mist .cr-btns a,.band.mist .re-more a:not([href^="mailto:"]){color:#1A140A!important}
/* Ivory bands: light surfaces for the panels that use the page's paper and mist colours (FAQ notes, "where to stay" panels, section cards) */
.band:not(.mist):not(.letter){--paper:#FFFFFF;--mist:#F6F1E8}
.band.mist .ct-note,.band.mist .rinote{color:#B9B2A3}
.band.mist .reg-fp{background:#0A2440!important}
.reg-fp{border:var(--hairline)!important}

/* phrase tables must not widen the intro on phones */
.intro>*{min-width:0}.tablebox{max-width:100%}

/* large screens: keep content photos to a calm height (cropped, never altered) */
@media (min-width:900px){figure.pg-photo img{max-height:560px;object-fit:cover}}

/* phones: the top bar never runs off the screen, even when the button reads "Tap for Music" */
@media (max-width:760px){.util .ulogo{flex:0 1 auto;min-width:0}.util .ulogo img{width:auto;max-width:100%;height:auto;max-height:19px}.util nav{flex:0 0 auto}.util .mbtn{padding:0 10px;letter-spacing:.06em;font-size:10.5px;white-space:nowrap}}

/* HOUSE RULE (Keith, 1 Nov 2026): "NO FADING OR SHADING ANY PHOTOS" on the entire website.
   The images matter more than the words: every photo shows real, clear and crisp, with nothing laid over it. */
.hero::before,.hero.country::before,.fp-clear::before,.feat::before,.panel.ph::before,.pcard::before,.pcard:hover::before,
.tiles a::before,.tiles a:hover::before,.letter::before,.letter[style*="--bg"]::before,.dc::after,.dest:after,.dest::after,.fshade{display:none!important;background:none!important}
.photo figcaption,.dcard .dtxt{background:none!important}
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hero img.bg,.photo img,.dcard img,figure img{filter:none!important;opacity:1}

/* Keith 1 Nov: an email address inside a sentence stays a plain link, not a gold button */.re-more a[href^="mailto:"]{display:inline;min-height:0;padding:0;background:none!important;box-shadow:none;text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:600;color:#7FB3D5!important;text-decoration:underline;text-underline-offset:3px}
.list:has(.re-more){margin-bottom:36px}.re-more a:not([href^="mailto:"]){margin-bottom:6px}