/* The main site's header and footer, scoped to .asp-chrome. Generated by
   abbayesaintpierre/tools/shop_chrome.py from site/style.css: do not edit. */
/* ==========================================================================
   charter/css/tokens.css -- the Abbaye Saint-Pierre palette and typefaces

   One definition for all four sites: parchment ground, ink text, rubric red,
   EB Garamond over IM Fell DW Pica. Every site loads this first. A site may
   re-declare a token in its own layer (the farm uses a green accent for
   --rubrique); it should not invent a second name for the same colour.

   The faces themselves are in charter/fonts/ (fonts.css, SIL OFL 1.1).
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------
   Values are the charter's own, unchanged. */
:root{
  --papier:#F3ECDC;      /* parchment page ground */
  --papier2:#EAE1CC;     /* second parchment, panels and pills */
  --encre:#1C1A16;       /* ink: body text, dark bands, footer */
  --rubrique:#A1261C;    /* rubric red: the one accent */
  --ecarlate:#C5372A;    /* brighter red, sparingly */
  --sang:#6E1410;        /* deep red */
  --sepia:#6B5637;       /* secondary text */
  --filet:#C9BB97;       /* rules and borders */
  --or:#B08A2E;          /* discreet gold, as on an illuminated initial */
  --creme:#F6D9B8;       /* warm cream, for text on dark photography */
  --foot-text:#D8CFB8;   /* footer body text on ink */

  --serif:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --display:"IM Fell DW Pica",Georgia,serif;
  --caps:"IM Fell DW Pica SC","IM Fell DW Pica",Georgia,serif;

  --wrap:1180px;
  --measure:36em;
  --gutter:clamp(1rem,4vw,2rem);
}

.asp-chrome{font-family:var(--serif);color:var(--encre);font-size:1.1rem;line-height:1.5}
.asp-chrome *,.asp-chrome *::before,.asp-chrome *::after{box-sizing:border-box}
.asp-chrome a{color:inherit}
.asp-chrome ul{padding:0}
.asp-chrome .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.asp-chrome .small{font-size:.95rem}
.asp-chrome .top{
  position:sticky;top:0;z-index:40;
  background:rgba(243,236,220,.96);backdrop-filter:blur(6px)
}
.asp-chrome .top__in{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;min-height:68px}
.asp-chrome .brand{display:flex;align-items:center;text-decoration:none;color:var(--encre);flex:0 0 auto}
.asp-chrome .brand:hover{color:var(--encre);text-decoration:none}
.asp-chrome .brand__logo{width:clamp(124px,20vw,208px);height:auto;flex:none;opacity:.92;transition:opacity .25s}
.asp-chrome .brand:hover .brand__logo{opacity:1}
.asp-chrome .mainnav{display:flex;align-items:center;gap:.5rem}
.asp-chrome .mainnav__toggle summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  font-family:var(--caps);letter-spacing:.06em;font-size:1rem;
  padding:.5rem .9rem;border:1px solid var(--filet);min-height:44px
}
.asp-chrome .mainnav__toggle summary::-webkit-details-marker{display:none}
.asp-chrome .mainnav__toggle summary::after{
  content:"";width:.6rem;height:.6rem;border-right:1.5px solid var(--encre);
  border-bottom:1.5px solid var(--encre);transform:rotate(45deg) translate(-2px,-2px)
}
.asp-chrome .mainnav__toggle[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.asp-chrome .mainnav__list{
  list-style:none;display:none;flex-direction:column;gap:.1rem;margin:0;
  position:absolute;left:0;right:0;top:100%;background:var(--papier);
  border-bottom:1px solid var(--filet);padding:.8rem var(--gutter) 1.2rem;
  max-height:75vh;overflow:auto
}
.asp-chrome .mainnav__toggle[open] ~ .mainnav__list{display:flex}
.asp-chrome .mainnav__list a:not(.btn){
  font-family:var(--caps);font-size:1.02rem;letter-spacing:.05em;color:var(--encre);
  text-decoration:none;padding:.5rem 0;display:block;border-bottom:1px solid transparent
}
.asp-chrome .mainnav__list a:not(.btn):hover,.asp-chrome .mainnav__list a:not(.btn)[aria-current="true"]{color:var(--rubrique);border-bottom-color:var(--rubrique)}
@media(min-width:70rem){.asp-chrome .top__in{flex-wrap:nowrap}.asp-chrome .mainnav__toggle{display:none}.asp-chrome .mainnav__list,.asp-chrome .mainnav__toggle[open] ~ .mainnav__list{
    display:flex;position:static;flex-direction:row;align-items:center;gap:1rem;
    border:0;padding:0;background:none;max-height:none;overflow:visible
  }.asp-chrome .mainnav__list a:not(.btn){padding:.4rem 0;white-space:nowrap}}
.asp-chrome .skip{
  position:absolute;left:.5rem;top:-4rem;z-index:100;background:var(--rubrique);color:#fff;
  padding:.7rem 1.1rem;text-decoration:none;font-family:var(--caps);letter-spacing:.06em;transition:top .15s
}
.asp-chrome .skip:focus{top:.5rem;color:#fff}
.asp-chrome .foot{background:var(--encre);color:var(--foot-text);margin-top:3.5rem;padding:3rem 0 2rem;font-size:1.02rem}
.asp-chrome .foot a{color:var(--foot-text);text-decoration:none}
.asp-chrome .foot a:hover{color:#fff;text-decoration:underline}
.asp-chrome .foot h2{font-family:var(--caps);letter-spacing:.09em;font-size:1rem;color:#fff;margin:0 0 .6rem}
.asp-chrome .foot ul{list-style:none;margin:0}
.asp-chrome .foot li{margin:.25rem 0}
.asp-chrome .foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:40rem){.asp-chrome .foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.asp-chrome .foot-grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.asp-chrome .foot-note{border-top:1px solid #3A342A;margin-top:2rem;padding-top:1.2rem;font-size:.92rem;color:#A99C85}
@media print{.asp-chrome .top,.asp-chrome .foot,.asp-chrome .skip{display:none}}
.asp-chrome .wrap > *,.asp-chrome .foot-grid > *{ min-width:0; }
.asp-chrome .foot a{overflow-wrap:anywhere;}
.asp-chrome .top__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1rem;padding-block:.35rem;}
.asp-chrome .mainnav{grid-column:2;grid-row:1;}
.asp-chrome .mainnav__desktop{display:none;}
.asp-chrome .mainnav__toggle{display:block;}
.asp-chrome .mainnav__toggle .mainnav__list{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:.1rem;padding:.8rem var(--gutter) 1.2rem;border-bottom:1px solid var(--filet);background:var(--papier);max-height:65vh;overflow:auto;}
.asp-chrome .mainnav__list a:not(.btn)[aria-current="page"]{color:var(--rubrique);border-bottom-color:var(--rubrique);}
@media(min-width:70rem){.asp-chrome .top__in{grid-template-columns:minmax(0,1fr) auto;}.asp-chrome .mainnav{grid-column:1/-1;grid-row:2;justify-content:center;}.asp-chrome .mainnav__desktop{display:block;max-width:100%;}.asp-chrome .mainnav__toggle{display:none;}.asp-chrome .mainnav__desktop .mainnav__list{display:flex;position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.1rem 1rem;padding:0;border:0;max-height:none;overflow:visible;}.asp-chrome .mainnav__list a:not(.btn){white-space:normal;}}
.asp-chrome .foot :focus-visible{outline-color:var(--creme);}
@media print{.asp-chrome .top,.asp-chrome .foot,.asp-chrome .skip{display:none!important;}}
@media print{.asp-chrome .wrap{max-width:none;padding-inline:0;}}
@media print{.asp-chrome .small{color:#000!important;}}