/* The Euro — base styles and shared components.
   Depends on tokens.css. Since 6 Oct 2026 the look is light: white pages, light blue grounds, one
   deep band, and content that sits on the page instead of in rounded boxes. Ornaments mark the
   borders between sections (scalloped edges, an arcade frieze, a small arch by every eyebrow).
   No shadows, except the soft glow round the hero arch, its search panel and the gradient button. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section-gap) 0}
section.tight{padding-top:0}

/* type */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:var(--track-serif);line-height:var(--lh-tight);color:var(--navy)}
h2{font-size:var(--fs-h1)}
h3{font-weight:500}
h1 em,h2 em{font-style:italic}
.lede{font-size:var(--t-lede);line-height:var(--lh-body);color:var(--graphite);max-width:var(--measure);margin-top:14px}
/* the eyebrow carries the brand's arch, in gold: the small embellishment every section head shares */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--forest);font-weight:600}
.eyebrow::before{content:"";width:13px;height:15px;flex:none;background:var(--brass);-webkit-mask:var(--orn-arch) no-repeat center/contain;mask:var(--orn-arch) no-repeat center/contain}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.head h2{margin-top:12px}

/* buttons: pills stay, the one rounded thing everywhere */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);padding:12px 24px;font:600 var(--fs-sm)/var(--lh-tight) var(--sans);letter-spacing:normal;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background var(--dur-fast) var(--ease-hover),color var(--dur-fast) var(--ease-hover),border-color var(--dur-fast) var(--ease-hover),transform var(--dur-med) var(--ease-hover),box-shadow var(--dur-med) var(--ease-hover)}
.pill.fill{background:var(--forest);color:var(--white)}
.pill.fill:hover{background:var(--forest-2)}
.pill.ghost{background:transparent;border-color:currentColor}
.pill.ghost:hover{background:rgba(255,255,255,.12)}
.pill.ghost.dark{color:var(--navy);border-color:var(--sky-3)}
.pill.ghost.dark:hover{background:var(--sky-1);border-color:var(--forest)}
.pill.white{background:var(--white);color:var(--navy);border-color:var(--moss)}
.pill.white:hover{border-color:var(--forest)}
/* the reference page's holographic button, redone in light blue and gold */
.pill.holo{color:var(--navy);background:linear-gradient(135deg,var(--white) 0%,var(--sky-2) 55%,var(--gold-2) 100%);border-color:var(--sky-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.pill.holo:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.9)}
.pill .arrow{font:400 var(--fs-md)/var(--lh-tight) var(--sans);transition:transform var(--dur-med) var(--ease-hover)}
.pill:hover .arrow{transform:translateX(3px)}

/* ticker strip above the header */
.marquee{background:var(--navy);color:var(--sky-2);height:32px;overflow:hidden;position:relative;font:500 var(--fs-sm)/32px var(--sans)}
.marquee .track{display:flex;white-space:nowrap;animation:slide 38s linear infinite;width:max-content}
.marquee span{padding:0 22px}
.marquee i{font-style:normal;color:var(--brass)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* header: white, the lockup first, quiet links beside it (after the reference page) */
header.site{background:var(--white);color:var(--navy);height:66px;position:sticky;top:0;z-index:40;border-bottom:1px solid var(--moss)}
.bar{height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px}
.bar>.lock{order:-1}
.navl{display:flex;gap:28px;font-size:var(--fs-sm);white-space:nowrap;color:var(--graphite)}
.navl a{transition:color var(--dur-fast) var(--ease-hover)}
.navl a:hover{color:var(--forest)}
.lock{display:flex;align-items:center;gap:10px}
.lock b{font:600 var(--fs-md) var(--sans);letter-spacing:var(--track-mark);color:var(--navy)}
/* two-line wordmark: THE EURO above the brand's own word (CONCIERGE, TABLE) */
.lock .wm{display:flex;flex-direction:column;gap:3px;line-height:var(--lh-tight)}
.lock .wm small{font:500 var(--fs-xs) var(--sans);letter-spacing:var(--track-mark);color:var(--pewter)}
.lock svg{display:block}
.lock .arch,.lock .sill{stroke:var(--navy)}
.lock .key{fill:var(--brass)}
.lock .em{fill:var(--forest)}
.navr{display:flex;gap:14px;justify-self:end;align-items:center}
.navr .lang{font-size:var(--fs-sm);opacity:.85;margin-right:6px}
@media(max-width:900px){.navl,.navr .lang{display:none}.bar{gap:16px}}
@media(max-width:560px){header.site .navr .pill{padding:10px 16px;font-size:var(--fs-sm)}}

/* ornaments */
.frieze{height:16px;background:var(--sky-3);-webkit-mask:var(--orn-frieze) repeat-x left bottom/24px 16px;mask:var(--orn-frieze) repeat-x left bottom/24px 16px}

/* entrance motion, after the reference page: the headline arrives word by word, the rest rises */
.reveal .w{display:inline-block;opacity:0;transform:translateY(12px);filter:blur(4px);animation:word .8s var(--ease-out) forwards;animation-delay:calc(var(--i) * 70ms + 80ms)}
.rise{opacity:0;transform:translateY(14px);animation:rise 1s var(--ease-out) forwards;animation-delay:var(--d,.45s)}
@keyframes word{to{opacity:1;transform:none;filter:none}}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal .w,.rise{animation:none;opacity:1;transform:none;filter:none}}

/* hero (the full-bleed video of v2, kept for reference pages) */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;color:var(--white)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.18) 60%,var(--veil-end))}
.hero .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter)}
.hero h1{font-size:var(--fs-h1);max-width:16ch;color:var(--white)}
.hero p{margin-top:18px;font-size:var(--t-lede);max-width:44ch;color:rgba(255,255,255,.9)}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}

/* the Concierge builder: fields on a light blue ground, no card */
.builder-wrap{margin-top:-96px;position:relative;z-index:3}
.builder{background:var(--sky-1);border-radius:var(--r-panel);padding:30px 32px;display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr auto;gap:18px;align-items:end;margin-top:26px}
.f label{display:block;font-size:var(--t-caption);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);font-weight:600;margin-bottom:8px}
.f input{width:100%;font:400 var(--fs-md) var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--moss);border-radius:var(--r-input);padding:13px 16px}
.f input:focus{border-color:var(--forest);outline:none}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:500 var(--fs-sm) var(--sans);padding:11px 16px;border-radius:var(--r-pill);border:1px solid var(--moss);background:var(--white);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--forest);color:var(--white);border-color:var(--forest)}
.builder .pill{padding:16px 28px;white-space:nowrap}
.builder .note{grid-column:1/-1;font-size:var(--fs-sm);color:var(--pewter);margin-top:-4px}
@media(max-width:1000px){.builder{grid-template-columns:1fr 1fr}.builder .pill{grid-column:1/-1;justify-content:center}}
@media(max-width:600px){.builder{grid-template-columns:1fr;padding:24px 20px}.builder-wrap{margin-top:-60px}}

/* tint utilities */
.stone{background:var(--stone)}.terra{background:var(--terracotta)}.olive{background:var(--olive)}.linen{background:var(--linen)}

/* three columns divided by hairlines, not tiles */
.trio{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px}
.tile{padding:6px 28px 8px;border-left:1px solid var(--moss);display:flex;flex-direction:column;background:none}
.tile:first-child{border-left:0;padding-left:0}
.tile .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--sky-3);display:grid;place-items:center;color:var(--forest)}
.tile h3{font-size:var(--fs-xl);margin-top:20px}
.tile p{font-size:var(--fs-md);color:var(--graphite);margin-top:8px;line-height:var(--lh-body)}
@media(max-width:860px){.trio{grid-template-columns:1fr;gap:26px}.tile{border-left:0;padding:22px 0 0;border-top:1px solid var(--moss)}}

/* the one deep band, its top and bottom edges scalloped */
.band{background:var(--navy);color:var(--white);padding:var(--band-pad) 0;position:relative;margin:14px 0}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:14px;background:var(--navy);-webkit-mask:var(--orn-scallop) repeat-x left bottom/28px 14px;mask:var(--orn-scallop) repeat-x left bottom/28px 14px}
.band::before{bottom:100%}
.band::after{top:100%;transform:scaleY(-1)}
.band h2{color:var(--white)}
.band .lede{color:rgba(255,255,255,.8)}
.band .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ben{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ben .b{display:flex;gap:14px}
.ben .ic{width:36px;height:36px;border-radius:50%;border:1px solid var(--sky-3);display:grid;place-items:center;flex:none;color:var(--gold-2)}
.ben h3,.ben h4{font:600 var(--fs-md) var(--sans);letter-spacing:0;margin-bottom:5px;color:var(--white)}
.ben p{font-size:var(--fs-sm);color:rgba(255,255,255,.76);line-height:var(--lh-body)}
@media(max-width:900px){.band .grid{grid-template-columns:1fr;gap:36px}}
@media(max-width:560px){.ben{grid-template-columns:1fr}}

/* destinations quilt (v1) */
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.city{border-radius:var(--r-arch);aspect-ratio:4/5;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.city .nm{font:500 var(--fs-2xl) var(--serif);letter-spacing:var(--track-serif);position:relative}
.city .co{font-size:var(--fs-sm);color:var(--graphite);position:relative}
@media(max-width:900px){.cities{grid-template-columns:repeat(2,1fr)}}

/* concierge exchange */
.conc .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.chat{background:var(--white);color:var(--ink);border:1px solid var(--moss);border-radius:var(--r-panel);padding:28px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:13px 17px;font-size:var(--fs-md);line-height:var(--lh-body);border-radius:18px}
.msg.you{align-self:flex-end;background:var(--forest);color:var(--white);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--sky-1);border-bottom-left-radius:6px}
.chat .who{font-size:var(--t-caption);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--pewter);font-weight:600}
@media(max-width:900px){.conc .grid{grid-template-columns:1fr;gap:36px}}

/* journal */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.post .ph{margin:0 0 16px;border-radius:var(--r-img);overflow:hidden;aspect-ratio:16/10;background:var(--stone)}
.post .ph img{width:100%;height:100%;object-fit:cover}
.post h3{font-size:var(--t-subheading);line-height:var(--lh-snug)}
.post .meta{font-size:var(--fs-sm);color:var(--pewter);margin-top:8px}
@media(max-width:860px){.posts{grid-template-columns:1fr}}

/* footer, on the light blue ground the link farm starts (catalog.css) */
footer.site{background:var(--sky-1);color:var(--pewter);padding:var(--footer-top) 0 36px;font-size:var(--fs-sm)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:34px}
footer h5,footer .fh{font:600 var(--fs-xs) var(--sans);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--navy);margin-bottom:16px}
footer li{list-style:none;margin-bottom:10px}
footer a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:4px}
.fbot{margin-top:56px;padding-top:22px;border-top:1px solid var(--moss);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--fs-sm);color:var(--pewter)}
.fbot a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

/* sticky mobile CTA (city and place pages, kept from v1) */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));background:var(--navy)}
.sticky-cta .pill{width:100%}
@media(max-width:700px){.sticky-cta.on{display:block}}

/* palette switcher, review only, remove before launch */
/* presses answer the finger at once; the ticker holds still under a pointer (8 Oct 2026) */
.pill:active,.finder-tags button:active,.search-card .tabs button:active{transform:scale(.97);transition-duration:80ms}
.marquee:hover .track{animation-play-state:paused}
@media(hover:none){.marquee:hover .track{animation-play-state:running}}
/* the header button fits a 320px phone (10 Oct 2026) */
@media(max-width:900px){header.site .bar:not(.search-bar){grid-template-columns:auto auto;justify-content:space-between}}
@media(max-width:380px){header.site .bar{padding-left:16px;padding-right:16px;gap:10px}header.site .navr .pill{padding:8px 12px;font-size:var(--fs-xs)}header.site .navr .pill .arrow{display:none}.lock b,.lock .wm small{letter-spacing:.22em}}
/* the phone menu (12 Oct 2026): the main links in a row under the header, where the header hides them */
.mnav{display:none}
@media(max-width:900px){.mnav{display:flex;gap:22px;overflow-x:auto;padding:4px 16px;border-bottom:1px solid var(--moss);background:var(--bone);scrollbar-width:none}
.mnav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-weight:500;font-size:var(--fs-sm);color:var(--navy)}
.mnav::-webkit-scrollbar{display:none}}
/* bigger tap targets on phones (UX check, 12 Oct 2026) */
@media(max-width:900px){.area-hotels .pill{min-height:44px}.ccard-links a,.cluster a{min-height:44px;display:inline-flex;align-items:center}.place .checked a{display:inline-block;padding:10px 0}}
/* a table that scrolls sideways shows a shadow at the edge that has more (12 Oct 2026, UX check) */
.areas-wrap,.booktable-wrap,.every-wrap,.subnav .wrap{
  background:linear-gradient(to right,var(--bone) 30%,rgba(255,255,255,0)),linear-gradient(to left,var(--bone) 30%,rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(15,43,76,.22),rgba(15,43,76,0)),radial-gradient(farthest-side at 100% 50%,rgba(15,43,76,.22),rgba(15,43,76,0)) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll}