/* theme "atelier" + bottle green. Every rule is scoped under html[data-palette="atelier"]. Preview with ?palette=atelier
   A fashion-house page: warm ivory paper, near-black type, photographs that fill the screen, and ONE rich colour used with
   conviction: a deep bottle green, leaning blue so it reads emerald (never holiday green). It carries the italic words, labels,
   numerals, rules, buttons, plate tags, form states and selection, and it fills two bands (the review and the footer) plus the
   phone menu, with ivory type. The paper is warm ivory, not pale green, so the page feels expensive, not spa. No gold, no navy.
   The opening scene (.hero) is untouched. */
html[data-palette="atelier"]{
  --paper:#FBF8F3; --paper-2:#F5F1EA; --paper-3:#E9E2D6; --paper-rgb:251,248,243;       /* warm ivory and greige */
  --ink:#1C1B1B; --ink-soft:rgba(28,27,27,.8); --stone:#5E5A53; --rule:rgba(12,90,75,.24); --ink-hover:#083A31;
  --accent:#0C5A4B;                            /* bottle green: words, labels, rules, buttons, plate tags */
  --band:#0A3F36;                              /* deeper green for the colour bands */
  --jade:#9BDCC8; --cream:#F6F2EA;             /* light green and ivory: type on the bands */
  --edge:#6F857D;                              /* the line under a form field: strong enough to see */
  --err:#A5432F;                               /* a form problem: a clay red, clearly not the accent (the blush tone sets its own) */
  --wrap:1240px;                               /* ONE content width: intro, glance, gallery, headings, favourites, rates and notes all share this left edge */
  --pad:clamp(80px,9vw,136px);                 /* vertical rhythm between sections (was 96-168px, which left dead space) */
  color-scheme:light;                          /* phones in dark mode still get light form controls */
}
html[data-palette="atelier"] ::selection{background:var(--accent);color:#fff}
html[data-palette="atelier"] .words ::selection,html[data-palette="atelier"] .foot ::selection{background:var(--jade);color:var(--band)}
html[data-palette="atelier"] :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html[data-palette="atelier"] .words :focus-visible,html[data-palette="atelier"] .foot :focus-visible,html[data-palette="atelier"] .menu :focus-visible{outline-color:var(--jade)}
html[data-palette="atelier"] .hero :focus-visible,html[data-palette="atelier"] body[data-theme="night"] .nav :focus-visible{outline:1px solid currentColor}   /* the opening scene keeps its own look */
html[data-palette="atelier"] .hero ::selection{background:var(--ink);color:var(--paper)}

/* ---------- words: green italic highlight, big display type, small tracked labels ---------- */
html[data-palette="atelier"] em{font-style:italic;font-synthesis:none;color:var(--accent)}
html[data-palette="atelier"] em .w{padding-inline:.2em .1em;margin-inline:-.2em -.1em}
html[data-palette="atelier"] .hero em{color:inherit}
html[data-palette="atelier"] .display{font-size:clamp(3.1rem,7.2vw,6.8rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}   /* balanced lines: no lone word on its own row */
html[data-palette="atelier"] .favs .display{font-size:clamp(2.8rem,5.4vw,5rem)}
html[data-palette="atelier"] .sent .display{font-size:clamp(3rem,5vw,4.2rem);font-style:italic;color:var(--accent)}
html[data-palette="atelier"] .section .eyebrow{display:flex;align-items:center;gap:16px;font-size:10.5px;font-weight:600;letter-spacing:.34em;color:var(--accent);margin-bottom:2.2rem}
html[data-palette="atelier"] .section .eyebrow::before{content:"";width:40px;height:2px;background:currentColor}
html[data-palette="atelier"] .section__note{font-size:16px;max-width:30rem}
html[data-palette="atelier"] .section{padding-block:var(--pad)}
html[data-palette="atelier"] .section + .section{border-top:0}
/* section rhythm: paper and paper-2 take turns, so no two neighbours melt into one long block.
   intro paper · gallery paper-2 · words (band) · favourites paper · etiquette paper-2 · rates paper · incall paper-2 · availability paper · inquire paper-2 · footer (band) */
html[data-palette="atelier"] .gallery,html[data-palette="atelier"] .etiquette,html[data-palette="atelier"] .incall,html[data-palette="atelier"] .inquire{background:var(--paper-2)}
html[data-palette="atelier"] .favs,html[data-palette="atelier"] .incall,html[data-palette="atelier"] .avail{padding-block:calc(var(--pad) * .86)}   /* the short sections sit a little tighter */

/* ---------- navigation: an ivory bar with a green hairline, a green signature, a green button ---------- */
html[data-palette="atelier"] .nav::before{background:rgba(var(--paper-rgb),.96);border-bottom-color:var(--accent)}
html[data-palette="atelier"] .nav__links a,html[data-palette="atelier"] .nav__burger b{opacity:.9}
html[data-palette="atelier"] body[data-theme="day"] .nav__logo .sig{color:var(--accent)}
html[data-palette="atelier"] body[data-theme="day"] .nav__burger span{background:var(--accent)}
html[data-palette="atelier"] body[data-theme="day"] .nav__cta{color:var(--accent);border-color:var(--accent)}
html[data-palette="atelier"] body[data-theme="day"] .nav__cta:hover{background:var(--accent);color:#fff}
/* the phone menu is a full green page with ivory type */
html[data-palette="atelier"] .menu{background:var(--band);padding:0 var(--gutter-r) 0 var(--gutter-l);overflow-y:auto;overscroll-behavior:contain;display:flex}   /* flex + auto margins: centred when it fits, scrolls when it does not (a phone on its side) */
html[data-palette="atelier"] .menu nav{align-items:flex-start;gap:6px;counter-reset:m;margin-block:auto;padding-block:88px 32px}   /* 88px: the first link starts below the signature */
html[data-palette="atelier"] .menu a{font-size:clamp(3rem,13vw,4.2rem);line-height:1.08;color:var(--cream);display:flex;align-items:baseline;gap:18px}
html[data-palette="atelier"] .menu a::before{counter-increment:m;content:counter(m,decimal-leading-zero);font:600 11px/1 var(--sans);letter-spacing:.22em;color:var(--jade)}
html[data-palette="atelier"] .menu a:hover,html[data-palette="atelier"] .menu a:focus-visible{color:var(--jade)}
@media (max-height:640px){   /* short screens (a phone on its side, Safari toolbars showing): smaller links so most of the menu fits; the rest scrolls */
  html[data-palette="atelier"] .menu a{font-size:clamp(1.8rem,8.5vh,2.6rem)}
  html[data-palette="atelier"] .menu nav{gap:2px}
}
html[data-palette="atelier"] body.menu-open[data-theme] .nav{color:var(--cream)}
html[data-palette="atelier"] body.menu-open[data-theme] .nav::before{opacity:1;background:var(--band);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}   /* a solid bar in the menu's own colour: links scrolled up slide under it, never through the signature and the close mark */
html[data-palette="atelier"] body.menu-open[data-theme] .nav__logo .sig{color:var(--cream)}
html[data-palette="atelier"] body.menu-open[data-theme] .nav__burger span{background:var(--jade)}

/* ---------- buttons: solid green, white type ---------- */
html[data-palette="atelier"] .section .btn--solid{background:var(--accent);color:#fff;min-height:56px;padding:0 36px}
html[data-palette="atelier"] .section .btn--solid:hover{background:var(--ink-hover)}
html[data-palette="atelier"] .section .btn--ghost{border-color:var(--accent);color:var(--accent)}
html[data-palette="atelier"] .section .btn--ghost:hover{background:var(--accent);color:#fff}

/* ---------- photo frames: sharp edges, cropped below the chin ----------
   Each photo is anchored to the bottom of its frame and zoomed (background-size) so the blurred face
   sits above the frame edge, whatever shape the frame has. Sizes are checked against the blur positions. */
html[data-palette="atelier"] .frame__art{inset:0}
/* FRAMES:BEGIN generated by the frame tool: each photo framed as the photo editor chose (window -> exact crop) */
html[data-palette="atelier"] .intro__portrait{aspect-ratio:0.6661;--a:0.6661}
html[data-palette="atelier"] .frame__art[data-slot="portrait"]{background-size:100.00% auto;background-position:50.00% 50.00%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="4912"]){aspect-ratio:0.7502;--a:0.7502}
html[data-palette="atelier"] .frame__art[data-photo="4912"]{background-size:149.25% auto;background-position:93.94% 27.27%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="4915"]){aspect-ratio:0.9059;--a:0.9059}
html[data-palette="atelier"] .frame__art[data-photo="4915"]{background-size:156.25% auto;background-position:61.11% 51.06%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="2162"]){aspect-ratio:0.7500;--a:0.7500}
html[data-palette="atelier"] .frame__art[data-photo="2162"]{background-size:100.00% auto;background-position:50.00% 54.74%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="4904"]){aspect-ratio:0.9915;--a:0.9915}
html[data-palette="atelier"] .frame__art[data-photo="4904"]{background-size:172.41% auto;background-position:61.90% 86.36%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="2508"]){aspect-ratio:0.6771;--a:0.6771}
html[data-palette="atelier"] .frame__art[data-photo="2508"]{background-size:120.48% auto;background-position:70.59% 50.00%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="5955"]){aspect-ratio:0.4787;--a:0.4787}
html[data-palette="atelier"] .frame__art[data-photo="5955"]{background-size:166.67% auto;background-position:50.00% 100.00%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="4847"]){aspect-ratio:0.7500;--a:0.7500}
html[data-palette="atelier"] .frame__art[data-photo="4847"]{background-size:105.26% auto;background-position:100.00% -0.00%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="4911"]){aspect-ratio:1.2941;--a:1.2941}
html[data-palette="atelier"] .frame__art[data-photo="4911"]{background-size:151.52% auto;background-position:88.24% 56.25%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="2640"]){aspect-ratio:0.5631;--a:0.5631}
html[data-palette="atelier"] .frame__art[data-photo="2640"]{background-size:121.95% auto;background-position:55.56% 100.00%}
html[data-palette="atelier"] .editorial .frame:has([data-photo="2167"]){aspect-ratio:0.5862;--a:0.5862}
html[data-palette="atelier"] .frame__art[data-photo="2167"]{background-size:113.64% auto;background-position:100.00% 50.00%}
/* tablets and up: justified rows. Each frame grows in proportion to its shape, so every photo in a row shares one height and the order reads left to right.
   The row split is planned by the generator (tablet [2, 2, 3], desktop [3, 4]) and the basis is a percentage of the gallery width, so it holds at every viewport width. */
@media (min-width:601px){
  html[data-palette="atelier"] .editorial{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px)}
  html[data-palette="atelier"] .editorial .frame{flex:var(--a,.75) 1 calc(var(--a,.75) * 44.5%);width:auto;max-width:none;margin:0!important;grid-column:auto;align-self:auto}
}
@media (min-width:981px){
  html[data-palette="atelier"] .editorial .frame{flex-basis:calc(var(--a,.75) * 29.5%)}
}
/* FRAMES:END */
html[data-palette="atelier"] .intro__portrait .frame__art{transform:none!important}   /* no scroll-drift: it would slide the crop */
html[data-palette="atelier"] .editorial .frame.curtain .frame__art{transform:none}      /* no zoom-in on arrival: the crop is what you see */
html[data-palette="atelier"] .frame:focus-visible{outline-offset:-6px}
html[data-palette="atelier"] .editorial{counter-reset:plate}
html[data-palette="atelier"] .editorial .frame.has-photo{counter-increment:plate}
html[data-palette="atelier"] .editorial .frame.has-photo::after{content:"Nº " counter(plate,decimal-leading-zero);position:absolute;left:0;bottom:0;z-index:2;
  padding:13px 22px 12px;background:var(--accent);font-size:10.5px;font-weight:600;letter-spacing:.3em;color:#fff;line-height:1;border-top:2px solid var(--jade)}   /* a green plate tag on every photograph */

/* ---------- introduction: the photo leads, full width on phones ---------- */
html[data-palette="atelier"] .intro__grid{max-width:var(--wrap);align-items:start;grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
html[data-palette="atelier"] .letter{font-size:clamp(1.3rem,1.8vw,1.6rem);max-width:34rem;margin-top:2.2rem}
html[data-palette="atelier"] .letter p:first-child{font-size:1.18em;line-height:1.38;color:var(--ink)}
html[data-palette="atelier"] .letter__sign{margin-top:2.4rem}
/* at a glance: a lookbook strip under a green rule, small green labels, large serif values, no boxes */
/* Built for any number of facts in any order: equal columns (--cols is set by app.js: 4 for eight facts), every cell the same width,
   a hairline under each cell, long values wrap instead of overflowing. Desktop 4 x 2, tablet 4 columns, phone a tidy 2-column grid. */
html[data-palette="atelier"] .glance{max-width:var(--wrap);gap:0;background:none;border-top:3px solid var(--accent);border-bottom:0;
  grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))}
html[data-palette="atelier"] .glance div{min-width:0;padding:26px 20px 28px 0;text-align:left;background:none;border-bottom:1px solid var(--rule)}
html[data-palette="atelier"] .glance dt{letter-spacing:.3em;margin-bottom:10px;font-weight:600;color:var(--accent)}
html[data-palette="atelier"] .glance dd{font-size:clamp(1.6rem,2.3vw,2.3rem);line-height:1.12;white-space:normal;text-wrap:balance;overflow-wrap:break-word}
/* each cell is a two-row subgrid: every label in a row of facts shares one height, so the values sit on one line even when a label wraps */
@supports (grid-template-rows:subgrid){
  html[data-palette="atelier"] .glance div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  html[data-palette="atelier"] .glance dt{align-self:end}
}

/* ---------- gallery: bigger photographs, a staggered lookbook on larger screens ----------
   Order: B&W boat, beach, B&W sea, the boudoir band, then the Christmas photo last (matches the page order). */
html[data-palette="atelier"] .editorial{max-width:var(--wrap)}   /* the rows' gap is the columns' gap (set with the generated rows above), so the gutters are equal */
html[data-palette="atelier"] .editorial .frame{grid-row:auto!important;align-self:start;margin-top:0}

/* ---------- kind words: the first deep green band, ivory type, a fine inset frame ---------- */
html[data-palette="atelier"] .words{background:var(--band);color:var(--cream);display:flex;flex-direction:column;align-items:center;padding-block:clamp(72px,9vw,112px)}
html[data-palette="atelier"] .words::before{content:"";position:absolute;inset:clamp(10px,1.6vw,24px);border:1px solid rgba(246,242,234,.22);border:1px solid color-mix(in srgb,var(--jade) 30%,transparent);pointer-events:none}   /* a fine inset frame in the band's own light colour (no hard-coded mint) */
html[data-palette="atelier"] .words .eyebrow{color:var(--jade);justify-content:center}
html[data-palette="atelier"] .words__list{width:100%;max-width:1100px}
html[data-palette="atelier"] .words__quote p{font-size:clamp(2.4rem,5.2vw,4.7rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
html[data-palette="atelier"] .words em{color:var(--jade)}
html[data-palette="atelier"] .words__quote footer{color:var(--jade);font-weight:600}
html[data-palette="atelier"] .leaf{stroke:var(--jade);stroke-width:1.4}

/* ---------- favourites: an index on the greige band, green icons and rules ---------- */
html[data-palette="atelier"] .favs__grid{grid-template-columns:repeat(3,1fr);gap:0 clamp(28px,5vw,72px);border-top:3px solid var(--accent)}
html[data-palette="atelier"] .fav{display:grid;grid-template-columns:48px 1fr;column-gap:20px;align-content:start;padding:24px 0 26px;border-bottom:1px solid var(--rule)}
html[data-palette="atelier"] .fav__icon{grid-row:1/span 2;box-sizing:border-box;width:48px;height:48px;padding:10px;margin:0;background:var(--accent);stroke:var(--cream);stroke-width:1.6;opacity:1}   /* a solid green tile with an ivory icon */
html[data-palette="atelier"] .fav:hover .fav__icon{transform:none}
html[data-palette="atelier"] .fav h3{font-size:1.65rem;line-height:1.1;margin-bottom:6px}
html[data-palette="atelier"] .fav p{font-size:14px}
html[data-palette="atelier"] .gifts{border-top:0;padding-top:0;margin-top:clamp(48px,6vw,88px);font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.2;letter-spacing:-.01em;text-align:left;color:var(--ink)}
html[data-palette="atelier"] .gifts em{color:var(--accent)}

/* ---------- engagements: a menu card with green numerals and green "On request" ---------- */
html[data-palette="atelier"] .rates__list{border-top:3px solid var(--accent)}
html[data-palette="atelier"] .rates__list li{display:grid;grid-template-columns:1fr auto;column-gap:20px;row-gap:14px;padding:28px 0 30px}
html[data-palette="atelier"] .rates__list li::before{grid-column:1;grid-row:1;width:auto;color:var(--accent);font-weight:600}
html[data-palette="atelier"] .r__dur{grid-column:2;grid-row:1}
html[data-palette="atelier"] .r__name{grid-column:1;grid-row:2;align-self:baseline;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.04;letter-spacing:-.015em}
html[data-palette="atelier"] .r__name small{font-size:14px;margin-top:10px}
html[data-palette="atelier"] .r__val{grid-column:2;grid-row:2;align-self:baseline;margin-top:0;font-style:italic;font-size:1.15rem;color:var(--accent)}   /* sits on the name's baseline */
html[data-palette="atelier"] .r__line{display:none}
html[data-palette="atelier"] .rates__notes{margin-top:clamp(40px,5vw,72px)}
html[data-palette="atelier"] .rates__notes b{color:var(--accent);font-weight:600}

/* ---------- etiquette: numbered rows, green plus signs, the open row turns green ---------- */
html[data-palette="atelier"] .acc,html[data-palette="atelier"] .acc details{border-color:var(--rule)}
html[data-palette="atelier"] .acc{border-top:3px solid var(--accent);counter-reset:e}
html[data-palette="atelier"] .acc summary{font-size:clamp(1.6rem,3vw,2.3rem);padding:30px 0;letter-spacing:-.01em;justify-content:flex-start}
html[data-palette="atelier"] .acc summary::before{counter-increment:e;content:counter(e,decimal-leading-zero);flex:none;width:34px;font:600 11px/1 var(--sans);letter-spacing:.2em;color:var(--accent)}
html[data-palette="atelier"] .acc summary span{flex:1}
html[data-palette="atelier"] .acc summary i::before,html[data-palette="atelier"] .acc summary i::after{background:var(--accent);height:2px}
html[data-palette="atelier"] .acc details[open] summary span{color:var(--accent);font-style:italic}
html[data-palette="atelier"] .acc__body p{padding-left:54px}   /* 34px number column + the 20px gap: the text lines up with its title */

/* ---------- inquiry form: green labels, green focus, green progress, solid green button ---------- */
html[data-palette="atelier"] .form__steps li.on{color:var(--accent);font-weight:600}
html[data-palette="atelier"] .form__track{height:3px;background:var(--rule)}
html[data-palette="atelier"] .form__track i{background:var(--accent)}
html[data-palette="atelier"] .field > span{color:var(--accent);font-weight:600}
html[data-palette="atelier"] .field input,html[data-palette="atelier"] .field select,html[data-palette="atelier"] .field textarea{border-bottom-color:var(--edge)}
html[data-palette="atelier"] .field input:focus,html[data-palette="atelier"] .field select:focus,html[data-palette="atelier"] .field textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
html[data-palette="atelier"] .field select{background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%)}
html[data-palette="atelier"] .field.bad input,html[data-palette="atelier"] .field.bad select,html[data-palette="atelier"] .field.bad textarea{border-bottom-color:var(--err);box-shadow:0 1px 0 var(--err)}
html[data-palette="atelier"] .field.bad > span{color:var(--err)}
html[data-palette="atelier"] .field.bad > span::after{content:"!";display:inline-grid;place-items:center;width:15px;height:15px;margin-left:8px;border-radius:50%;background:var(--err);color:#fff;font:700 10px/1 var(--sans);letter-spacing:0;vertical-align:1px}   /* an icon as well as a colour, so it never depends on colour alone */
html[data-palette="atelier"] .form__error{font-size:14px;font-weight:500;color:var(--err)}
html[data-palette="atelier"] .form__error:not(:empty)::before{content:"!";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:9px;border-radius:50%;background:var(--err);color:#fff;font:700 11px/1 var(--sans);vertical-align:1px}
/* autofill keeps the field clean (no blue or yellow tint); --field-bg is the colour the field sits on */
html[data-palette="atelier"] .field input:-webkit-autofill,html[data-palette="atelier"] .field input:-webkit-autofill:hover,html[data-palette="atelier"] .field input:-webkit-autofill:focus,
html[data-palette="atelier"] .field textarea:-webkit-autofill,html[data-palette="atelier"] .field select:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--accent);box-shadow:0 0 0 60px var(--field-bg,var(--paper)) inset;-webkit-box-shadow:0 0 0 60px var(--field-bg,var(--paper)) inset;transition:background-color 9999s ease-out 0s}
html[data-palette="atelier"] .field input:autofill{box-shadow:0 0 0 60px var(--field-bg,var(--paper)) inset;-webkit-text-fill-color:var(--ink)}
html[data-palette="atelier"] .inquire{--field-bg:var(--paper-2)}
html[data-palette="atelier"] .choice{border-color:var(--edge)}
html[data-palette="atelier"] .choice:has(input:checked){border-color:var(--accent);background:var(--paper-2);box-shadow:inset 4px 0 0 var(--accent)}
html[data-palette="atelier"] .choice input,html[data-palette="atelier"] .check input{accent-color:var(--accent)}

/* ---------- footer: the second green band ---------- */
html[data-palette="atelier"] .foot{background:var(--band);color:var(--cream);border-top:0}
html[data-palette="atelier"] .foot .sig{color:var(--cream)}
html[data-palette="atelier"] .foot__cols{color:rgba(246,242,234,.82)}
html[data-palette="atelier"] .foot__cols a{color:var(--jade);font-weight:600}
html[data-palette="atelier"] .foot kbd{border-color:rgba(246,242,234,.45)}
html[data-palette="atelier"] .foot .lang span{opacity:.78}
html[data-palette="atelier"][lang="en"] .foot .lang [data-lang="en"],html[data-palette="atelier"][lang="fr"] .foot .lang [data-lang="fr"]{opacity:1;color:var(--jade)}
html[data-palette="atelier"] .foot__copy{max-width:1100px;margin:52px auto 0;padding-top:28px;border-top:1px solid rgba(246,242,234,.22);border-top:1px solid color-mix(in srgb,var(--jade) 30%,transparent);color:rgba(246,242,234,.78)}
html[data-palette="atelier"][lang="en"] body[data-theme="day"] .nav .lang [data-lang="fr"],html[data-palette="atelier"][lang="fr"] body[data-theme="day"] .nav .lang [data-lang="en"]{opacity:.74}

/* ---------- desktop cursor: a plain ring and dot in the accent with a pale halo (the "difference" blend turns minty over a pink or green page) ---------- */
html[data-palette="atelier"] .cursor{mix-blend-mode:normal}
html[data-palette="atelier"] .cursor__ring{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
html[data-palette="atelier"] .cursor__dot{background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.7)}

/* ---------- the incall space and availability ---------- */
html[data-palette="atelier"] .incall__body{margin-top:2rem}
html[data-palette="atelier"] .avail .section__head{text-align:center}   /* a centred booking block: the calendar and buttons sit under a centred title */
html[data-palette="atelier"] .avail .eyebrow{justify-content:center}
html[data-palette="atelier"] .avail .section__note{margin-inline:auto}
html[data-palette="atelier"] .avail__cal{max-width:920px}
html[data-palette="atelier"] .avail__tip{color:var(--stone)}

/* ---------- photo viewer: ivory, with a green close mark ---------- */
html[data-palette="atelier"] .lightbox{color:var(--ink)}
html[data-palette="atelier"] .lightbox::backdrop{background:rgba(251,248,243,.98)}
html[data-palette="atelier"] .lightbox__label{color:var(--ink)}
html[data-palette="atelier"] .lightbox__close{color:var(--accent)}

/* ---------- larger screens: the heading sits beside its content, like a printed page ---------- */
@media (min-width:981px){
  /* the portrait is pinned beside the letter while it is read (no empty column under it); its crop is the photo editor's, so it is never stretched */
  html[data-palette="atelier"] .intro__portrait{position:sticky;top:96px}
  html[data-palette="atelier"] .etiquette,html[data-palette="atelier"] .inquire,html[data-palette="atelier"] .incall{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,120px);align-items:start;
    padding-inline:max(var(--gutter),calc((100% - var(--wrap)) / 2))}
  html[data-palette="atelier"] .etiquette .section__head,html[data-palette="atelier"] .inquire .section__head,html[data-palette="atelier"] .incall .section__head{grid-column:1;margin:0;position:sticky;top:112px}
  html[data-palette="atelier"] .incall .section__head{position:static}
  html[data-palette="atelier"] .etiquette .display,html[data-palette="atelier"] .inquire .display,html[data-palette="atelier"] .incall .display{font-size:clamp(3.3rem,5.4vw,5.6rem)}
  html[data-palette="atelier"] .acc,html[data-palette="atelier"] .form,html[data-palette="atelier"] .sent{grid-column:2;max-width:none;margin:0}
  html[data-palette="atelier"] .incall{align-items:center}                       /* the title and the letter share one centre line, so neither half is left empty */
  html[data-palette="atelier"] .incall__body{grid-column:2;max-width:34rem;margin:0}
  html[data-palette="atelier"] .rates__list li{grid-template-columns:64px minmax(0,1fr) 200px 150px;align-items:baseline;padding:32px 0 34px}
  html[data-palette="atelier"] .rates__list.no-prices li{grid-template-columns:64px minmax(0,1fr) auto}   /* nothing priced: no empty price column, the lengths end at the rule */
  html[data-palette="atelier"] .rates__list li::before{grid-row:1}
  html[data-palette="atelier"] .r__name{grid-column:2;grid-row:1}
  html[data-palette="atelier"] .r__dur{grid-column:3;grid-row:1;text-align:right}
  html[data-palette="atelier"] .r__val{grid-column:4;grid-row:1;text-align:right}
}

/* ---------- phones: photographs run edge to edge ---------- */
@media (max-width:980px){
  html[data-palette="atelier"] .intro{padding-top:0}
  html[data-palette="atelier"] .intro__grid{grid-template-columns:1fr}
  html[data-palette="atelier"] .intro__portrait{position:relative;top:0;max-width:none;margin:0 calc(var(--gutter-r) * -1) clamp(56px,10vw,88px) calc(var(--gutter-l) * -1);width:auto}
  html[data-palette="atelier"] .glance{grid-template-columns:repeat(min(3,var(--cols,6)),minmax(0,1fr))}
  html[data-palette="atelier"] .favs__grid{grid-template-columns:1fr 1fr}
  html[data-palette="atelier"] .form{max-width:760px;margin-inline:0}   /* left edge level with the title above it */
}
@media (max-width:600px){
  /* a tidy two-column grid: every cell the same size, a hairline between the columns, no odd list rows */
  html[data-palette="atelier"] .glance,html[data-palette="atelier"] .glance[data-n="8"]{grid-template-columns:repeat(min(2,var(--cols,6)),minmax(0,1fr))}
  html[data-palette="atelier"] .glance div{padding:20px 12px 22px 0}
  html[data-palette="atelier"] .glance div:nth-child(odd){border-right:1px solid var(--rule)}
  html[data-palette="atelier"] .glance div:nth-child(even){padding-left:20px;padding-right:0}
  html[data-palette="atelier"] .glance dd{font-size:clamp(1.1rem,6.2vw,1.5rem)}   /* shrinks a little on the narrowest phones, so "English · Français" stays on one line (no stranded dot) */
  html[data-palette="atelier"] .favs__grid{grid-template-columns:1fr}
  html[data-palette="atelier"] .editorial{margin-left:calc(var(--gutter-l) * -1);margin-right:calc(var(--gutter-r) * -1);row-gap:8px}
  html[data-palette="atelier"] .editorial .frame.has-photo::after{padding-left:var(--gutter-l)}
  html[data-palette="atelier"] .editorial .frame,html[data-palette="atelier"] .editorial .frame:nth-child(even){width:auto;justify-self:stretch}
}

/* ---------- tablets: eight facts sit four across, long values wrap ---------- */
@media (min-width:601px) and (max-width:980px){
  html[data-palette="atelier"] .glance[data-n="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  html[data-palette="atelier"] .glance dd{font-size:clamp(1.2rem,3.3vw,1.45rem)}
  html[data-palette="atelier"] .intro__portrait{width:100%;max-width:min(540px,100%);margin:0 auto clamp(48px,7vw,72px)}   /* a tablet is not a phone: the portrait stays a portrait instead of filling a 1,200px column */
  html[data-palette="atelier"] .intro{padding-top:clamp(88px,12vw,120px)}
}

/* Oct 19: the contact heading keeps two lines on very wide screens; rate descriptions use normal letter spacing */
html[data-palette="atelier"] .inquire .display{font-size:clamp(3.3rem,5.4vw,4.9rem)}
html[data-palette="atelier"] .r__name small{letter-spacing:0}