/* ==========================================================================
   THE PICTURE COMPONENTS (image layout brief, 27 Oct 2026)
   The twelve ways a photograph is set on a public page, each built once:
   templates/_pictures.html holds the markup and /design shows them all.

   A house file, not part of the design side's gudanes.css. That file arrives
   as a whole-file handover most weeks; keeping these rules apart means a
   handover cannot take them away and these cannot conflict with it.

   Only the existing palette: the gilt for words, the gold for lines, the
   leaf for marks, the creeper for the wax. Nothing here moves for somebody
   who has asked for reduced motion; see the end of the file.
   ========================================================================== */

.g{
  /* The moulding: leaf to gold to the dark gilt and back, as light falls
     across a carved frame. */
  --pc-moulding: linear-gradient(135deg, var(--gilt-leaf) 0%, var(--gold-lit) 18%, var(--gold) 34%, var(--gilt) 52%, var(--gold) 68%, var(--gold-lit) 84%, var(--gilt-leaf) 100%);
  --pc-mount: #F4EDDD;
  --pc-paper: #FFFDF8;
  --pc-shadow: 0 22px 34px -18px rgba(20, 48, 95, .42), 0 3px 8px rgba(20, 48, 95, .10);
}

.g .g-pc__cap{ display: none; }

/* Captions under photographs stay hidden site-wide (owner, 15 Oct). /design
   turns them on so the labels can be judged. */
.g.g-caps .g-pc__cap{ display: block !important; }

/* ---- Shared ------------------------------------------------------------ */
.g .g-cadre img, .g .g-pp img, .g .g-album img, .g .g-car img, .g .g-mos img,
.g .g-bande img, .g .g-sp img, .g .g-plein img, .g .g-med img, .g .g-carnet img,
.g .g-cp img{ display: block; width: 100%; height: auto; max-width: 100%; border: 0; }
.g .g-cadre, .g .g-pp, .g .g-album, .g .g-car, .g .g-mos, .g .g-bande, .g .g-sp,
.g .g-plein, .g .g-med, .g .g-carnet, .g .g-cp{ margin-left: 0; margin-right: 0; }

/* ==== A. Le cadre ======================================================= */
.g .g-cadre{ margin: var(--s6) auto; max-width: 34rem; text-align: center; }
.g .g-cadre__frame{
  padding: clamp(10px, 1.6vw, 16px);
  background: var(--pc-moulding);
  box-shadow: var(--pc-shadow),
              inset 0 0 0 1px rgba(255, 245, 210, .55),
              inset 0 0 0 4px rgba(115, 86, 45, .35),
              inset 0 0 0 6px rgba(255, 245, 210, .25);
}
.g .g-cadre__mount{
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--pc-mount);
  box-shadow: 0 0 0 2px #2B2117;   /* the thin dark line between gilt and mount */
}
.g .g-cadre__img{ aspect-ratio: 4 / 5; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.g .g-cadre--rect .g-cadre__img{ aspect-ratio: 4 / 3; }
.g .g-cadre--oval .g-cadre__frame,
.g .g-cadre--oval .g-cadre__mount,
.g .g-cadre--oval .g-cadre__img{ border-radius: 50%; }
.g .g-cadre--oval{ max-width: 24rem; }
.g .g-cadre--oval .g-cadre__img{ aspect-ratio: 4 / 5; }
/* The arch: the tall windows of the façade. Each layer is rounded in
   proportion to its own box, so the three curves stay parallel. */
.g .g-cadre--arch .g-cadre__frame{ border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.g .g-cadre--arch .g-cadre__mount{ border-radius: 50% 50% 0 0 / 33% 33% 0 0; }
.g .g-cadre--arch .g-cadre__img{ border-radius: 50% 50% 0 0 / 32% 32% 0 0; aspect-ratio: 3 / 4; }
.g .g-cadre--arch{ max-width: 26rem; }

/* The brass plaque under the frame. Dark letters on the gold: 7:1. */
.g .g-cadre__plaque{
  display: inline-block; margin: var(--s4) auto 0; padding: 5px 16px 6px;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 1px 0 rgba(255,245,210,.7) inset, 0 2px 4px rgba(20,48,95,.25);
  color: #2B2117; font-family: var(--serif); font-size: 13px; line-height: 1.3;
  font-variant: small-caps; letter-spacing: .14em; text-transform: lowercase;
  border-left: 0; max-width: none;
}
.g main figure figcaption.g-cadre__plaque{ display: inline-block !important; }

/* ==== B. Le passe-partout =============================================== */
.g .g-pp{ margin: var(--s6) 0; }
.g .g-pp__mount{
  padding: clamp(22px, 4vw, 48px);
  background: #F8F3E8;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 6px #F8F3E8, inset 0 0 0 7px rgba(197, 162, 74, .45), 0 10px 22px -16px rgba(20,48,95,.35);
}
.g .g-pp__mount img{ box-shadow: 0 0 0 1px rgba(43,33,23,.18), 0 1px 0 4px rgba(255,255,255,.6); }
.g .g-pp__label{
  margin: var(--s3) 0 0; padding: 0 0 0 var(--s3); border-left: 1px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2);
}

/* ==== C. L'album ======================================================== */
.g .g-album{ display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; margin: var(--s7) 0; padding: var(--s4) 0; }
.g .g-album__p{ position: relative; margin: 0; padding: 10px 10px 14px; background: var(--pc-paper);
  box-shadow: 0 14px 24px -14px rgba(20,48,95,.45), 0 1px 3px rgba(20,48,95,.12); }
.g .g-album__f{ position: relative; }
.g .g-album__f img{ aspect-ratio: 4 / 3; object-fit: cover; }
/* Paper photo-corners: two small dark triangles holding the print. */
.g .g-album__f::before, .g .g-album__f::after{
  content: ""; position: absolute; width: 22px; height: 22px; z-index: 1;
  background: #3A2E22; opacity: .82;
}
.g .g-album__f::before{ top: -4px; left: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.g .g-album__f::after{ bottom: -4px; right: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.g .g-album__hand{ margin: 10px 4px 0; padding: 0; border: 0; max-width: none;
  font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--ink); text-align: center; }
.g .g-album__p:nth-child(1){ grid-column: 1 / span 6; transform: rotate(-3deg); z-index: 2; margin-top: var(--s5); }
.g .g-album__p:nth-child(2){ grid-column: 5 / span 5; transform: rotate(2deg); z-index: 3; margin-top: 0; }
.g .g-album__p:nth-child(3){ grid-column: 8 / span 5; transform: rotate(-1deg); z-index: 1; margin-top: var(--s7); }
.g .g-album--2 .g-album__p:nth-child(1){ grid-column: 1 / span 7; }
.g .g-album--2 .g-album__p:nth-child(2){ grid-column: 6 / span 7; margin-top: var(--s7); }
/* The grid lets them overlap; this puts them in one row of the grid. */
.g .g-album__p{ grid-row: 1; }

/* ==== D. Le carrousel =================================================== */
.g .g-car{ margin: var(--s6) 0; }
.g .g-car__track{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(46rem, 72%);
  gap: var(--s5); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
  scrollbar-width: none; padding-bottom: 2px;
}
.g .g-car__track::-webkit-scrollbar{ display: none; }
.g .g-car__track:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 4px; }
.g .g-car__s{ margin: 0; scroll-snap-align: start; min-width: 0; }
.g .g-car__f img{ aspect-ratio: 3 / 2; object-fit: cover; }
.g .g-car__a{ display: block; color: inherit; text-decoration: none; }
.g .g-car__t{ margin: var(--s3) 0 0; font-family: var(--display); font-size: var(--t-h3); color: var(--blue-deep); }
.g .g-car__a:hover .g-car__t{ color: var(--gilt); }
.g .g-car__cap{ margin: var(--s3) 0 0; padding: 0; border: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-small); color: var(--ink-2); }
.g .g-car__bar{ display: flex; align-items: center; justify-content: flex-end; gap: var(--s4); margin-top: var(--s4); }
.g .g-car__btn{
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid var(--gold); border-radius: 50%; cursor: pointer; color: var(--gilt);
}
.g .g-car__btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.g .g-car__btn:hover{ background: var(--gold-wash); }
.g .g-car__btn:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 3px; }
.g .g-car__n{ min-width: 4.5em; text-align: center; font-family: var(--serif); font-size: 15px; letter-spacing: .12em; color: var(--gilt); font-variant-numeric: lining-nums; }

/* ==== E. La mosaïque ==================================================== */
.g .g-mos{ display: grid; gap: var(--s3); margin: var(--s6) 0; }
.g .g-mos__i{ margin: 0; min-width: 0; overflow: hidden; }
.g .g-mos__i img{ width: 100%; height: 100%; object-fit: cover; }
.g .g-mos--lead{ grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(9rem, 14rem); }
.g .g-mos--lead .g-mos__i:first-child{ grid-row: 1 / span var(--mos-rows, 2); }
.g .g-mos--lead.g-mos--4{ --mos-rows: 3; grid-auto-rows: minmax(8rem, 11rem); }
.g .g-mos--lead.g-mos--3{ --mos-rows: 2; }
.g .g-mos--tall{ grid-template-columns: 1fr 1fr; grid-template-rows: minmax(18rem, 28rem) minmax(10rem, 16rem); }
.g .g-mos--tall .g-mos__i:nth-child(3){ grid-column: 1 / -1; }
.g .g-mos--tall.g-mos--4{ grid-template-columns: 1fr 1fr 1fr; }
.g .g-mos--tall.g-mos--4 .g-mos__i:nth-child(1){ grid-row: 1 / span 2; }
.g .g-mos--tall.g-mos--4 .g-mos__i:nth-child(3){ grid-column: auto; }
.g .g-mos--tall.g-mos--4 .g-mos__i:nth-child(4){ grid-column: 2 / -1; }

/* ==== F. Avant / après: the existing slider, its handle gilded ========= */
.g .g-aa .g-ba{ max-width: none; width: 100%; }
.g .g-aa .g-ba__f{ border: 1px solid var(--gold); box-shadow: var(--pc-shadow); }
.g .g-aa .g-ba__handle{ width: 2px; background: linear-gradient(180deg, var(--gold-lit), var(--gold), var(--gold-lit)); }
.g .g-aa .g-ba__handle::after{
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 2px solid var(--gold-lit); background: rgba(20, 48, 95, .62);
  box-shadow: 0 0 0 4px rgba(197,162,74,.28);
}
.g .g-aa .g-ba__handle::before{
  content: "\2039\2003\203A"; position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -54%); color: var(--gold-lit); font-size: 20px; line-height: 1; white-space: nowrap;
}

/* ==== G. La bande ======================================================= */
.g .g-bande{ position: relative; margin: var(--s7) 0; overflow: hidden; }
.g .g-bande:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 4px; }
.g .g-bande__row{ display: flex; gap: var(--s3); width: max-content; }
.g .g-bande__i{ flex: none; margin: 0; height: clamp(9rem, 16vw, 14rem); }
.g .g-bande__i img{ height: 100%; width: auto; max-width: none; }
.g .g-bande__ghost{ display: block; background-size: cover; background-position: center; }
.g .g-bande.is-drifting .g-bande__row{ animation: g-bande-drift var(--bande-s, 90s) linear infinite; }
.g .g-bande.is-drifting:hover .g-bande__row,
.g .g-bande.is-drifting:focus-within .g-bande__row,
.g .g-bande.is-drifting:focus .g-bande__row{ animation-play-state: paused; }
@keyframes g-bande-drift{ from{ transform: translateX(0); } to{ transform: translateX(calc(-50% - var(--s3) / 2)); } }
/* Without the drift (no script, or reduced motion) the strip scrolls by hand. */
.g .g-bande:not(.is-drifting){ overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.g .g-bande:not(.is-drifting) .g-bande__i{ scroll-snap-align: start; }
/* The contact sheet: a strip of film with its sprocket holes and numbers. */
.g .g-bande--contact{ background: #1E1A15; padding: 28px var(--s3) 46px; }
.g .g-bande--contact::before, .g .g-bande--contact::after{
  content: ""; position: absolute; left: 0; right: 0; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 10px, #E9E1CF 10px 22px, transparent 22px 34px);
  -webkit-mask: linear-gradient(#000 0 0); opacity: .85;
}
.g .g-bande--contact::before{ top: 8px; }
.g .g-bande--contact::after{ bottom: 8px; }
.g .g-bande--contact .g-bande__row{ gap: 6px; }
.g .g-bande--contact .g-bande__i{ position: relative; border: 3px solid #1E1A15; }
.g .g-bande__no{ position: absolute; left: 4px; bottom: -22px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: #E0B85A; }
.g .g-bande--contact{ position: relative; }

/* ==== H. Le split ======================================================= */
.g .g-sp{ display: grid; gap: var(--s6); align-items: center; margin: var(--s7) 0; }
.g .g-sp__text > :last-child{ margin-bottom: 0; }
.g .g-sp__media{ position: relative; }
.g .g-sp__main{ margin: 0; }
.g .g-sp__main img{ aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--pc-shadow); }
.g .g-sp__tuck{
  position: absolute; width: 42%; margin: 0; bottom: calc(-1 * var(--s6)); left: calc(-1 * var(--s5));
  padding: 8px; background: var(--pc-paper); box-shadow: var(--pc-shadow); transform: rotate(-2deg);
}
.g .g-sp__tuck img{ aspect-ratio: 1; object-fit: cover; }
.g .g-sp--tuck{ margin-bottom: calc(var(--s7) + var(--s6)); }
@media (min-width: 56rem){
  .g .g-sp{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s8); }
  .g .g-sp--flip{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .g .g-sp--flip .g-sp__media{ order: -1; }
  .g .g-sp--flip .g-sp__tuck{ left: auto; right: calc(-1 * var(--s5)); transform: rotate(2deg); }
  /* The photograph steps out of the column towards the page edge, by as much
     as the margin allows and never more, so the page never scrolls sideways. */
  .g .g-sp__main{ margin-right: calc(-1 * min(var(--s7), max(0px, (100vw - var(--wrap)) / 2))); }
  .g .g-sp--flip .g-sp__main{ margin-right: 0; margin-left: calc(-1 * min(var(--s7), max(0px, (100vw - var(--wrap)) / 2))); }
}

/* ==== I. Plein cadre ==================================================== */
.g .g-plein{
  position: relative; overflow: hidden; margin: var(--s8) 0;
  width: 100dvw; margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw);
  height: clamp(18rem, 58vh, 38rem); background: var(--blue-deep);
}
.g .g-plein__f{ position: absolute; inset: 0; }
.g .g-plein .g-plein__img{ width: 100%; height: 100%; object-fit: cover; }
.g .g-plein__over{
  position: absolute; inset: auto 0 0 0; padding: var(--s8) var(--s5) var(--s7);
  background: linear-gradient(180deg, rgba(14,28,48,0) 0%, rgba(14,28,48,.62) 60%, rgba(14,28,48,.78) 100%);
  text-align: center;
}
.g .g-plein__t{ max-width: var(--m-wide); margin: 0 auto; font-family: var(--display); font-style: italic; font-size: var(--t-h3); line-height: 1.35; color: #FBF7EF; }
.g .g-plein__by{ max-width: none; margin: var(--s3) auto 0; font-family: var(--ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lit); }
@supports (animation-timeline: view()){
  .g .g-plein .g-plein__img{ height: 118%; animation: g-plein-drift linear both; animation-timeline: view(); }
  @keyframes g-plein-drift{ from{ transform: translateY(-15%); } to{ transform: translateY(0); } }
}

/* ==== J. Le médaillon =================================================== */
.g .g-med{ width: clamp(7.5rem, 14vw, 11rem); margin: var(--s2) 0 var(--s4); shape-outside: circle(50%); }
.g .g-med--right{ float: right; margin-left: var(--s5); }
.g .g-med--left{ float: left; margin-right: var(--s5); }
.g .g-med__ring{
  padding: 6px; border-radius: 50%; background: var(--pc-moulding);
  box-shadow: var(--pc-shadow), inset 0 0 0 1px rgba(255,245,210,.6);
}
.g .g-med__ring img{ aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #2B2117; }
.g .g-med--oval{ width: clamp(6.5rem, 12vw, 9.5rem); shape-outside: ellipse(50% 50%); }
.g .g-med--oval .g-med__ring, .g .g-med--oval .g-med__ring img{ border-radius: 50%; }
.g .g-med--oval .g-med__ring img{ aspect-ratio: 4 / 5; }

/* ==== K. Le carnet ====================================================== */
.g .g-carnet{
  position: relative; width: min(18rem, 100%); margin: var(--s4) 0;
  padding: 9px 9px 26px; background: var(--pc-paper);
  box-shadow: 0 12px 22px -12px rgba(20,48,95,.45), 0 1px 3px rgba(20,48,95,.14);
  transform: rotate(2deg);
}
.g .g-carnet--left{ transform: rotate(-2.5deg); }
.g .g-carnet img{ aspect-ratio: 4 / 3; object-fit: cover; }
.g .g-carnet__tape{
  position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; z-index: 1;
  background: rgba(233, 222, 196, .78); transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}

/* ==== L. La carte postale =============================================== */
.g .g-cp{ position: relative; max-width: 30rem; margin: var(--s7) auto; padding-top: 10px; }
.g .g-cp__card{ padding: 14px; background: var(--pc-paper); box-shadow: var(--pc-shadow); transform: rotate(1.4deg); }
.g .g-cp__card img{ aspect-ratio: 3 / 2; object-fit: cover; filter: sepia(.12); }
.g .g-cp__stamp{
  position: absolute; top: -6px; right: -10px; width: 64px; padding: 4px; z-index: 2;
  /* The perforated edge: holes in the outer ring only, the face covers the rest. */
  background: radial-gradient(circle at 4px 4px, transparent 2.4px, #F7F1E3 2.8px) -4px -4px / 8px 8px;
  transform: rotate(4deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
}
.g .g-cp__stamp-in{ display: grid; place-items: center; aspect-ratio: 5 / 6; background: var(--creeper); color: #F7F1E3;
  box-shadow: inset 0 0 0 3px var(--creeper), inset 0 0 0 4px rgba(247,241,227,.6); }
.g .g-cp__stamp-in svg{ width: 62%; height: auto; }
.g .g-cp__mark{
  position: absolute; top: 34px; right: 30px; width: 130px; z-index: 3; transform: rotate(-12deg);
  fill: none; stroke: rgba(43, 33, 23, .55); stroke-width: 1.6; pointer-events: none;
}

/* ==== Small touches ===================================================== */
/* See all: a quiet link that opens the lightbox on the whole set. */
.g .g-seeall{ margin: var(--s4) 0 0; text-align: right; }
.g .g-seeall__b{
  background: none; border: 0; padding: 8px 4px; min-height: 44px; cursor: pointer;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--blue-deep);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px;
}
.g .g-seeall__b:focus-visible{ outline: 2px solid var(--gilt); outline-offset: 3px; }

/* The wax seal beside a signature quote. */
.g .g-seal{ width: 46px; height: 46px; flex: none; filter: drop-shadow(0 2px 2px rgba(60, 20, 10, .35)); }
.g .g-seal__wax{ fill: var(--creeper); }
.g .g-seal__ring{ fill: none; stroke: rgba(255, 220, 200, .35); stroke-width: 1.4; }
.g .g-seal__g{ fill: none; stroke: rgba(255, 228, 210, .6); stroke-width: 2.4; stroke-linecap: round; }

/* The divider, in the engraving's hand. */
.g .g-div{ display: flex; justify-content: center; margin: var(--s7) auto; color: var(--gold); }
.g .g-div svg{ width: min(20rem, 80%); height: auto; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.g .g-div circle{ fill: currentColor; stroke: none; }

/* The slow zoom on a retreat's hero. */
.g .g-zoom{ animation: g-zoom 38s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes g-zoom{ from{ transform: scale(1); } to{ transform: scale(1.08); } }

/* The rise as a photograph comes into view: only once the script has run. */
.g-rv-on .g .g-rv:not(.is-in), .g-rv-on.g .g-rv:not(.is-in){ opacity: 0; transform: translateY(18px); }
.g .g-rv{ transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

/* Lightbox caption set as a museum label, for whenever captions come back. */
.g.g-caps .g-lb__cap{ display: block !important; font-family: var(--serif); font-style: italic; }

/* ==== Phones ============================================================ */
@media (max-width: 40rem){
  /* Frames simplify to a thin gilt line. */
  .g .g-cadre__frame{ padding: 0; background: none; box-shadow: 0 0 0 1px var(--gold), var(--pc-shadow); }
  .g .g-cadre__mount{ padding: 8px; box-shadow: none; }
  .g .g-cadre{ max-width: 100%; }
  .g .g-pp__mount{ padding: 14px; }
  /* The album stacks, still a little tilted. */
  .g .g-album{ grid-template-columns: 1fr; gap: var(--s4); }
  .g .g-album__p:nth-child(n){ grid-column: 1; grid-row: auto; margin: 0 var(--s4); }
  .g .g-album__p:nth-child(1){ transform: rotate(-1.5deg); }
  .g .g-album__p:nth-child(2){ transform: rotate(1deg); }
  .g .g-album__p:nth-child(3){ transform: rotate(-.5deg); }
  .g .g-car__track{ grid-auto-columns: 84%; gap: var(--s3); }
  .g .g-car__bar{ justify-content: center; }
  .g .g-mos--lead, .g .g-mos--tall, .g .g-mos--tall.g-mos--4{ grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 9rem; }
  .g .g-mos .g-mos__i:first-child{ grid-column: 1 / -1; grid-row: span 2; }
  .g .g-mos--tall .g-mos__i:nth-child(n+2){ grid-column: auto; grid-row: auto; }
  .g .g-mos--3 .g-mos__i:nth-child(3), .g .g-mos--tall.g-mos--3 .g-mos__i:nth-child(3){ grid-column: auto; }
  /* Four on a phone: the lead across, two side by side, the last across, so no square is left empty. */
  .g .g-mos--4 .g-mos__i:nth-child(4){ grid-column: 1 / -1; }
  .g .g-sp__tuck{ width: 38%; left: auto; right: -6px; bottom: -18px; }
  .g .g-sp--tuck{ margin-bottom: var(--s8); }
  .g .g-med{ width: 6.5rem; }
  .g .g-carnet{ margin-left: auto; margin-right: auto; width: min(16rem, 86%); }
  .g .g-cp__card{ padding: 9px; transform: rotate(.8deg); }
  .g .g-cp__stamp{ width: 50px; right: -2px; }
  .g .g-cp__mark{ width: 96px; right: 14px; top: 28px; }
  .g .g-plein{ height: clamp(16rem, 52vh, 26rem); }
}

/* ==== Reduced motion: nothing moves at all ============================== */
@media (prefers-reduced-motion: reduce){
  .g .g-rv, .g-rv-on .g .g-rv:not(.is-in){ opacity: 1 !important; transform: none !important; transition: none !important; }
  .g .g-bande__row, .g .g-zoom, .g .g-plein .g-plein__img{ animation: none !important; transform: none !important; }
  .g .g-plein .g-plein__img{ height: 100% !important; }
  .g .g-car__track{ scroll-behavior: auto; }
}

/* ==== The itinerary day with its journal photograph ===================== */
/* The day's drawing sits faint behind the pinned photograph. */
.g .g-journey__card--pic{ grid-template-columns: minmax(0, 1fr) 16rem; }
.g .g-journey__pic{ position: relative; display: grid; place-items: center; }
.g .g-journey__card--pic .g-journey__pic .g-journey__ill{ position: absolute; inset: 0; width: auto; opacity: .16; display: grid; place-items: center; }
.g .g-journey__card--pic .g-journey__pic .g-journey__ill svg{ width: 80%; }
.g .g-journey__card--pic .g-carnet{ position: relative; z-index: 1; margin: var(--s3) 0; }
@media (max-width: 40rem){
  .g .g-journey__card--pic{ grid-template-columns: 1fr; }
  .g .g-journey__card--pic .g-journey__pic .g-journey__ill{ display: none; }
}

/* ==== /design only: the specimen page's own arrangement ================= */
.g .g-design__row{ display: grid; gap: var(--s6); align-items: end; }
@media (min-width: 56rem){ .g .g-design__row{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g .g-design__row .g-cadre, .g .g-design__row .g-pp{ margin: var(--s4) auto; width: 100%; }
.g .g-design__prose{ max-width: var(--m-wide); }
.g .g-design__prose::after{ content: ""; display: table; clear: both; }
.g .g-design__quote{ display: flex; align-items: center; gap: var(--s4); margin: var(--s5) 0; }
.g .g-design__q{ margin: 0; font-family: var(--display); font-style: italic; font-size: var(--t-h3); color: var(--blue-deep); }
.g .g-design__hero{ overflow: hidden; height: clamp(14rem, 40vw, 26rem); }
.g .g-design__hero img{ width: 100%; height: 100%; object-fit: cover; }