/*
 * Design "Atelier": a boutique hotel's printed travel magazine, on light paper.
 *
 * Light everywhere (no dark bands): cool paper, ink, and ONE bright colour per page -
 * cobalt on the group's pages, the hotel's own colour on its pages. Newsreader for
 * display (section titles in its italic), Instrument Sans for text, 4px corners, no
 * shadows, hairline and ink rules.
 *
 * Its own layouts (not Classic's with new colours):
 *   header   a masthead: the name large on its own line, the menu as a ruled row
 *            beneath with Book at its end; on scroll only the menu row stays (sticky
 *            with a negative top), from 721px
 *   footer   a colophon: columns of links, the sister hotels as a numbered index,
 *            and the name set huge across the foot of the page
 *   pages    every photo hero is a spread - words on paper at the left, the
 *            photograph at the right (phones: photograph above the words)
 *   home     GroupHome.astro / HotelHome.astro in this folder
 *
 * Every rule is scoped to html[data-design="atelier"]; layout changes sit inside
 * @media (min-width:721px) unless they come with their own phone version.
 *
 * Contrast (WCAG AA, checked): ink #151618 on paper #F3F3F0 16.8:1, on #E8E8E3 15.6:1;
 * body #3B3E44 9.9:1; muted #5C6068 5.9:1 (5.5:1 on #E8E8E3); cobalt #2643B8 on paper
 * 7.0:1; white on cobalt 7.6:1.
 */

/* ---------- tokens ---------- */
html[data-design="atelier"]{
  --at-cobalt:#2643B8;
  --at-cobalt-deep:#1C3394;
  --at-paper:#F3F3F0;
  --at-paper-2:#E8E8E3;

  --paper:var(--at-paper);
  --paper-2:var(--at-paper-2);
  --white:#FFFFFF;
  --ink:#151618;
  --ink-soft:#2A2C30;
  --text:#3B3E44;
  --muted:#5C6068;
  --line:#D2D3CD;
  --sand:var(--at-cobalt);
  --sand-deep:var(--at-cobalt-deep);
  --sand-text:var(--at-cobalt);
  --sand-tint:#E4E8F6;

  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius:4px;
  --radius-lg:4px;
  --radius-btn:4px;
  --shadow:none;
  --shadow-soft:none;
}
html[data-design="atelier"] body{background:var(--paper);color:var(--text)}
/* One accent per page: on a hotel's pages its own colour stands in for cobalt. */
html[data-design="atelier"] body[data-resort]{
  --sand:var(--accent-strong);
  --sand-deep:var(--accent-strong);
  /* The hotel's text colour is tuned for white; Atelier's paper is a shade darker, so
     take it 15% towards black to keep 4.5:1 there too (any hotel colour). */
  --sand-text:color-mix(in srgb, var(--accent-text,var(--accent-strong)) 85%, #000);
  --sand-tint:var(--accent-tint);
}
html[data-design="atelier"] body:not([data-resort]){
  --accent:var(--at-cobalt);
  --accent-strong:var(--at-cobalt);
  --accent-text:var(--at-cobalt);
  --on-accent:#FFFFFF;
  --accent-tint:rgba(38,67,184,.10);
}

/* ---------- type ---------- */
html[data-design="atelier"] :is(h1,h2,h3){font-family:var(--f-display);color:var(--ink);letter-spacing:-.01em}
html[data-design="atelier"] h1{font-weight:500;line-height:1.02}
html[data-design="atelier"] h2{font-style:italic;font-weight:400;line-height:1.08}
html[data-design="atelier"] h3{font-weight:500}
html[data-design="atelier"] :is(h2,h3) a{display:inline-block;padding-block:2px;min-height:24px}
html[data-design="atelier"] .eyebrow{font-family:var(--f-body);font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--sand-text)}
html[data-design="atelier"] .eyebrow::before{display:none}
html[data-design="atelier"] a{text-underline-offset:.18em}
html[data-design="atelier"] :focus-visible{outline:2px solid var(--sand-text);outline-offset:3px}
html[data-design="atelier"] ::selection{background:var(--sand-tint);color:var(--ink)}
/* A text link: ink with an accent underline. */
html[data-design="atelier"] .at-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sand-text);text-decoration-thickness:2px;text-underline-offset:.3em}
html[data-design="atelier"] .at-link:hover{color:var(--sand-text)}
html[data-design="atelier"] .at-more{margin-top:1.6rem}

/* ---------- shape: one corner, 4px ---------- */
html[data-design="atelier"] body *{border-radius:4px}
html[data-design="atelier"] body :is(.fact__ic,.perk__ic,.facility__ic,.aw-ring,.rail-arrow,.edge-arrow,.hero__dot,.thing-pin__dot,.photo-pin,.photo-pin__img,.leaflet-marker-icon,.cal__day,.stepper button,.drawer-close){border-radius:50%}

/* ---------- buttons: solid colour, sentence case ---------- */
html[data-design="atelier"] .btn{font-weight:600;letter-spacing:.01em;text-transform:none;border-radius:4px}
html[data-design="atelier"] :is(.btn--primary,.btn--accent){background:var(--sand);border-color:var(--sand);color:#fff}
html[data-design="atelier"] :is(.btn--primary,.btn--accent):hover{background:var(--sand-deep);border-color:var(--sand-deep);color:#fff;filter:brightness(.92)}
html[data-design="atelier"] :is(.btn--outline,.btn--accent-outline,.btn--light){background:transparent;color:var(--ink);border-color:var(--ink)}
html[data-design="atelier"] :is(.btn--outline,.btn--accent-outline,.btn--light):hover{background:var(--ink);color:var(--paper)}
html[data-design="atelier"] .btn--dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
html[data-design="atelier"] body :is(.card__tag,.offer__badge,.chip[aria-pressed="true"],.faq-filter button[aria-pressed="true"],.cal__done,.offer-badge,.rtile__tag,.rc-badge,.compare__badge){background:var(--sand);border-color:var(--sand);color:#fff}

/* ---------- surfaces: flat, light, hairline edges ---------- */
html[data-design="atelier"] :is(.card,.rcard,.room,.offer,.facility,.dine,.booking__card,.router__card,.compare__card,.loc,.stat,.faq details,.dx-facts,.ex-card){box-shadow:none;border-color:var(--line)}
/* Every band that was dark in Classic is light paper here. */
html[data-design="atelier"] :is(.section--ink,.cta,.p-topbar,.aw-band,.g-cta,.p-facts){background:var(--paper-2);color:var(--text)}
html[data-design="atelier"] :is(.section--ink,.cta,.aw-band,.g-cta) :is(h1,h2,h3){color:var(--ink)}
html[data-design="atelier"] :is(.section--ink,.cta,.aw-band,.g-cta) :is(p,li){color:var(--text)}
html[data-design="atelier"] :is(.section--ink,.cta,.aw-band) .eyebrow{color:var(--sand-text)}
html[data-design="atelier"] .section--tint{background:var(--paper-2)}

/* =====================================================================
   HEADER: a masthead (from 721px). Solid paper always - the heroes here are
   spreads with paper behind the words, so nothing sits under a clear bar.
   The header joins the page flow (sticky); the hotel name scrolls away and the
   ruled menu row stays pinned. !important where the base uses an ID selector.
   ===================================================================== */
html[data-design="atelier"] .p-topbar{border-bottom:1px solid var(--line)}
html[data-design="atelier"] .p-topbar :is(a,button,.logo-text){color:var(--ink)}
html[data-design="atelier"] .p-topbar__logo{filter:invert(1)}
@media (min-width:721px){
  html[data-design="atelier"] body #siteHeader,
  html[data-design="atelier"] body #siteHeader.is-transparent{position:sticky!important;top:0;background:var(--paper)!important;backdrop-filter:none!important;border-bottom:1px solid var(--ink)!important}
  html[data-design="atelier"] body #siteHeader::before{display:none!important}
  html[data-design="atelier"] body #siteHeader :is(.p-mainnav,.p-topbar){background:var(--paper)!important;backdrop-filter:none!important}
  html[data-design="atelier"] body #siteHeader :is(.nav-links>li>a,.nav-links>li>button,.nav-toggle,.brand,.p-mainmenu>li>a,.p-burger,.p-mainnav__brand,.p-sub-toggle,.p-topbar a,.p-topbar button){color:var(--ink)!important}
  html[data-design="atelier"] body #siteHeader .lang-menu__btn{background:transparent!important;border-color:var(--line)!important;color:var(--ink)!important}
  html[data-design="atelier"] body #siteHeader :is(.p-mainnav__logo,.brand__logo){filter:invert(1)!important}
  /* The header is in the flow now, so pages no longer pad for a fixed bar. */
  html[data-design="atelier"] body.no-hero-header #main{padding-top:0!important}
  html[data-design="atelier"] body[data-resort] #siteHeader{top:-34px}
}
/* Hotel pages, computers: name on its own line; the menu ruled beneath, Book at its end. */
@media (min-width:1121px){
  html[data-design="atelier"] body[data-resort] #siteHeader{top:-98px}
  html[data-design="atelier"] body[data-resort] .p-mainnav__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 52px;height:auto;gap:0}
  html[data-design="atelier"] body[data-resort] .p-mainnav__brand{grid-column:1 / -1;grid-row:1;align-self:center;justify-self:start}
  html[data-design="atelier"] body[data-resort] .p-mainnav__logo-text{font-size:clamp(2rem,2.6vw,2.5rem);font-weight:500;letter-spacing:-.015em}
  html[data-design="atelier"] body[data-resort] .p-mainnav__right{display:contents}
  html[data-design="atelier"] body[data-resort] .p-mainnav__nav{grid-column:1;grid-row:2;align-self:stretch;display:flex;align-items:center;border-top:1px solid var(--line)}
  html[data-design="atelier"] body[data-resort] .p-mainmenu{width:100%;justify-content:space-between;gap:0;padding-right:2rem}
  html[data-design="atelier"] body[data-resort] .p-mainmenu>li>a{font-size:.9rem;font-weight:600;letter-spacing:.01em;text-transform:none;padding:.5rem .1rem}
  html[data-design="atelier"] body[data-resort] .p-mainmenu>li>a::after{left:0;right:0;bottom:-.1rem;background:var(--sand)}
  html[data-design="atelier"] body[data-resort] .p-mainmenu>li.has-sub>a{padding-right:1rem}
  html[data-design="atelier"] body[data-resort] .p-mainnav__cta{grid-column:2;grid-row:2;align-self:center;border-left:1px solid var(--line);padding-left:1.4rem;margin-left:0;background:none;border-top:0}
  html[data-design="atelier"] body[data-resort] .p-mainnav__cta.btn{background:var(--sand);color:#fff;border:0;padding:0 1.2rem;min-height:40px}
  html[data-design="atelier"] body[data-resort] .p-mainnav__nav + *{border-top:1px solid var(--line)}
}
html[data-design="atelier"] body #siteHeader :is(.nav,.nav-inline,.nav-cta,.p-mainnav__inner,.p-mainnav__nav,.p-mainnav__cta){border-radius:0}
/* Group pages, computers: the same masthead. */
@media (min-width:1001px){
  html[data-design="atelier"] body:not([data-resort]) #siteHeader{top:-64px}
  html[data-design="atelier"] body:not([data-resort]) .site-header .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:64px 52px;height:auto;gap:0}
  html[data-design="atelier"] body:not([data-resort]) .site-header .brand{grid-column:1 / -1;grid-row:1;align-self:center}
  html[data-design="atelier"] body:not([data-resort]) .site-header .logo-text{font-size:clamp(2rem,2.6vw,2.5rem);font-weight:500;letter-spacing:-.015em}
  html[data-design="atelier"] body:not([data-resort]) .site-header .nav-inline{grid-column:1;grid-row:2;display:flex;align-items:center;border-top:1px solid var(--line)}
  html[data-design="atelier"] body:not([data-resort]) .site-header .nav-links{gap:2.2rem}
  html[data-design="atelier"] body:not([data-resort]) .site-header .nav-links>li>:is(a,button){font-size:.9rem;font-weight:600;text-transform:none;letter-spacing:.01em}
  html[data-design="atelier"] body:not([data-resort]) .site-header .nav-cta{grid-column:2;grid-row:2;align-self:stretch;display:flex;align-items:center;border-top:1px solid var(--line);padding-left:1.4rem}
}
/* The full menu (phones and tablets; group pages at every width): paper, large serif. */
html[data-design="atelier"] :is(.nav-drawer,.p-mainmenu[data-open]){background:var(--paper)}
@media (max-width:1120px){
  html[data-design="atelier"] body .p-mainmenu>li:not(.p-menu-extra,.p-menu-cta,.p-menu-contact)>a{font-family:var(--f-display);font-size:1.35rem;font-weight:500;text-transform:none;letter-spacing:0}
}
html[data-design="atelier"] body .nav-drawer__list>li:not(.nav-drawer__head)>a:not(.nav-drawer__resort){font-family:var(--f-display);font-size:1.35rem;font-weight:500}

/* =====================================================================
   FOOTER: a colophon on light paper - columns of links, the sister hotels
   as a numbered index, the name set huge across the foot.
   ===================================================================== */
html[data-design="atelier"] .site-footer{background:var(--paper-2);color:var(--text);border-top:1px solid var(--ink);padding-block:clamp(48px,6vw,80px) 1.6rem}
html[data-design="atelier"] .site-footer a{color:var(--ink)}
html[data-design="atelier"] .site-footer a:hover{color:var(--sand-text)}
html[data-design="atelier"] body .site-footer .footer__h{font-family:var(--f-body);font-style:normal;font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--sand-text);margin-bottom:.8rem}
html[data-design="atelier"] .site-footer p{color:var(--text)}
html[data-design="atelier"] .site-footer .footer__logo{filter:invert(1)}
html[data-design="atelier"] .site-footer li a{display:inline-flex;align-items:center;min-height:32px}
/* The name: huge, across the foot (moved below everything else). */
html[data-design="atelier"] body .site-footer .wrap{display:flex;flex-direction:column}
html[data-design="atelier"] body .site-footer .footer__grid{order:1}
html[data-design="atelier"] body .site-footer .footsib{order:2}
html[data-design="atelier"] body .site-footer :is(.footer__social,.footer__note){order:3}
html[data-design="atelier"] body .site-footer .footer__legal-row{order:4}
html[data-design="atelier"] body .site-footer .footer__bottom{order:6;color:var(--muted);border-top:0;padding-top:.8rem}
html[data-design="atelier"] body .site-footer .footer__bottom a{color:var(--muted)}
html[data-design="atelier"] body .site-footer .footer__legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
html[data-design="atelier"] body .site-footer .footer__legal-row{border-top:1px solid var(--line);margin-top:2rem}
html[data-design="atelier"] body .site-footer .at-wordmark,
html[data-design="atelier"] body .site-footer .footer__grid > div:first-child :is(.logo-text,.footer__logo-text){display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,10.5vw,10rem);line-height:.92;letter-spacing:-.035em;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
@media (min-width:721px){
  /* Columns first; the brand block (its line, then the huge name) drops to the foot. */
  html[data-design="atelier"] body .site-footer .footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2rem 3rem}
  html[data-design="atelier"] body .site-footer .footer__grid > div:first-child{order:9;grid-column:1 / -1;display:flex;flex-direction:column-reverse;gap:1rem;padding-top:2.4rem;margin-top:.6rem;border-top:1px solid var(--ink)}
  html[data-design="atelier"] body .site-footer .footer__grid > div:first-child p{max-width:52ch;font-family:var(--f-display);font-style:italic;font-size:1.15rem;color:var(--text)}
  html[data-design="atelier"] body .site-footer .footer__grid > div:nth-child(n+3){border-left:1px solid var(--line);padding-left:1.4rem}
}
/* Sister hotels: a numbered index in two columns, no thumbnails. */
html[data-design="atelier"] body .site-footer .footsib{border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.4rem;counter-reset:atsib}
html[data-design="atelier"] body .site-footer .footsib__lbl{font-family:var(--f-body);font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--sand-text)}
html[data-design="atelier"] body .site-footer .footsib__row{counter-increment:atsib;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.1rem 0;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
html[data-design="atelier"] body .site-footer .footsib__row::before{content:counter(atsib,decimal-leading-zero);grid-row:1 / span 2;font-size:.8rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] body .site-footer :is(.footsib__thumb,.footsib__arw){display:none}
html[data-design="atelier"] body .site-footer .footsib__name{font-family:var(--f-display);font-size:1.3rem;font-weight:500;color:var(--ink)}
html[data-design="atelier"] body .site-footer .footsib__desc{grid-column:2;justify-self:start;margin:0;text-align:left;font-family:var(--f-display);font-style:italic;font-size:.98rem;color:var(--text)}
@media (min-width:721px){
  html[data-design="atelier"] body .site-footer .footsib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}
  html[data-design="atelier"] body .site-footer .footsib__lbl{grid-column:1 / -1}
}
/* The hotels strip above the group footer: a contact sheet with captions on paper. */
html[data-design="atelier"] .footstrip{background:var(--paper-2);gap:1rem;padding:clamp(1.4rem,3vw,2.4rem) var(--gutter) 0;border-top:1px solid var(--ink)}
html[data-design="atelier"] .footstrip a{aspect-ratio:auto;display:flex;flex-direction:column;gap:.6rem;overflow:visible}
html[data-design="atelier"] .footstrip a::after{display:none}
html[data-design="atelier"] .footstrip img{aspect-ratio:3/2;height:auto}
html[data-design="atelier"] .footstrip span{position:static;color:var(--ink);text-shadow:none;font-family:var(--f-display);font-size:1.05rem;font-weight:500;letter-spacing:0}
html[data-design="atelier"] .footstrip + .site-footer{border-top:0}

/* =====================================================================
   THE SPREAD: every photo hero - homepage, hotel page, inner pages - sets
   its words on paper at the left and the photograph at the right
   (computers); phones put the photograph above the words.
   ===================================================================== */
/* Homepage and hotel page cover. */
html[data-design="atelier"] .at-cover{background:var(--paper)}
html[data-design="atelier"] .at-cover h1{text-shadow:none}
html[data-design="atelier"] .at-cover__facts{list-style:none;margin:1.4rem 0 0;padding:0}
html[data-design="atelier"] .at-cover__facts li{margin:0}
html[data-design="atelier"] .at-cover__issue{display:none}
/* Phones and tablets: the photograph sits behind the words, so they turn white. */
@media (max-width:1024px){
  html[data-design="atelier"] body .at-cover :is(h1,.hero__eyebrow,.at-cover__facts,.at-cover__facts li){color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45)}
  html[data-design="atelier"] body .at-cover .hero__overlay{background:linear-gradient(180deg,rgba(21,22,24,.55) 0%,rgba(21,22,24,.45) 50%,rgba(21,22,24,.7) 100%)}
  html[data-design="atelier"] body .at-cover__facts{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
}
html[data-design="atelier"] .at-no{font-family:var(--f-body);font-size:.8rem;font-weight:600;color:var(--sand-text)}
@media (min-width:1025px){
  html[data-design="atelier"] .at-cover .hero__bg{left:42%}
  html[data-design="atelier"] .at-cover .hero__overlay{display:none}
  html[data-design="atelier"] body .at-cover .hero__inner{min-height:min(84vh,820px);padding:clamp(48px,5vw,72px) calc(58% + 3rem) clamp(48px,5vw,72px) max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));max-width:none;margin:0;justify-content:center}
  html[data-design="atelier"] body .at-cover h1{color:var(--ink);font-size:clamp(2.6rem,3.6vw,3.8rem);max-width:none}
  html[data-design="atelier"] body .at-cover .hero__eyebrow{color:var(--sand-text);font-size:.9rem;font-weight:600;letter-spacing:.02em;text-transform:none}
  html[data-design="atelier"] body .at-cover__facts{display:grid;gap:0;border-top:1px solid var(--ink);color:var(--text)}
  html[data-design="atelier"] body .at-cover__facts li{padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--text)}
  html[data-design="atelier"] .at-cover__issue{display:grid;gap:0;margin-top:1.6rem}
  html[data-design="atelier"] .at-cover__issue a{display:grid;grid-template-columns:2.2rem 1fr;align-items:baseline;min-height:44px;padding:.5rem 0;color:var(--ink);font-family:var(--f-display);font-size:1.15rem;text-decoration:none}
  html[data-design="atelier"] .at-cover__issue a:hover span:last-child{color:var(--sand-text)}
  html[data-design="atelier"] .at-cover__issue small{display:block;font-family:var(--f-body);font-size:.85rem;color:var(--muted)}
  html[data-design="atelier"] body .at-cover :is(.hero__dot,.hero__pause){color:var(--ink)}
  html[data-design="atelier"] body .at-cover .hero__dot::before{background:rgba(21,22,24,.3)}
  html[data-design="atelier"] body .at-cover .hero__dot[aria-current="true"]::before{background:var(--ink)}
}
/* FIRST SCREEN: the booking strip always sits fully on the first screen. The masthead
   is in the page flow here, so it counts: group header 116px, hotel header 150px; the
   card is 204px + 16px gap, no overlap. Short screens tighten the cover instead of
   letting it push the booking strip down (facts and links on one line each). */
@media (min-width:1025px){
  html[data-design="atelier"] body .at-cover .hero__inner{min-height:min(820px,calc(100svh - 116px - 220px))}
  html[data-design="atelier"] body[data-resort] .at-cover .hero__inner{min-height:min(820px,calc(100svh - 150px - 220px))}
}
@media (min-width:1025px) and (max-height:1100px){
  html[data-design="atelier"] body .at-cover .hero__inner{padding-top:28px;padding-bottom:28px}
  html[data-design="atelier"] body .at-cover h1{font-size:clamp(2.1rem,5.4vh,3.6rem)}
  html[data-design="atelier"] body .at-cover__facts{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:.9rem;border-top:0}
  html[data-design="atelier"] body .at-cover__facts li{padding:0;border:0}
  html[data-design="atelier"] .at-cover__issue{display:flex;flex-wrap:wrap;gap:0 1.6rem;margin-top:.6rem}
  html[data-design="atelier"] .at-cover__issue a{display:inline-flex;gap:.5rem}
  html[data-design="atelier"] .at-cover__issue small{display:none}
}
@media (min-width:901px) and (max-width:1024px){
  html[data-design="atelier"] body .hero__inner{min-height:calc(100svh - 120px - var(--fold-room))}
}
@media (min-width:721px) and (max-width:900px){
  html[data-design="atelier"] body .hero__inner{min-height:calc(100svh - 120px - var(--fold-room))}
}

/* Inner pages: .p-pagehead becomes the same spread. */
html[data-design="atelier"] body .p-pagehead{background:var(--paper);color:var(--text);border-bottom:1px solid var(--ink)}
html[data-design="atelier"] body .p-pagehead__img{opacity:1}
html[data-design="atelier"] body .p-pagehead__inner{text-align:left}
html[data-design="atelier"] body .p-pagehead h1{color:var(--ink);font-size:clamp(2.4rem,5vw,4.4rem);text-shadow:none}
html[data-design="atelier"] body .p-pagehead .eyebrow{justify-content:flex-start;align-self:flex-start;margin-inline:0;text-align:left;color:var(--sand-text);text-transform:none;letter-spacing:.02em;font-weight:600}
html[data-design="atelier"] body .p-pagehead__inner > p:not(.eyebrow){margin-inline:0;color:var(--text);font-family:var(--f-display);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:40ch}
@media (min-width:721px){
  html[data-design="atelier"] body .p-pagehead__img{left:50%;width:50%}
  html[data-design="atelier"] body .p-pagehead__inner{padding:clamp(56px,7vw,104px) calc(50% + 2.5rem) clamp(56px,7vw,104px) var(--gutter);max-width:none;margin:0;min-height:clamp(340px,44vw,520px);display:flex;flex-direction:column;justify-content:center}
  html[data-design="atelier"] body .p-pagehead:not(:has(.p-pagehead__img)) .p-pagehead__inner{min-height:0;padding-right:var(--gutter);max-width:var(--maxw);margin-inline:auto}
}
@media (max-width:720px){
  html[data-design="atelier"] body .p-pagehead{display:flex;flex-direction:column;padding-top:64px}
  html[data-design="atelier"] body .p-pagehead__img{position:static;height:210px;order:-1}
  html[data-design="atelier"] body[data-resort] .p-pagehead__inner,
  html[data-design="atelier"] body .p-pagehead__inner{padding:1.6rem var(--gutter) 2rem}
  html[data-design="atelier"] body .p-pagehead h1{font-size:clamp(2.1rem,9vw,2.8rem)}
}

/* =====================================================================
   SHARED SECTION PIECES
   ===================================================================== */
@media (min-width:721px){
  /* Section headings: label in a left column under a full-width ink rule. */
  html[data-design="atelier"] .section__head{max-width:none;margin-inline:0;text-align:left;border-top:1px solid var(--ink);padding-top:1.1rem;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);column-gap:2.5rem;align-items:start}
  html[data-design="atelier"] .section__head > *{grid-column:2;margin-inline:0}
  html[data-design="atelier"] .section__head .eyebrow{grid-column:1;grid-row:1 / span 3;align-self:start;margin:0;padding-top:.9rem;justify-content:flex-start}
  html[data-design="atelier"] .section__head h2{font-size:clamp(2.2rem,4vw,3.4rem);max-width:22ch}
  html[data-design="atelier"] .section__head :is(p,div){max-width:60ch}
  html[data-design="atelier"] .section__head.center{text-align:left!important;margin-inline:0!important}
  html[data-design="atelier"] .section__head.center .eyebrow{justify-content:flex-start!important}
  html[data-design="atelier"] :is(.card,.rcard,.offer):hover{transform:none}
}
html[data-design="atelier"] .p-crumbs{font-size:.85rem;color:var(--muted)}
html[data-design="atelier"] .p-crumbs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sand-text);text-underline-offset:.25em;display:inline-flex;align-items:center;min-height:44px}

/* Key facts: a ruled list under an ink rule. */
html[data-design="atelier"] body .p-keyfacts{background:none;border:0;border-top:2px solid var(--ink);padding:0}
html[data-design="atelier"] body .p-keyfacts li{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--ink)}
html[data-design="atelier"] body .p-keyfacts li:last-child{border-bottom:1px solid var(--line)}
html[data-design="atelier"] .p-overview__grid h2{font-size:clamp(2.1rem,4vw,3.2rem)}

/* Facilities: text columns between vertical rules, no icons. */
html[data-design="atelier"] body .facilities{gap:0;border-top:1px solid var(--ink)}
html[data-design="atelier"] body .facility{background:none;border:0;border-bottom:1px solid var(--line);padding:1.3rem 0}
html[data-design="atelier"] body .facility__ic{display:none}
html[data-design="atelier"] body .facility h3{font-family:var(--f-display);font-size:1.3rem;font-weight:500;color:var(--ink)}
html[data-design="atelier"] body .facility p{font-size:.95rem;color:var(--text)}
html[data-design="atelier"] body .facility:hover{transform:none}
@media (min-width:721px){
  html[data-design="atelier"] body .facilities{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-design="atelier"] body .facility{padding:1.4rem 1.6rem 1.6rem;border-bottom:0;border-left:1px solid var(--line)}
  html[data-design="atelier"] body .facility:nth-child(3n+1){border-left:0;padding-left:0}
  html[data-design="atelier"] body .facility:nth-child(n+4){border-top:1px solid var(--line)}
}

/* Offers: an article - the photograph wide on top, the words in two columns beneath. */
html[data-design="atelier"] body .offer-row{background:none;border:0;border-top:1px solid var(--ink);border-radius:0;box-shadow:none}
html[data-design="atelier"] body .offer-media{border-right:0}
html[data-design="atelier"] body .offer-body h3{font-style:italic;font-weight:400}
@media (min-width:721px){
  html[data-design="atelier"] body .offer-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"media media" "body body" "band band";padding-top:1.4rem}
  html[data-design="atelier"] body .offer-media{aspect-ratio:21/9}
  html[data-design="atelier"] body .offer-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:3rem;padding:1.4rem 0 0}
  html[data-design="atelier"] body .offer-body > h3{grid-column:1;grid-row:1 / span 3;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05}
  html[data-design="atelier"] body .offer-body > :not(h3){grid-column:2}
}

/* "With every booking": columns between vertical rules. */
html[data-design="atelier"] body .perks-ribbon{background:none;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1.4rem 0}
html[data-design="atelier"] body .perks-ribbon__head{text-align:left;font-size:.8rem;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] body .perks-ribbon__grid{gap:0;text-align:left}
html[data-design="atelier"] body .perk{padding:.4rem 1.4rem}
html[data-design="atelier"] body .perk + .perk{border-left:1px solid var(--line)}
html[data-design="atelier"] body .perk__ic{background:none;border:0;width:auto;height:auto;margin:0 0 .6rem;color:var(--sand-text)}
html[data-design="atelier"] body .perk b{font-family:var(--f-display);font-size:1.2rem;font-weight:500;color:var(--ink)}
@media (max-width:720px){
  html[data-design="atelier"] body .perk + .perk{border-left:0;border-top:1px solid var(--line)}
}

/* Room tiles: a contact sheet - photograph, then a caption on paper. */
@media (min-width:721px){
  html[data-design="atelier"] body .roombento{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:auto;gap:2rem;counter-reset:atroom}
  html[data-design="atelier"] body .rtile{counter-increment:atroom;grid-column:auto;grid-row:auto;display:flex;flex-direction:column;min-height:0;overflow:visible;background:none;color:var(--text)}
  html[data-design="atelier"] body .rtile img{position:relative;inset:auto;height:auto;aspect-ratio:3/2}
  html[data-design="atelier"] body .rtile:hover img{transform:none}
  html[data-design="atelier"] body .rtile__scrim{display:none}
  html[data-design="atelier"] body .rtile__body{position:static;padding:.9rem 0 0;border-top:1px solid var(--ink);margin-top:.9rem}
  html[data-design="atelier"] body .rtile h3{color:var(--ink);font-size:1.5rem}
  html[data-design="atelier"] body .rtile h3::before{content:counter(atroom,decimal-leading-zero) "  ";font-family:var(--f-body);font-size:.8rem;font-weight:600;color:var(--sand-text)}
  html[data-design="atelier"] body .rtile__tag{order:3;background:none!important;color:var(--sand-text)!important;padding:0;margin:.4rem 0 0}
  html[data-design="atelier"] body .rtile__desc{max-height:none;opacity:1;margin:.4rem 0 0;color:var(--text)}
  html[data-design="atelier"] body .rtile__link{order:4;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sand-text);text-decoration-thickness:2px;text-underline-offset:.3em;min-height:44px;text-transform:none;letter-spacing:0}
  html[data-design="atelier"] body .rtile--nomedia{background:none}
}

/* The booking panel (offer band, closing call): a boxed "subscription card",
   heading left, words and button right. */
html[data-design="atelier"] body .section--ink{background:var(--paper)}
@media (min-width:901px){
  html[data-design="atelier"] body .section--ink > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem;align-items:end;border:1px solid var(--ink);padding:clamp(2.4rem,4vw,3.4rem);width:calc(100% - 2 * var(--gutter))}
  html[data-design="atelier"] body .section--ink .section__head{display:block;border:0;padding:0;margin:0!important}
  html[data-design="atelier"] body .section--ink .section__head h2{font-size:clamp(2.2rem,4vw,3.2rem)}
  html[data-design="atelier"] body .section--ink > .wrap > div:last-child{text-align:left!important}
}

/* Attractions: a numbered index, the number large in the accent. */
html[data-design="atelier"] body .attr-list{border-top:1px solid var(--ink)}
html[data-design="atelier"] body .attr-idx{color:var(--sand-text);font-size:1.5rem;width:2.6rem}
html[data-design="atelier"] body .attr-thumb:not(:has(img)){display:none}
html[data-design="atelier"] body .attr-main h3{font-size:1.4rem}
html[data-design="atelier"] body .attr-dist{font-weight:600;color:var(--ink)}
@media (min-width:721px){
  html[data-design="atelier"] body .attr-thumb{width:180px;height:auto;aspect-ratio:3/2}
}

/* Questions: ruled rows, the plus in the accent. */
html[data-design="atelier"] body :is(.faqx__item,.faq details){background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
html[data-design="atelier"] body :is(.faqx__item,.faq details) summary{font-family:var(--f-display);font-weight:500;font-size:1.15rem;padding:1.1rem 0;background:none}
html[data-design="atelier"] body .faqx__cat > h2{font-size:clamp(1.5rem,2.4vw,2rem);border-bottom:1px solid var(--ink);padding-bottom:.6rem}
html[data-design="atelier"] body .faq-band{background:var(--paper);border-top:1px solid var(--ink)}

/* Gallery: a contact sheet, numbered. */
html[data-design="atelier"] body .gallery{counter-reset:atph}
html[data-design="atelier"] body .gallery a{counter-increment:atph;box-shadow:none;background:var(--paper-2)}
html[data-design="atelier"] body .gallery a::before{content:counter(atph,decimal-leading-zero);position:absolute;z-index:1;left:.6rem;top:.6rem;padding:.1rem .4rem;background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:600}
@media (min-width:721px){
  html[data-design="atelier"] body .gallery{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:1.2rem}
  html[data-design="atelier"] body .gallery a{aspect-ratio:3/2}
}

/* Address panels and awards: paper cards under an ink rule. */
html[data-design="atelier"] body .p-location__card{background:var(--white);border:0;border-top:2px solid var(--ink);box-shadow:none}
html[data-design="atelier"] body .aw-band{min-height:0;border:1px solid var(--ink)}
html[data-design="atelier"] body .aw-band > img,
html[data-design="atelier"] body .aw-band::after{display:none}
html[data-design="atelier"] body .aw-band :is(h2,.aw-score span){color:var(--ink)}
html[data-design="atelier"] body .aw-band .aw-ring{color:var(--ink);background:transparent}
html[data-design="atelier"] body .aw-band__logo{filter:none}
html[data-design="atelier"] body .aw-band__in > div > p{color:var(--text)}

/* Experience and offer facts: ruled rows. */
html[data-design="atelier"] body .dx-facts{background:none;border:0;border-top:2px solid var(--ink)}

/* =====================================================================
   HOMEPAGE (GroupHome.astro) AND HOTEL PAGE (HotelHome.astro)
   ===================================================================== */
/* Booking: a ruled strip under the cover. */
html[data-design="atelier"] .at-booking{background:var(--paper)}
html[data-design="atelier"] .at-booking .booking__card{background:var(--white);border:1px solid var(--ink);box-shadow:none}
@media (min-width:1025px){
  html[data-design="atelier"] body .at-booking{margin-top:0;padding-top:0}
  html[data-design="atelier"] body .at-booking .booking__card{border-width:1px 0;border-radius:0;background:var(--paper)}
}

/* Contents: the hotels as a numbered table of contents (phones: the swipe row). */
html[data-design="atelier"] .at-toc__item{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
html[data-design="atelier"] .at-toc__no{display:none}
html[data-design="atelier"] .at-toc__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
html[data-design="atelier"] .at-toc__media img{width:100%;height:100%;object-fit:cover}
html[data-design="atelier"] .at-toc__body{padding:1rem 1rem .4rem}
html[data-design="atelier"] .at-toc__place{margin:0;font-size:.8rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] .at-toc__item h3{margin:.2rem 0 .4rem;font-size:1.5rem}
html[data-design="atelier"] .at-toc__item h3 a{color:var(--ink);text-decoration:none}
html[data-design="atelier"] .at-toc__desc{margin:0;font-size:.95rem;color:var(--text)}
html[data-design="atelier"] .at-toc__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;padding:.6rem 1rem 1rem;margin-top:auto}
@media (min-width:721px){
  html[data-design="atelier"] .at-toc{display:block;margin-top:2rem;border-top:1px solid var(--ink)}
  html[data-design="atelier"] body .at-toc__item{display:grid;grid-template-columns:3.4rem minmax(0,1fr) minmax(0,1.5fr) auto;align-items:center;gap:0 2rem;padding:1.4rem 0;background:none;border:0;border-bottom:1px solid var(--line)}
  html[data-design="atelier"] .at-toc__no{display:block;font-family:var(--f-display);font-size:2.2rem;line-height:1;color:var(--sand-text)}
  html[data-design="atelier"] .at-toc__media{aspect-ratio:4/3}
  html[data-design="atelier"] .at-toc__body{padding:0}
  html[data-design="atelier"] .at-toc__item h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
  html[data-design="atelier"] .at-toc__actions{flex-direction:column;align-items:flex-end;padding:0;margin:0}
  html[data-design="atelier"] .at-toc__item:hover .at-toc__media img{transform:scale(1.02)}
}
@media (min-width:721px) and (max-width:1024px){
  html[data-design="atelier"] body .at-toc__item{grid-template-columns:3rem minmax(0,1fr) minmax(0,1.6fr);row-gap:1rem}
  html[data-design="atelier"] .at-toc__actions{grid-column:2 / -1;flex-direction:row;justify-content:flex-start}
}

/* Editor's letter: heading left, two columns of prose with a drop capital. */
html[data-design="atelier"] .at-letter__head h2{font-size:clamp(2.1rem,4vw,3.3rem);margin:.3rem 0 1rem}
html[data-design="atelier"] .at-letter__body p{font-size:1.06rem;line-height:1.8;color:var(--text)}
html[data-design="atelier"] .at-letter__body > p:first-child::first-letter,
html[data-design="atelier"] .at-letter__body > div:first-child > p:first-child::first-letter{float:left;font-family:var(--f-display);font-size:4.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--sand-text)}
html[data-design="atelier"] .at-pulls{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--ink)}
html[data-design="atelier"] .at-pulls li{padding:.7rem 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-style:italic;font-size:1.1rem;color:var(--ink)}
@media (min-width:901px){
  html[data-design="atelier"] .at-letter__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:clamp(2.5rem,5vw,5rem);border-top:1px solid var(--ink);padding-top:1.6rem}
  html[data-design="atelier"] .at-letter__body{column-count:2;column-gap:2.6rem}
  html[data-design="atelier"] .at-letter__body p{break-inside:avoid-column}
}

/* Feature: tabs on a rule, the matching hotel as a spread. */
html[data-design="atelier"] .at-feature__head h2{font-size:clamp(2.1rem,4vw,3.3rem);margin:.3rem 0 1.4rem}
@media (min-width:721px){
  html[data-design="atelier"] body .at-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--ink);margin-bottom:2rem}
  html[data-design="atelier"] body .at-tabs .chip{background:none;border:0;border-bottom:3px solid transparent;border-radius:0;padding:.8rem 1.2rem;min-height:48px;font-weight:600;color:var(--muted);transform:none}
  html[data-design="atelier"] body .at-tabs .chip[aria-pressed="true"]{background:none;color:var(--ink);border-bottom-color:var(--sand)}
  html[data-design="atelier"] body .at-tabs .chip:hover{color:var(--ink)}
  html[data-design="atelier"] .at-feature__answer .match.is-current{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 3rem;align-items:center}
  html[data-design="atelier"] .at-feature__answer .match__thumb{grid-row:1 / span 2;width:100%;height:auto;aspect-ratio:4/3}
  html[data-design="atelier"] .at-feature__answer .match__body h3{font-size:clamp(2rem,3vw,2.8rem)}
  html[data-design="atelier"] .at-feature__answer .match__cta{flex-direction:row;align-items:center;gap:1.4rem;margin-top:1.2rem}
}
html[data-design="atelier"] .at-feature .router__result{background:none;border:0;padding:0}
/* Phones: the swipe row bleeds to the screen edge by this layout's own side margin. */
@media (max-width:720px){
  html[data-design="atelier"] body #routerResult.at-feature__answer{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}

/* Classifieds: ruled boxes, the discount large in the accent. */
html[data-design="atelier"] .at-ad{background:var(--white);border:1px solid var(--ink);padding:1.2rem 1.2rem 1.3rem;display:flex;flex-direction:column}
html[data-design="atelier"] .at-ad__where{display:flex;justify-content:space-between;gap:1rem;margin:0;padding-bottom:.6rem;border-bottom:1px solid var(--line);font-size:.85rem;font-weight:600;color:var(--ink)}
html[data-design="atelier"] .at-ad__where .beach{color:var(--muted);font-weight:500}
html[data-design="atelier"] body .at-ad__figure .offer__badge{position:static;display:inline-block;background:none;color:var(--sand-text);padding:0;font-family:var(--f-display);font-size:clamp(2.4rem,3.6vw,3.2rem)!important;font-weight:500;letter-spacing:-.02em;line-height:1;text-transform:none}
html[data-design="atelier"] .at-ad__figure{margin:.9rem 0 .2rem}
html[data-design="atelier"] .at-ad .offer__name{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.35rem;margin:.3rem 0 .6rem;color:var(--ink)}
html[data-design="atelier"] .at-ad__book{margin-top:auto;align-self:flex-start}
html[data-design="atelier"] .at-ad .offer__list{margin-bottom:1rem}
@media (min-width:721px){
  html[data-design="atelier"] .at-ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:2rem}
}

/* By the numbers: scores large in the accent, names beside them. */
html[data-design="atelier"] .at-numbers__list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--ink)}
html[data-design="atelier"] .at-numbers__list li{display:flex;align-items:baseline;gap:.9rem;padding:1.2rem 1rem 1.2rem 0;border-bottom:1px solid var(--line)}
html[data-design="atelier"] .at-numbers__list b{font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--sand-text)}
html[data-design="atelier"] .at-numbers__list span{font-family:var(--f-display);font-size:1.15rem;color:var(--ink)}
html[data-design="atelier"] .at-numbers__list small{display:block;font-family:var(--f-body);font-size:.85rem;color:var(--muted)}
html[data-design="atelier"] .at-numbers__award{margin-top:1.4rem;color:var(--text)}

/* Questions on the home pages: two columns of ruled rows. */
@media (min-width:901px){
  html[data-design="atelier"] .at-faq .faq__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem;max-width:none}
}

/* Back cover: paper, a strip of photographs, one line, one button. */
html[data-design="atelier"] body .at-back{background:var(--paper);border-top:1px solid var(--ink);text-align:left}
html[data-design="atelier"] .at-back__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-bottom:2rem}
html[data-design="atelier"] body .at-back__strip img{width:100%;height:auto!important;aspect-ratio:3/2;object-fit:cover;position:static}
html[data-design="atelier"] .at-back h2{font-size:clamp(2.2rem,5vw,4rem);max-width:18ch;margin-inline:0}
html[data-design="atelier"] .at-back p{margin-inline:0;max-width:52ch}
html[data-design="atelier"] .at-back__note{margin-top:1rem;font-size:.9rem;color:var(--muted)}

/* Hotel page: at a glance (two-column ruled table). */
html[data-design="atelier"] .at-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:clamp(2rem,4vw,3rem) 0 0;border-top:1px solid var(--ink)}
html[data-design="atelier"] .at-glance > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.4rem .9rem 0;border-bottom:1px solid var(--line)}
html[data-design="atelier"] .at-glance dt{font-size:.9rem;color:var(--muted)}
html[data-design="atelier"] .at-glance dd{margin:0;font-family:var(--f-display);font-size:1.5rem;font-weight:500;color:var(--ink)}

/* Hotel page: rooms - the first as a feature spread, the rest in a grid. */
html[data-design="atelier"] .at-room{display:block;color:var(--text);text-decoration:none}
html[data-design="atelier"] .at-room__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
html[data-design="atelier"] .at-room__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
html[data-design="atelier"] .at-room:hover .at-room__media img{transform:scale(1.02)}
html[data-design="atelier"] .at-room__body{display:block;padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--ink)}
html[data-design="atelier"] .at-room__no{display:block;font-size:.8rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] .at-room h3{margin:.2rem 0 .4rem;font-size:clamp(1.5rem,2.2vw,1.9rem)}
html[data-design="atelier"] .at-room__desc{display:block;color:var(--text)}
html[data-design="atelier"] .at-room__tag{display:block;margin-top:.4rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] .at-room.is-nomedia .at-room__media{display:none}
@media (min-width:721px){
  html[data-design="atelier"] .at-rooms__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2rem;margin-top:2rem}
  html[data-design="atelier"] .at-rooms__grid > .at-room:first-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.6rem;align-items:end}
  html[data-design="atelier"] .at-rooms__grid > .at-room:first-child .at-room__media{aspect-ratio:16/10}
  html[data-design="atelier"] .at-rooms__grid > .at-room:first-child h3{font-size:clamp(2rem,3.4vw,3rem)}
  html[data-design="atelier"] .at-rooms__grid > .at-room:first-child .at-room__body{margin-top:0}
  html[data-design="atelier"] .at-rooms__grid:has(> .at-room:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Hotel page: facilities as text columns. */
html[data-design="atelier"] .at-columns{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--ink)}
html[data-design="atelier"] .at-columns li{padding:1.1rem 0;border-bottom:1px solid var(--line)}
html[data-design="atelier"] .at-columns h3{font-size:1.3rem;margin:0 0 .3rem}
html[data-design="atelier"] .at-columns p{margin:0;font-size:.95rem;color:var(--text)}
@media (min-width:721px){
  html[data-design="atelier"] .at-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-design="atelier"] .at-columns li{padding:1.3rem 1.6rem 1.5rem;border-bottom:0;border-left:1px solid var(--line)}
  html[data-design="atelier"] .at-columns li:nth-child(3n+1){border-left:0;padding-left:0}
  html[data-design="atelier"] .at-columns li:nth-child(n+4){border-top:1px solid var(--line)}
}

/* Hotel page: restaurants as articles. */
html[data-design="atelier"] .at-article{background:var(--white);border:1px solid var(--line)}
html[data-design="atelier"] .at-article__media{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
html[data-design="atelier"] .at-article__media img{width:100%;height:100%;object-fit:cover}
html[data-design="atelier"] .at-article__meta,
html[data-design="atelier"] .at-article__text{padding:1rem 1.1rem 0}
html[data-design="atelier"] .at-article__text{padding-bottom:1.1rem}
html[data-design="atelier"] .at-article__kind{margin:0;font-size:.8rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] .at-article h3{margin:.2rem 0;font-size:clamp(1.6rem,2.6vw,2.4rem)}
html[data-design="atelier"] .at-article__hours{margin:0;font-family:var(--f-display);font-style:italic;color:var(--muted)}
html[data-design="atelier"] .at-article__text p{color:var(--text);line-height:1.75}
html[data-design="atelier"] .at-article__tags{list-style:none;margin:.8rem 0;padding:0}
html[data-design="atelier"] .at-article__tags li{padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink)}
html[data-design="atelier"] .at-article__note{font-size:.88rem;color:var(--muted)}
@media (min-width:721px){
  html[data-design="atelier"] .at-articles{display:grid;gap:3rem;margin-top:2rem}
  html[data-design="atelier"] .at-article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:3rem;background:none;border:0}
  html[data-design="atelier"] .at-article__media{grid-column:1 / -1;aspect-ratio:21/9}
  html[data-design="atelier"] .at-article__meta{padding:1.2rem 0 0;border-top:1px solid var(--ink);margin-top:1.2rem}
  html[data-design="atelier"] .at-article__text{padding:1.2rem 0 0;border-top:1px solid var(--line);margin-top:1.2rem}
}

/* Hotel page: the contact sheet. */
html[data-design="atelier"] .at-sheet a{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
html[data-design="atelier"] .at-sheet img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
html[data-design="atelier"] .at-sheet__no{position:absolute;left:.6rem;top:.6rem;padding:.1rem .4rem;background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:600}
@media (max-width:720px){
  html[data-design="atelier"] .at-sheet > a{height:240px}
}
@media (min-width:721px){
  html[data-design="atelier"] .at-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
  html[data-design="atelier"] .at-sheet > a:first-child{grid-column:span 2;grid-row:span 2}
  html[data-design="atelier"] .at-sheet > a:first-child img{height:100%}
}

/* Hotel page: the map beside a paper address card. */
html[data-design="atelier"] .at-where__map{position:relative;z-index:0;height:320px;border:1px solid var(--ink)}
html[data-design="atelier"] .at-where__map #resort-map{width:100%;height:100%}
html[data-design="atelier"] .at-where__card{background:var(--white);border-top:2px solid var(--ink);padding:1.4rem 1.3rem;margin-top:1.4rem}
html[data-design="atelier"] .at-where__card h3{font-size:1.8rem;margin:0 0 .6rem}
html[data-design="atelier"] .at-where__card address{font-style:normal;color:var(--ink);line-height:1.7}
html[data-design="atelier"] .at-where__label{margin:1.2rem 0 .2rem;font-size:.8rem;font-weight:600;color:var(--sand-text)}
html[data-design="atelier"] .at-where__contact{list-style:none;margin:0;padding:0}
html[data-design="atelier"] .at-where__contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
html[data-design="atelier"] .at-where__go{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:1rem}
@media (min-width:901px){
  html[data-design="atelier"] .at-where__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:stretch;margin-top:2rem}
  html[data-design="atelier"] .at-where__map{height:auto;min-height:440px}
  html[data-design="atelier"] .at-where__card{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  html[data-design="atelier"] *{transition:none!important}
}