@charset "utf-8";
/* Boulangerie Verrier — pole "Playbill": a theatrical letterpress system in
   burgundy, antique gold and cream. Colours are written for the cream ground by
   default; the burgundy bands carry the only scoped overrides. Every text pair
   was measured against its real background before a line of this was written. */

:root{
  --ground:#FBF6EC;        /* the client's own background colour, verbatim */
  --paper:#FFFDF7;
  --ink:#2B2622;
  --burgundy:#6B2D2D;      /* sampled from the logo artwork */
  --gold:#7A5B17;          /* text-safe on the GRAINED cream, not just the flat
                              colour: 5.01:1 against rgb(238,228,216), which is
                              what the texture actually composites to */
  --goldrule:#B08D3A;      /* rules and borders only — never text */
  --muted:#5B524A;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
  --wrap:1180px;
  --gap:clamp(1rem,2.4vw,1.9rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:var(--ground);color:var(--ink);
  font:400 clamp(1.02rem,.32vw + .96rem,1.14rem)/1.65 var(--serif);
  /* BackgroundStyle "texture": a cream grain drawn in CSS, no image weight */
  background-image:
    radial-gradient(circle at 12% 18%,rgba(107,45,45,.035) 0 1px,transparent 1px),
    radial-gradient(circle at 63% 47%,rgba(138,106,31,.04) 0 1px,transparent 1px),
    radial-gradient(circle at 34% 82%,rgba(107,45,45,.03) 0 1px,transparent 1px);
  background-size:37px 37px,53px 53px,71px 71px;
}
img{max-width:100%}
h1,h2,h3,h4{text-wrap:balance;font-weight:700;line-height:1.08;margin:0 0 .5em}
/* A strict three-step scale — the whole type system, and the pole's backbone. */
/* The top step is set by the longest H1 on the site, not by taste: at 4.1rem
   "Mixed at midnight, sold the same morning" balanced onto THREE lines in the
   hero column, and the house rule allows one or two. */
h1{font-size:clamp(2.1rem,4.4vw,3.15rem);letter-spacing:-.018em;color:var(--burgundy)}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem);letter-spacing:-.012em;color:var(--burgundy)}
h3{font-size:clamp(1.12rem,1.5vw,1.3rem);letter-spacing:.004em}
/* Keep a single word off a line of its own. The longer language reaches the
   wrap point differently than the one the copy was measured against, so the
   orphan is a property of the text, not of one string to be hand-tuned. */
p,figcaption,dd{text-wrap:pretty}
p{margin:0 0 1rem}
a{color:var(--burgundy)}
a:focus-visible,summary:focus-visible,.cta:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px}

.wrap{width:min(var(--wrap),100% - clamp(1.4rem,5vw,3.2rem));margin-inline:auto}
.band{padding-block:clamp(2.4rem,5.5vw,4.4rem)}
.band + .band{border-top:1px solid rgba(107,45,45,.16)}

.skip{position:absolute;left:-9999px;top:0;background:var(--burgundy);
  color:var(--ground);padding:.8rem 1.2rem;z-index:90;text-decoration:none}
.skip:focus{left:0}

/* The preview banner: its own colours, in flow, covering nothing. */
.owpreview{background:#1F1B18;color:#FFFDF7;padding:.85rem clamp(1rem,4vw,2rem);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  justify-content:center;font-size:.95rem}
.owpreview p{margin:0}
.owcta{color:#1F1B18;background:#F0D68A;text-decoration:none;font-weight:700;
  padding:.55rem 1.1rem;border-radius:2px;min-height:44px;display:inline-flex;
  align-items:center}
.owcta:hover{background:#FFFDF7}

/* ---------------------------------------------------------------- header */
.sitehead{background:var(--ground);border-bottom:3px double var(--goldrule)}
.headrow{display:flex;flex-wrap:wrap;align-items:center;
  gap:.7rem clamp(1rem,2.5vw,2rem);padding-block:clamp(.9rem,2vw,1.35rem)}
.brandlink{display:block;flex:0 0 auto;line-height:0}
.wordmark{display:block;width:clamp(148px,23vw,290px);height:auto}
.nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem clamp(.8rem,1.8vw,1.5rem);margin-left:auto}
.bar{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem clamp(.8rem,1.8vw,1.5rem);
  margin:0;padding:0}
.bar a,.morepanel a,.langlink{
  white-space:nowrap;text-decoration:none;color:var(--ink);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:.12rem}
.bar a[aria-current],.morepanel a[aria-current]{
  color:var(--burgundy);box-shadow:inset 0 -3px 0 var(--goldrule)}
.bar a:hover,.morepanel a:hover,.langlink:hover{color:var(--burgundy)}
.langlink{color:var(--burgundy);border:1px solid var(--goldrule);
  border-radius:2px;padding-inline:.7rem}
.more{position:static;width:auto;display:none}
.more summary{list-style:none;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;padding-inline:.7rem;
  font:700 .82rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;
  color:var(--burgundy);border:1px solid var(--goldrule);border-radius:2px}
.more summary::-webkit-details-marker{display:none}
.morepanel{list-style:none;margin:.6rem 0 0;padding:.5rem .9rem;
  background:var(--paper);border:1px solid var(--goldrule);border-radius:2px;
  display:flex;flex-direction:column;gap:.1rem}
/* The closed state restated in the component's own CSS: an author display on
   the panel outranks the UA rule that hides a closed details' children. */
.more:not([open]) .morepanel{display:none}
.w-menu{display:none}

/* ------------------------------------------------------------------ hero */
.hero{display:grid;gap:clamp(1.4rem,3.5vw,2.6rem);justify-content:center;
  align-items:center}
.eyebrow{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:.9rem}
.lede{font-size:clamp(1.14rem,1.5vw,1.36rem);color:var(--muted);max-width:56ch}
.hero-band{padding-top:clamp(1.8rem,4vw,3rem)}

.ctarow{display:flex;flex-wrap:wrap;gap:.7rem 1rem;margin:1.6rem 0 0}
.cta{display:inline-flex;align-items:center;min-height:48px;
  padding:.7rem 1.5rem;background:var(--burgundy);color:var(--ground);
  text-decoration:none;font-weight:700;letter-spacing:.06em;border-radius:2px;
  box-shadow:5px 5px 0 rgba(107,45,45,.22)}
.cta:hover{box-shadow:2px 2px 0 rgba(107,45,45,.3);transform:translate(3px,3px)}
.cta-ghost{background:transparent;color:var(--burgundy);
  border:2px solid var(--burgundy);box-shadow:5px 5px 0 rgba(107,45,45,.16)}
.cta-ghost:hover{background:var(--burgundy);color:var(--ground)}

/* One photo treatment, sitewide: a cream mat, a hairline gold rule, a burgundy
   offset and one warm grade. Every frame on the site wears it. */
.ph{margin:0}
.shot{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  background:var(--paper);padding:6px;border:1px solid var(--goldrule);
  box-shadow:8px 8px 0 rgba(107,45,45,.18);filter:saturate(1.06) contrast(1.03)}
.ph figcaption,.tile figcaption{margin-top:.75rem;font-size:.93rem;
  color:var(--muted);line-height:1.5}
.heroshot .shot{aspect-ratio:3/2}

/* ------------------------------------------------------------ the offer */
.offer{list-style:none;counter-reset:none;margin:0;padding:0;display:grid;
  gap:0 clamp(1.4rem,3vw,2.6rem);grid-template-columns:1fr}
.offer li{border-top:1px solid rgba(107,45,45,.2);padding:.95rem 0;
  font-size:clamp(1.06rem,1.2vw,1.2rem)}
.offer li:first-child{border-top:2px solid var(--burgundy)}
.offer a{text-decoration:none;display:block}
.offer a:hover{color:var(--gold);text-decoration:underline}
.offer-full .offer li{font-size:clamp(1.14rem,1.6vw,1.4rem)}

.prose{max-width:62ch}
.prose p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ pairs */
.pair{display:grid;gap:clamp(1.2rem,3vw,2.2rem);grid-template-columns:1fr}
.quad{display:grid;gap:clamp(1.2rem,3vw,2.2rem);grid-template-columns:1fr}
.strip{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(1rem,2.4vw,1.8rem);grid-template-columns:1fr}
.striptile .shot{aspect-ratio:1/1}

/* --------------------------------------------------------------- contact */
.contact{margin:0 0 clamp(1.6rem,3vw,2.4rem);display:grid;gap:0;
  grid-template-columns:1fr}
.contact > div{border-top:1px solid rgba(107,45,45,.2);padding:.85rem 0}
.contact dt{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:.25rem}
.contact dd{margin:0;font-size:clamp(1.06rem,1.2vw,1.2rem)}
.mapframe{border:1px solid var(--goldrule);background:var(--paper);padding:6px;
  box-shadow:8px 8px 0 rgba(107,45,45,.18)}
.mapframe iframe{display:block;width:100%;height:clamp(300px,42vw,460px)}

/* -------------------------------------------------------------- gallery */
.grid{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(1.3rem,3vw,2.2rem);grid-template-columns:1fr}
.tile{scroll-margin-top:1.5rem}
.tile figure{margin:0}
.tile > figure > a{display:block;position:relative;text-decoration:none}
/* Scoped to the tile: the enlargement lives inside .tile and must not inherit
   the tile's crop. A bare .tile img would match it too. */
.tile > figure > a img{aspect-ratio:3/2;object-fit:cover}
.zoom{position:absolute;right:14px;bottom:14px;background:var(--burgundy);
  color:var(--ground);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:.5rem .8rem;min-height:32px;display:inline-flex;
  align-items:center;border-radius:2px}
.lb{position:fixed;inset:0;margin:0;padding:clamp(1rem,3vw,2.4rem);
  z-index:70;display:none;background:#1F1B18;overflow:auto}
.lb:target{display:grid;place-items:center;align-content:center;gap:1rem}
.lbimg{max-width:min(100vw,1400px);max-height:72vh;width:auto;height:auto;
  aspect-ratio:auto;object-fit:contain;padding:0;border:1px solid var(--goldrule);
  box-shadow:none;filter:saturate(1.06) contrast(1.03)}
.lb figcaption{color:#F3EADA;max-width:72ch;text-align:center;font-size:.95rem;
  margin:0}
.lbclose{color:#1F1B18;background:#F0D68A;text-decoration:none;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  padding:.7rem 1.3rem;border-radius:2px;min-height:44px;
  display:inline-flex;align-items:center}
.lbclose:hover{background:#FFFDF7}

/* ------------------------------------------------------------------ foot */
.sitefoot{background:var(--burgundy);color:var(--ground);
  border-top:3px double var(--goldrule);
  padding:clamp(2.2rem,5vw,3.4rem) 0 1.4rem;margin-top:clamp(2rem,5vw,3.4rem)}
.footgrid{display:grid;gap:2rem clamp(1.6rem,3vw,3rem);grid-template-columns:1fr}
/* The wordmark is burgundy ink on its own cream ground, so on the burgundy
   band it is given the ground it was drawn for. A plaque, not an edit. */
.plaque{display:inline-block;background:var(--ground);padding:.7rem .95rem;
  border-radius:2px;line-height:0;margin-bottom:1rem}
.plaque img{display:block;width:clamp(180px,20vw,240px);height:auto}
.footaddr{margin-bottom:.5rem}
.footline{margin-bottom:.3rem}
.sitefoot a{color:#F0D68A;text-decoration:none}
.sitefoot a:hover{color:#FFFDF7;text-decoration:underline}
.sitefoot .label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:#EBD9B4;margin:0 0 .7rem;font-weight:700}
.sitefoot .label ~ .label{margin-top:1.5rem}
.farm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.farm a{display:block;padding:.4rem 0;font-size:.93rem}
.footrule{border-top:1px solid rgba(251,246,236,.28);margin-top:2rem;
  padding-top:1.1rem}
.footrule p{margin:0;font-size:.85rem;color:#EBD9B4}

/* -------------------------------------------------------------- sweep
   390 · 640 · 768 · 900 · 1024 · 1060 · 1440. Column counts divide their item
   counts and step 1 to n; every breakpoint is computed gap-inclusive. */
@media (min-width:640px){
  .pair{grid-template-columns:repeat(2,1fr)}      /* 2 divides 2 */
  .quad{grid-template-columns:repeat(2,1fr)}      /* 2 divides 4 */
  .strip{grid-template-columns:repeat(2,1fr)}     /* 2 divides 4 */
  .grid{grid-template-columns:repeat(2,1fr)}      /* 2 divides 12 */
  .offer{grid-template-columns:repeat(2,1fr)}     /* 2 divides 10 */
  .contact{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.4rem,3vw,2.6rem)}
  .footgrid{grid-template-columns:1.4fr 1fr 1.2fr}
}
@media (min-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}      /* 3 divides 12 */
  .strip{grid-template-columns:repeat(4,1fr)}     /* 4 divides 4 */
  .hero{grid-template-columns:minmax(0,1.02fr) minmax(0,1.12fr)}
}
/* Measured in the browser, in both languages, not guessed — and the boundary
   belongs to the LONGER language. English needs 256 (wordmark) + 524 (five
   labels and their gaps) + 107 (the language link) + 64 of row gaps = 951px of
   content box; French needs 256 + 709 + 97 + 64 = 1146px, because "Pains et
   pâtisseries" and "Nous visiter" run wider than "What We Bake" and "Visit".
   .wrap yields min(1180, 100vw - 51.2) here, so the French bar fits from 1197px
   up; the boundary is set at 1200 for margin. (Re-measured after QA round 1
   changed this label: the first French wording needed 1183px, which exceeds the
   1180px cap on .wrap itself and would have wrapped at EVERY width. A nav label
   is a layout constant, and a copy edit to one is a layout edit.) Setting it
   where ENGLISH fits
   would have wrapped the French bar to two rows across a 65px band with nothing
   reporting it. Below the boundary the bar sheds to the disclosure instead of
   wrapping: at 390 the header measures 75.8px = 9.0% of an 844px viewport. */
@media (max-width:1199px){
  .bar{display:none}
  .more{display:block}
  .w-more{display:none}
  .w-menu{display:block}
}
@media (max-width:639px){
  .offer{grid-template-columns:1fr}
  /* The overlay's side padding was costing more width than the tile had to
     spare: at 390 the tile image is 368px and the padded enlargement came out
     358px — 5% SMALLER than the thing the control promises to enlarge. The
     padding goes; the caption and the close keep their own gutter. */
  .lb{padding-inline:0}
  .lb figcaption{padding-inline:1rem}
}

/* One signature device: the bands arrive in sequence. Scoped to bands only —
   never to an ancestor of the header or of a lightbox, because an animated
   transform there would make position:fixed mean something else. The page is
   fully legible with motion removed. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .7s cubic-bezier(.2,.9,.3,1.06) both}
  .band:nth-of-type(2) .reveal{animation-delay:.06s}
  .band:nth-of-type(3) .reveal{animation-delay:.12s}
  .band:nth-of-type(4) .reveal{animation-delay:.18s}
  .band:nth-of-type(5) .reveal{animation-delay:.24s}
  .band:nth-of-type(6) .reveal{animation-delay:.30s}
  .band:nth-of-type(7) .reveal{animation-delay:.36s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .cta,.bar a,.morepanel a,.langlink,.offer a,.lbclose,.owcta{
    transition:background-color .18s ease,color .18s ease,
               box-shadow .18s ease,transform .18s ease}
}