/* ===== charter/css/tokens.css ===== */
/* ==========================================================================
   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);
}

/* ===== charter/css/base.css ===== */
/* ==========================================================================
   charter/css/base.css -- shared components of the Abbaye Saint-Pierre sites

   The rules that abbatia.abbayesaintpierre.org, ferme.abbayesaintpierre.org
   and www.patrimoinedesabbayes.org had in common, word for word, extracted
   so they live once: page frame, header and menu, language bar, page head,
   body text, figures, bands, footer, accessibility basics.

   Needs tokens.css before it. A site's own layer (src/site.css) comes after
   and may override anything here. Change a rule here and it changes on every
   site that uses base.css: check them all.
   ========================================================================== */
:root{
 padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:border-box}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--papier:#F3ECDC;--encre:#1C1A16}}
:root[data-theme="dark"]{--papier:#F3ECDC;--encre:#1C1A16}
html{overflow-x:clip;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--papier);color:var(--encre);font-family:"EB Garamond",Garamond,Georgia,serif;font-size:1.22rem;line-height:1.6;
 background-image:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.35),transparent 60%)}
img{max-width:100%}
a{color:var(--rubrique);text-underline-offset:.16em;text-decoration-thickness:1px}
.sc{font-family:"IM Fell DW Pica SC","EB Garamond",serif;letter-spacing:.06em}
.r{color:var(--rubrique)}
[hidden]{display:none!important}
/* top */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(243,236,220,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--filet);box-shadow:0 1px 0 #fff inset}
.top__in{max-width:1260px;margin:0 auto;padding:.45rem 1.5rem;display:flex;align-items:center;gap:1.4rem;position:relative}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--encre)}
.brand img{height:50px;width:auto}
.brand span{font-family:"IM Fell DW Pica SC",serif;font-size:.95rem;line-height:1.05;letter-spacing:.08em}
.top nav{margin-left:auto}
.top nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.15rem;align-items:center}
.top nav li{position:relative}
.top nav a{font-family:"IM Fell DW Pica SC",serif;font-size:.98rem;letter-spacing:.05em;color:var(--encre);text-decoration:none;padding:.4rem 0;display:block;white-space:nowrap;border-bottom:1px solid transparent}
.top nav li.key>a{color:var(--rubrique)}
.top nav ul ul{display:none;position:absolute;left:-1rem;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--papier);border:1px solid var(--filet);padding:.5rem 1rem;min-width:250px;box-shadow:0 14px 30px rgba(28,26,22,.14)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--filet);font:inherit;font-family:"IM Fell DW Pica SC",serif;padding:.3rem .7rem;color:var(--encre)}
/* title page */
.tp{padding:3.2rem 1.5rem 2.6rem;text-align:center;border-bottom:1px solid var(--filet)}
.tp__in{max-width:780px;margin:0 auto;border:1px solid var(--encre);outline:1px solid var(--encre);outline-offset:5px;padding:2.6rem 1.5rem 2.2rem;background:rgba(255,255,255,.22)}
.tp__pax{font-family:"IM Fell DW Pica SC",serif;color:var(--rubrique);letter-spacing:.5em;margin:0 0 1.2rem;font-size:1rem;padding-left:.5em}
.tp h1{margin:0;font-weight:400;font-family:"IM Fell DW Pica",serif;line-height:1.02}
.tp h1 span{display:block}
.tp .l1{font-size:clamp(1.75rem,7.4vw,5.2rem);letter-spacing:.03em;text-transform:uppercase}
.tp .l2{font-size:clamp(1.15rem,4vw,2.7rem);color:var(--rubrique);letter-spacing:.14em;text-transform:uppercase;margin:.35rem 0}
.tp .l3{font-size:clamp(1.5rem,5.6vw,3.9rem);letter-spacing:.09em;text-transform:uppercase}
.tp__sub{font-size:1.28rem;line-height:1.45;margin:1.5rem 0 1rem}
.tp__mark{height:120px;width:auto;margin:.4rem auto .6rem;display:block}
.tp__imp{font-size:1.05rem;line-height:1.45;margin:0 0 1.5rem;border-top:1px solid var(--encre);padding-top:1rem;display:inline-block}
/* page head */
.ph{border-bottom:1px solid var(--filet);background:linear-gradient(180deg,rgba(255,255,255,.3),transparent)}
.ph__in{max-width:900px;margin:0 auto;padding:3.4rem 1.5rem 2.4rem;text-align:center}
.ph__k{font-family:"IM Fell DW Pica SC",serif;color:var(--rubrique);letter-spacing:.22em;margin:0 0 .6rem;font-size:1rem}
.ph h1{font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;margin:0}
.ph__s{font-style:italic;font-size:1.3rem;max-width:40em;margin:1rem auto 0;color:#3a342a}
.ph__in::after{content:"❦";display:block;color:var(--rubrique);margin-top:1.2rem;font-size:1.3rem}
/* body */
.body{max-width:740px;margin:0 auto;padding:2.8rem 1.5rem 4.5rem}
.body>*:first-child{margin-top:0}
h2{font-family:"IM Fell DW Pica SC",serif;font-weight:400;font-size:1.65rem;letter-spacing:.05em;margin:3rem 0 .7rem;padding-bottom:.35rem;border-bottom:1px solid var(--filet);color:var(--encre)}
h2::first-letter{color:var(--rubrique)}
h3{font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:1.5rem;margin:0 0 .3rem}
p{margin:0 0 1rem;hyphens:auto}
.drop{font-size:1.32rem;line-height:1.55;text-align:justify}
.drop::first-letter{font-family:"IM Fell DW Pica",serif;float:left;font-size:4.6em;line-height:.8;padding:.06em .08em 0 0;color:var(--rubrique)}
.note{font-size:1rem;color:var(--sepia);border-left:2px solid var(--filet);padding-left:1rem;margin-top:2rem}
.fleuron{text-align:center;color:var(--rubrique);font-size:1.6rem;margin:2.2rem 0}
li{margin:.35rem 0}
blockquote{margin:3rem auto;text-align:center;max-width:32em}
blockquote p{font-family:"IM Fell DW Pica",serif;font-style:italic;font-size:1.75rem;line-height:1.3;margin:0 0 .6rem}
blockquote cite{font-style:normal;font-family:"IM Fell DW Pica SC",serif;letter-spacing:.06em;color:var(--sepia);font-size:1rem}
.wide,.plate,.gal,.tri,.facts,.figs,.band,.fig{width:min(1180px,calc(100vw - 3rem));margin-left:50%;transform:translateX(-50%)}
.plate{margin-top:0;margin-bottom:2.6rem;text-align:center}
.fig{width:min(940px,calc(100vw - 3rem));margin-top:2.2rem;margin-bottom:2.2rem}
.fig img{width:100%;display:block;border:1px solid var(--filet)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-top:2rem;margin-bottom:2rem}
.gal figure{margin:0}
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:1.6rem;margin-bottom:1rem}
.tri a{color:var(--encre);text-decoration:none;border-top:3px double var(--encre);padding-top:1rem;display:block}
.tri a:hover img{filter:none}
.tri .n{display:block;font-family:"IM Fell DW Pica",serif;color:var(--rubrique);font-size:1.5rem;margin:.8rem 0 0}
.tri h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.06em;font-size:1.55rem}
.tri p{font-size:1.1rem;line-height:1.5}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);margin-top:1rem;margin-bottom:3rem}
.facts div{padding:1.1rem 1rem;text-align:center;border-left:1px solid var(--filet)}
.facts div:first-child{border-left:0}
.facts b{display:block;font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:2.5rem;color:var(--rubrique);line-height:1}
.facts span{font-size:1rem;font-style:italic}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:2rem;margin-top:0;margin-bottom:2.6rem}
.figs article{display:flex;gap:1.2rem;align-items:flex-start}
.figs img{width:150px;flex:none;border:1px solid var(--encre);padding:4px;background:#fff;filter:sepia(.2)}
.figs .d{font-family:"IM Fell DW Pica SC",serif;color:var(--rubrique);letter-spacing:.08em;margin:0 0 .4rem}
.figs p{font-size:1.1rem;line-height:1.5}
.progs article{display:flex;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--filet)}
.progs .n{font-family:"IM Fell DW Pica",serif;font-size:2rem;color:var(--rubrique);flex:0 0 2.6rem;text-align:right;line-height:1.1}
.progs p{margin:0 0 .4rem;font-size:1.14rem}
.progs .st{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.07em;font-size:.95rem;color:var(--sepia);margin:0}
.priors{columns:3 200px;column-gap:2rem;list-style:none;padding:0;font-size:1.05rem;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);padding:1rem 0}
.priors li{break-inside:avoid;margin:.1rem 0}
.priors b{font-weight:500;color:var(--rubrique);font-feature-settings:"onum";margin-right:.4rem}
.tbl{overflow-x:auto;margin:1.2rem 0 1.6rem}
table{border-collapse:collapse;width:100%;font-size:1.05rem}
th{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--encre);border-top:3px double var(--encre);padding:.5rem .7rem;color:var(--rubrique)}
td{padding:.5rem .7rem;border-bottom:1px solid var(--filet);vertical-align:top}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 0;justify-content:flex-start}
.tp .btns,.band .btns{justify-content:center}
.btn{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.08em;font-size:1.02rem;text-decoration:none;padding:.6rem 1.3rem;border:1px solid var(--rubrique);background:var(--rubrique);color:#fff}
.btn:hover{background:#7d1b13;color:#fff}
.btn--2{background:transparent;color:var(--rubrique)}
.btn--2:hover{background:var(--rubrique);color:#fff}
.btn--inv.btn--2{color:#F3ECDC;border-color:#F3ECDC}
.band>div{max-width:760px;margin:0 auto}
.band h2{color:#fff;border:0;margin:0 0 .6rem;font-size:1.8rem}
.band h2::first-letter{color:#E9B7A9}
/* .band.band--l, not .band--l: each site defines its own .band (dark) in its
   layer, which loads after this file, and at equal specificity the later rule
   would win and turn the light band dark. */
.band.band--l{background:var(--papier2);color:var(--encre)}
.band--l h2{color:var(--encre)}
.body>.band:last-child{margin-bottom:-4.5rem}
.newsitem{border-bottom:1px solid var(--filet);padding:1.2rem 0}
.newsitem .d{font-family:"IM Fell DW Pica SC",serif;color:var(--sepia);letter-spacing:.06em;margin:0;font-size:.98rem}
.newsitem h2{border:0;margin:.2rem 0 .4rem;font-family:"IM Fell DW Pica",serif;font-size:1.6rem;letter-spacing:0}
.newsitem h2 a{color:inherit;text-decoration:none}
.newsitem h2 a:hover{color:var(--rubrique)}
.foot{background:var(--encre);color:#D8CFB8;font-size:1.02rem}
.foot a{color:#D8CFB8;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .sc{color:#fff;margin:0 0 .6rem;font-size:1.05rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:.2rem 0}
.foot__b{max-width:1180px;margin:0 auto;padding:1rem 1.5rem 1.6rem;border-top:1px solid rgba(255,255,255,.15);font-size:.95rem;opacity:.85}
.plate--page img{max-width:620px}
@media(max-width:600px){.tp{padding:1.6rem .9rem 1.8rem}.tp__in{padding:1.8rem .8rem 1.6rem;outline-offset:3px}.tp__sub{font-size:1.1rem}.tp__imp{font-size:.95rem}.brand span{font-size:.8rem}.brand img{height:42px}}
img{height:auto}
.top{transition:box-shadow .3s}

/* ===== src/site.css ===== */
/* ==========================================================================
   ferme.abbayesaintpierre.org -- the farm's own layer.
   Loaded after charter/css/tokens.css and charter/css/base.css (see build.py);
   only what differs from the shared charter belongs here. The typefaces are
   the charter's (charter/fonts/fonts.css): no third-party request, as the
   legal notice states.
   ========================================================================== */
.top nav a:hover{border-bottom-color:var(--rubrique);color:var(--rubrique)}
/* Where you are is shown by a rule in ink, so the single tinted item stays the accent and
   not a second thing to decode. */
.top nav li.cur>a,.top nav a[aria-current="page"]{border-bottom-color:currentColor}
.top nav ul ul a[aria-current="page"]{border-bottom-color:transparent;font-style:italic}
@media(min-width:1101px){
 .top nav>ul>li.gs{padding-left:1.15rem;border-left:1px solid var(--filet)}
 .top nav>ul>li.ge{padding-right:1.15rem;border-right:1px solid var(--filet)}
}
/* the submenu toggle is a mobile control only: on a pointer screen hover and focus do the work */
.subt{display:none}
@media(min-width:1101px){.top nav li:hover>ul,.top nav li:focus-within>ul{display:flex}}
@media(max-width:1100px){
 .burger{display:block}
 .top nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--filet);padding:.8rem 1.5rem;max-height:75vh;overflow:auto}
 .top nav.open{display:block}
 .top nav>ul{flex-direction:column;align-items:stretch;gap:0}
 .top nav>ul>li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--filet)}
 .top nav>ul>li:last-child{border-bottom:0}
 .top nav>ul>li>a{flex:1 1 auto;padding:.7rem 0}
 /* groups are closed until asked for, rather than every submenu shown at once */
 .top nav ul ul{display:none;flex-basis:100%;position:static;border:0;box-shadow:none;padding:0 0 .5rem .9rem;min-width:0;background:none}
 .top nav>ul>li.open>ul{display:flex}
 .top nav ul ul a{padding:.45rem 0;font-size:.94rem}
 .subt{display:block;flex:none;width:2.9rem;min-height:2.9rem;background:none;border:0;padding:0;color:var(--encre);cursor:pointer;position:relative}
 .subt::before{content:"";position:absolute;top:50%;left:50%;width:.55rem;height:.55rem;margin:-.4rem 0 0 -.3rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
 .subt[aria-expanded="true"]::before{transform:rotate(-135deg);margin-top:-.15rem}
}
@media(max-width:1100px) and (prefers-reduced-motion:reduce){.subt::before{transition:none}}
/* Photographs are shown as photographs: a hairline and nothing else. The white mount and
   the sepia wash belong to .illum, which carries reproductions of historical works and is
   the only place where a mount says something true. */
.plate img{width:100%;display:block;border:1px solid var(--filet);box-sizing:border-box}
.plate figcaption,.fig figcaption,.gal figcaption{font-style:italic;font-size:1.06rem;line-height:1.45;color:var(--sepia);margin-top:.7rem}
.gal img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid var(--filet);box-sizing:border-box}
.gal figcaption{font-size:1rem;line-height:1.4}
.tri img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:filter .3s;border:1px solid var(--filet);filter:brightness(.97)}
@media (prefers-reduced-motion:reduce){.tri img{transition:none}}
.band{width:var(--bleed,100vw);background:var(--encre);color:var(--papier);text-align:center;padding:3.2rem 1.5rem;box-sizing:border-box;margin-top:3.5rem;margin-bottom:0}
.foot__in{max-width:1180px;margin:0 auto;padding:3rem 1.5rem 1.6rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:820px){.foot__in{grid-template-columns:1fr 1fr}.figs article{flex-direction:column}.facts div{border-left:0;border-top:1px solid var(--filet)}body{font-size:1.14rem}.drop{text-align:left}}
/* ============================================================
   SCEA Abbaye Saint Pierre de Lacour - farm layer over base.css
   Same charter as patrimoinedesabbayes.org: same paper, ink,
   rules and typography. The primary accent moves from the
   abbey red to the estate green; the red is kept for links
   back to the heritage sites of the cluster.
   ============================================================ */
:root{
  --rubrique:#4F6B3A;      /* primary accent: estate green (was abbey red) */
  --abbaye:#A1261C;        /* heritage red, for cluster cross-links */
  --miel:#92661F;          /* honey gold - dark enough for white text (5.1:1) */
  --terre:#B4552F;         /* terracotta */
  --eau:#3E6A71;           /* water blue - dark enough for white text (6.0:1) */
  --brun:#6B5637;          /* deep brown = sepia */
  --vert-clair:#7E9A5F;
  --ombre:0 18px 40px rgba(28,26,22,.16);
}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ---------------- keyboard access ---------------- */
.skip{position:fixed;left:.6rem;top:-4rem;z-index:1000;background:var(--rubrique);color:#fff;
  font-family:"IM Fell DW Pica SC",serif;letter-spacing:.06em;padding:.6rem 1.1rem;text-decoration:none;
  transition:top .18s}
.skip:focus{top:.6rem}
:focus-visible{outline:2px solid var(--rubrique);outline-offset:2px}
main:focus{outline:none}
.para :focus-visible,.hero :focus-visible{outline-color:#fff}
/* ---------------- historical reproductions ----------------
   Illuminations, engravings and paintings are NOT photographs of this estate and must
   never be mistaken for them. They sit on a white mount inside a ruled frame, like a
   plate in a book, and carry a source line naming the work, its date, the holding
   institution and the licence. No sepia filter - it would wreck a manuscript's colour. */
.illum{margin:2.8rem 0}
.illum img{width:100%;display:block;background:#fff;padding:12px;border:1px solid var(--filet);
  box-sizing:border-box;filter:none}
.illum figcaption{font-style:italic;font-size:1rem;line-height:1.5;color:var(--brun);
  margin-top:.6rem;max-width:44em}
.illum figcaption .src{display:block;margin-top:.3rem;font-style:normal;font-size:.84rem;
  letter-spacing:.01em;opacity:.85}
/* a wider plate for a full calendar page or a bird's-eye engraving */
.illum--wide{width:min(1180px,calc(100vw - 3rem));margin-left:50%;transform:translateX(-50%)}
.illum--wide figcaption{margin-left:auto;margin-right:auto;text-align:center;max-width:52em}
/* two reproductions side by side */
.illums{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;margin:2.6rem 0}
.illums figure{margin:0}
.illums img{width:100%;display:block;background:#fff;padding:8px;border:1px solid var(--filet);box-sizing:border-box}
.illums figcaption{font-style:italic;font-size:.95rem;line-height:1.45;color:var(--brun);margin-top:.5rem}
.illums figcaption .src{display:block;margin-top:.25rem;font-style:normal;font-size:.8rem;opacity:.85}
/* A page that must not go live as it stands says so on the page itself, in the abbey
   red, not only in a note someone has to find. Delete the block from the fragment when
   the gap is filled - the comment above it in each legal fragment says so. */
.warn{border:1px solid var(--abbaye);border-left:5px solid var(--abbaye);
  background:rgba(161,38,28,.06);padding:1rem 1.2rem;margin:0 0 2.2rem}
.warn p{margin:0;font-size:1.02rem;line-height:1.5}
.warn b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.05em;
  color:var(--abbaye);display:block;margin-bottom:.3rem;font-size:1.05rem}
/* ---------------- tables ----------------
   Numeric columns are marked class="n". They had no rule at all, so they
   inherited the left alignment of every other cell and the figures did not
   line up. Right-aligned, tabular figures, and the column no longer wraps. */
.tbl table .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.tbl table th.n{text-align:right}
.tbl table .sum th,.tbl table .sum td{border-top:1px solid var(--encre);border-bottom:0}
/* a value spanning every season column belongs to all of them, so centre it
   rather than pinning it to the right edge of the last one */
.tbl table td[colspan]{text-align:center}
/* captions stay below the table: base.css sets .spec caption{caption-side:bottom},
   which is right for a source note. Do not override it here. */
/* first column carries the label: let it breathe, keep it from collapsing */
.tbl table td:first-child,.tbl table th:first-child{padding-left:0}
.tbl table td:last-child,.tbl table th:last-child{padding-right:0}
/* a table wider than its column gets a fade at the edge, so it is clear it slides */
.tbl.scrolls{position:relative}
.tbl.scrolls::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.4rem;pointer-events:none;
  background:linear-gradient(90deg,rgba(243,236,220,0),rgba(243,236,220,.92))}
.tbl.scrolls:focus-visible{outline:2px solid var(--rubrique);outline-offset:2px}
/* the archival reference under a plate, quieter than the caption itself */
figcaption .src{display:block;margin-top:.35rem;font-style:normal;font-size:.84rem;
  letter-spacing:.01em;color:var(--brun);opacity:.85}
.top.scrolled{box-shadow:0 6px 24px rgba(28,26,22,.12)}
/* reveal on scroll ------------------------------------------------ */
/* Scoped to .js so that without JavaScript nothing is ever hidden. */
.js .rv{opacity:0;translate:0 26px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none;transition:none}}
/* full-bleed helper ------------------------------------------------ */
.bleed{width:var(--bleed,100vw);margin-left:50%;transform:translateX(-50%);box-sizing:border-box}
/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:min(78svh,720px);overflow:hidden;background:var(--encre);display:grid;place-items:center}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;justify-self:stretch;align-self:stretch;background-size:cover;background-position:center;transform:scale(1.04)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,22,.62),rgba(28,26,22,.52) 45%,rgba(28,26,22,.72));pointer-events:none}
.hero__in{position:relative;z-index:2;max-width:820px;padding:3rem 1.5rem;text-align:center;color:#fff}
.hero__k{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.3em;font-size:.95rem;margin:0 0 .9rem;color:#fff;text-transform:uppercase}
.hero h1{font-family:"IM Fell DW Pica",serif;font-weight:400;line-height:1.05;margin:0;color:#fff;font-size:clamp(2rem,5.6vw,4rem);letter-spacing:.02em}
.hero__s{font-size:clamp(1.05rem,2.2vw,1.42rem);line-height:1.4;margin:1.1rem auto 0;max-width:34em;color:#F3ECDC}
.hero .btns{justify-content:center;margin-top:1.8rem}
.hero .btn--2{color:#fff;border-color:#fff;background:transparent}
.hero .btn--2:hover{background:#fff;color:var(--encre)}
.hero__cap{position:absolute;right:1rem;bottom:.7rem;z-index:3;color:#fff;font-style:italic;font-size:.88rem;opacity:.75;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media(max-width:600px){.hero{min-height:auto}.hero__in{padding:2.4rem 1.1rem}.hero__cap{display:none}}
/* ---------------- sticky section nav ---------------- */
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 3.6rem);z-index:30;background:rgba(234,225,204,.97);backdrop-filter:blur(6px);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.subnav ul{display:flex;gap:0;list-style:none;margin:0 auto;padding:0;max-width:1260px;overflow-x:auto;scrollbar-width:thin}
.subnav li{flex:none}
.subnav a{display:block;padding:.55rem 1rem;font-family:"IM Fell DW Pica SC",serif;font-size:.95rem;letter-spacing:.05em;color:var(--encre);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover,.subnav a.on{color:var(--rubrique);border-bottom-color:var(--rubrique)}
/* ---------------- section shells ---------------- */
.sec{padding:3.6rem 0 .5rem}
.sec--alt{background:var(--papier2);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:3.6rem 0 3rem;margin:3.5rem 0}
.kick{font-family:"IM Fell DW Pica SC",serif;color:var(--rubrique);letter-spacing:.22em;font-size:.92rem;margin:0 0 .35rem;text-align:center;text-transform:uppercase}
.sec-t{font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;text-align:center;margin:0 0 .6rem;border:0;letter-spacing:0}
.sec-s{text-align:center;font-style:italic;color:#3a342a;max-width:38em;margin:0 auto 2.2rem;font-size:1.16rem}
.wrap{width:min(1180px,calc(100vw - 3rem));margin:0 auto}
/* ---------------- activity cards ---------------- */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.9rem;margin-top:1.8rem}
.act{display:flex;flex-direction:column;border-top:3px double var(--encre);padding-top:1rem;text-decoration:none;color:var(--encre)}
.act figure{margin:0 0 .9rem;overflow:hidden;border:1px solid var(--filet)}
.act img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.act:hover img{transform:scale(1.06)}
.act h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.05em;font-size:1.4rem;margin:0 0 .3rem;transition:color .3s}
.act:hover h3{color:var(--rubrique)}
.act p{font-size:1.05rem;line-height:1.5;margin:0 0 .7rem}
.act .more{margin-top:auto;font-family:"IM Fell DW Pica SC",serif;letter-spacing:.07em;color:var(--rubrique);font-size:.95rem}
.act .more::after{content:"\2009\2192"}
/* ---------------- key figures ---------------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);margin:2.4rem 0}
.figures div{padding:1.15rem 1rem;text-align:center;border-left:1px solid var(--filet)}
.figures div:first-child{border-left:0}
.figures b{display:block;font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:clamp(1.8rem,5vw,2.4rem);color:var(--rubrique);line-height:1;font-variant-numeric:lining-nums}
.figures span{font-size:.98rem;font-style:italic;display:block;margin-top:.25rem}
/* ---------------- certification block ---------------- */
.cert{border:1px solid var(--encre);outline:1px solid var(--encre);outline-offset:5px;background:rgba(255,255,255,.4);padding:1.9rem 1.6rem;margin:2.6rem 0 2rem}
.cert h2,.cert h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.06em;font-size:1.35rem;margin:0 0 .2rem;color:var(--rubrique)}
.cert dl{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:.25rem 1.1rem;margin:.9rem 0 0;font-size:1.02rem}
.cert dt{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.05em;color:var(--brun)}
.cert dd{margin:0}
.cert .verify{margin:1rem 0 0;font-size:.98rem}
@media(max-width:44em){.cert dl{grid-template-columns:1fr;gap:0}.cert dd{margin:0 0 .5rem}}
/* scope table: the certificate's own product directory */
.scope{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:1.04rem}
.scope th{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.06em;text-align:left;border-top:3px double var(--encre);border-bottom:1px solid var(--encre);padding:.5rem .7rem;color:var(--rubrique);white-space:nowrap}
.scope td{padding:.6rem .7rem;border-bottom:1px solid var(--filet);vertical-align:top}
.scope td:first-child{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.04em;white-space:nowrap;width:1%}
.scope .tag{font-family:"IM Fell DW Pica SC",serif;font-size:.85rem;letter-spacing:.08em;color:var(--rubrique);border:1px solid var(--rubrique);padding:.05rem .45rem;white-space:nowrap}
/* ---------------- crop lists ---------------- */
.crops{columns:3 190px;column-gap:2rem;list-style:none;padding:1rem 0;margin:1.2rem 0;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);font-size:1.04rem}
.crops li{break-inside:avoid;margin:.12rem 0;padding-left:1.1rem;position:relative}
.crops li::before{content:"\2022";position:absolute;left:0;color:var(--rubrique)}
.crops li i{font-style:italic;color:var(--brun);font-size:.95em}
/* ---------------- accordions ---------------- */
.acc{border-top:1px solid var(--filet);margin:1.6rem 0}
.acc details{border-bottom:1px solid var(--filet)}
.acc summary{cursor:pointer;padding:.75rem 2rem .75rem 0;font-family:"IM Fell DW Pica SC",serif;letter-spacing:.05em;font-size:1.12rem;position:relative;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;color:var(--rubrique);font-size:1.3rem;line-height:1}
.acc details[open] summary::after{content:"\2212"}
.acc summary:hover{color:var(--rubrique)}
.acc summary:focus-visible{outline:2px solid var(--rubrique);outline-offset:2px}
.acc .in{padding:0 0 1.1rem;font-size:1.06rem;line-height:1.55}
.acc .in>*:first-child{margin-top:0}
.acc .in>*:last-child{margin-bottom:0}
/* ---------------- research project cards ---------------- */
.projs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.6rem;margin:2rem 0}
.proj{border:1px solid var(--filet);background:rgba(255,255,255,.42);padding:1.35rem 1.35rem 1.2rem;display:flex;flex-direction:column}
.proj .st{font-family:"IM Fell DW Pica SC",serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--rubrique);padding:.1rem .55rem;align-self:flex-start;margin-bottom:.7rem}
.proj .st--eval{background:var(--brun)}
.proj .st--run{background:var(--eau)}
.proj .st--prep{background:var(--miel)}
.proj h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.04em;font-size:1.24rem;margin:0 0 .45rem;line-height:1.25}
.proj p{font-size:1.02rem;line-height:1.5;margin:0 0 .8rem}
/* A portfolio card states four things and nothing else: the question, what makes it testable
   here, what the farm can do, and what must come from a partner. The last block sits on the
   baseline of the card so the cards line up however long the question runs. */
.proj .el{font-size:.97rem;line-height:1.45;margin:0 0 .65rem}
.proj .el b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.05em;color:var(--brun);display:block;font-size:.84rem;text-transform:uppercase;margin-bottom:.12rem}
.proj .el--q{margin-bottom:.9rem}
.proj .el:last-child{margin-top:auto;border-top:1px solid var(--filet);padding-top:.7rem;margin-bottom:0;color:var(--brun)}
.proj .role{margin-top:auto;border-top:1px solid var(--filet);padding-top:.7rem;font-size:.97rem;color:var(--brun)}
.proj .role b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.05em;color:var(--encre);display:block;font-size:.88rem;text-transform:uppercase;margin-bottom:.15rem}
/* ---------------- offer / seek two-column lists ---------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin:2rem 0}
.duo h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.05em;font-size:1.3rem;margin:0 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--filet)}
.duo ul{margin:0;padding-left:1.15rem;font-size:1.05rem}
@media(max-width:760px){.duo{grid-template-columns:1fr;gap:1.6rem}}
/* ---------------- split (text + image) ---------------- */
.split2{display:grid;grid-template-columns:1.05fr 1fr;gap:2.8rem;align-items:center;margin:2.6rem 0}
.split2 figure{margin:0}
.split2 img{width:100%;display:block;border:1px solid var(--filet);box-sizing:border-box}
.split2 figcaption{font-style:italic;font-size:.96rem;color:var(--brun);margin-top:.5rem}
.split2--rev figure{order:-1}
@media(max-width:860px){.split2{grid-template-columns:1fr;gap:1.5rem}.split2--rev figure{order:0}}
/* ---------------- process steps ---------------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.6rem 0}
.steps li{counter-increment:s;position:relative;padding:.85rem 0 .85rem 3.1rem;border-bottom:1px solid var(--filet);font-size:1.06rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:.8rem;width:2rem;text-align:right;font-family:"IM Fell DW Pica",serif;font-size:1.65rem;color:var(--rubrique);line-height:1.1}
.steps b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.04em;display:block}
/* ---------------- notices ---------------- */
/* a hero for an inside page: enough for a title, not a full screen */
.hero--short{min-height:min(58svh,540px)}
/* two wide cards rather than the auto-fit three */
.acts--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
/* a list of conditions, each one a point of fact */
.ticks{list-style:none;padding:0;margin:1.5rem 0}
.ticks li{position:relative;padding-left:1.7rem;margin:.6rem 0;font-size:1.05rem;line-height:1.5}
.ticks li::before{content:"\2713";position:absolute;left:0;top:-.05em;color:var(--rubrique);font-size:1.05em}
/* small print that still has to be read */
.fine{font-size:.95rem;line-height:1.55;color:var(--brun)}
.claim{border-left:3px solid var(--miel);background:rgba(146,102,31,.08);padding:.9rem 1.1rem;margin:1.8rem 0;font-size:1.02rem}
.claim b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.05em}
/* ---------------- full-bleed image band with a quotation ---------------- */
/* place-items: <align-items> <justify-items>. Justify must stay `stretch`,
   otherwise the grid children shrink to max-content instead of filling. */
.para{position:relative;min-height:56vh;display:grid;place-items:center stretch;overflow:hidden;color:#fff;text-align:center;
  width:var(--bleed,100vw);margin-left:50%;transform:translateX(-50%);background:var(--encre)}
/* Two-class selector so it outranks `.para>div` below, which would otherwise
   make the backdrop position:relative. justify-self/align-self must be stretched
   too: an absolutely positioned grid child inherits place-items:center from the
   grid and would otherwise shrink to fit its (empty) content. */
.para>.para__bg{position:absolute;inset:0;width:100%;height:100%;justify-self:stretch;align-self:stretch;background-size:cover;background-position:center}
.para::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,22,.46),rgba(28,26,22,.30) 45%,rgba(28,26,22,.62))}
/* width:100% is required: the `auto` side margins that centre this block would
   otherwise suppress grid stretch and leave it at max-content width. */
.para>div{position:relative;z-index:2;width:100%;max-width:860px;margin:0 auto;padding:4rem 1.6rem;box-sizing:border-box}
.para p{font-family:"IM Fell DW Pica",serif;font-style:italic;font-size:clamp(1.4rem,3.2vw,2.35rem);line-height:1.28;color:#fff;margin:0 0 .7rem;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.para cite{font-style:normal;font-family:"IM Fell DW Pica SC",serif;letter-spacing:.14em;color:#E7DFC8;font-size:.95rem}
@media(max-width:600px){.para{min-height:44vh}.para>div{padding:2.6rem 1.2rem}}
/* ---------------- wide figure ---------------- */
.figw{width:min(1180px,calc(100vw - 3rem));margin-left:50%;transform:translateX(-50%);margin-top:2.4rem;margin-bottom:2.4rem}
.figw img{width:100%;display:block;border:1px solid var(--filet);box-sizing:border-box}
.figw figcaption{font-style:italic;font-size:.98rem;color:var(--brun);margin-top:.6rem;text-align:center}
/* ---------------- photo grid ---------------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:2rem 0}
.grid3 figure{margin:0}
.grid3 img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border:1px solid var(--filet);box-sizing:border-box}
.grid3 figcaption{font-style:italic;font-size:.95rem;line-height:1.4;color:var(--brun);margin-top:.45rem}
/* ---------------- equipment / specification table ---------------- */
.spec{width:100%;border-collapse:collapse;margin:1.2rem 0 1.8rem;font-size:1.03rem}
.spec caption{caption-side:bottom;font-style:italic;font-size:.94rem;color:var(--brun);text-align:left;padding-top:.6rem}
.spec th{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.06em;text-align:left;border-top:3px double var(--encre);border-bottom:1px solid var(--encre);padding:.5rem .7rem;color:var(--rubrique)}
.spec td{padding:.55rem .7rem;border-bottom:1px solid var(--filet);vertical-align:top}
.spec .n{text-align:right;white-space:nowrap;font-variant-numeric:lining-nums;width:1%}
.spec tr.sum td,.spec tr.sum th{border-top:1px solid var(--encre);border-bottom:3px double var(--encre);font-family:"IM Fell DW Pica SC",serif;letter-spacing:.04em}
/* ---------------- pull quote inside body ---------------- */
.pull{border-left:3px solid var(--rubrique);padding:.2rem 0 .2rem 1.3rem;margin:2rem 0;font-family:"IM Fell DW Pica",serif;font-style:italic;font-size:1.35rem;line-height:1.35;color:#3a342a}
/* ---------------- elsewhere-in-the-world box ---------------- */
.world{border:1px solid var(--filet);background:rgba(255,255,255,.4);padding:1.3rem 1.4rem;margin:2rem 0}
.world h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.06em;font-size:1.12rem;margin:0 0 .5rem;color:var(--brun);text-transform:uppercase}
.world p{font-size:1.04rem;line-height:1.55;margin:0 0 .6rem}
.world p:last-child{margin-bottom:0}
/* ---------------- call band ---------------- */
.band .btn--2{color:#F3ECDC;border-color:#F3ECDC}
.band h2::first-letter{color:#B7C9A2}
/* ---------------- cluster strip (sister sites) ---------------- */
.cluster{border-top:1px solid var(--filet);padding:2rem 0 .5rem;margin-top:3rem}
.cluster h2{text-align:center;border:0;font-size:1.3rem;margin:0 0 1.2rem}
.cluster h2::first-letter{color:var(--abbaye)}
.cluster ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem}
.cluster a{display:block;text-decoration:none;color:var(--encre);border:1px solid var(--filet);padding:1rem 1.1rem;background:rgba(255,255,255,.35);height:100%;box-sizing:border-box}
.cluster a:hover{border-color:var(--abbaye)}
/* an entity in the cluster that has no site yet: same card, dashed, not clickable */
.cluster .soon{display:block;border:1px dashed var(--filet);padding:1rem 1.1rem;background:rgba(255,255,255,.2);height:100%;box-sizing:border-box}
.cluster .soon .n{color:var(--brun)}
.cluster .n{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.05em;font-size:1.1rem;color:var(--abbaye);display:block;margin-bottom:.2rem}
.cluster p{font-size:.98rem;line-height:1.45;margin:0;color:var(--brun)}
/* ---------------- footer ---------------- */
.foot{background:var(--encre);color:#D9D1BC;padding:2.8rem 1.5rem 1.6rem;margin-top:0}
.foot__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
.foot h3{font-family:"IM Fell DW Pica SC",serif;letter-spacing:.07em;font-size:1rem;color:#fff;margin:0 0 .6rem;text-transform:uppercase}
.foot ul{list-style:none;padding:0;margin:0;font-size:1rem;line-height:1.75}
.foot a{color:#D9D1BC;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot p{font-size:1rem;line-height:1.55;margin:0 0 .6rem}
.foot__b{max-width:1180px;margin:2rem auto 0;border-top:1px solid #3A362E;padding-top:1rem;font-size:.92rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;color:#9B9486}
@media(max-width:800px){.foot__in{grid-template-columns:1fr;gap:1.6rem}}
/* ---------------- language switcher ---------------- */
.langs{display:flex;gap:.3rem;justify-content:flex-end;background:var(--papier2);border-bottom:1px solid var(--filet);padding:.2rem 1.5rem;font-family:"IM Fell DW Pica SC",serif;font-size:.85rem;letter-spacing:.08em}
.langs a{color:var(--brun);text-decoration:none;padding:.1rem .4rem}
.langs a.on{color:var(--rubrique);border-bottom:1px solid var(--rubrique)}
.langs a:hover{color:var(--rubrique)}
/* ---------------- misc ---------------- */
.page h2::first-letter{color:var(--rubrique)}
.lead{font-size:1.24rem;line-height:1.55}
.lead::first-letter{font-family:"IM Fell DW Pica",serif;float:left;font-size:4.2em;line-height:.8;padding:.06em .09em 0 0;color:var(--rubrique)}
.body--wide{max-width:960px}
.src{font-size:.95rem;color:var(--brun);font-style:italic;margin-top:.7rem}
a.ext::after{content:"\2009\2197";font-size:.85em}
/* ============================================================
   Reading layer. Everything below adjusts how the page reads
   rather than what it contains: the measure of running text,
   the amount of air between sections, and the size of the
   captions. Kept together so it can be judged as one decision.
   ============================================================ */

/* --- measure ---
   Running prose is capped in ch, so the line length holds whatever the container is
   doing. Figures, tables and bands are not prose and are deliberately left out: they
   keep the full width of .body--wide. */
:root{--measure:68ch}
.body>p,.body>ul,.body>ol,.body>dl,.body>h2,.body>h3,.body>h4,.body>.note,.body>.fine{max-width:var(--measure)}
.body>h2,.body>h3{max-width:24ch}
.split2 p,.acc p,.acc li,.proj p{max-width:none}
.lead{max-width:72ch}
/* --- vertical rhythm ---
   More air, fewer rules. A change of paper already says "new section"; a border on top
   of it says it twice. */
.sec{padding:5rem 0 .5rem}
.sec--alt{border-top:0;border-bottom:0;padding:5rem 0 4.2rem;margin:5rem 0}
.sec-s{margin-bottom:2.8rem}
.body>h2{margin-top:3.4rem}
.body>h2:first-child{margin-top:0}
.body>p+p{margin-top:1.15rem}
.figw,.illum,.illum--wide{margin-top:3rem;margin-bottom:3rem}
@media(max-width:700px){
 .sec{padding:3.2rem 0 .5rem}
 .sec--alt{padding:3.2rem 0 2.8rem;margin:3.2rem 0}
 .body>h2{margin-top:2.6rem}
}
/* --- hero ---
   Taller on a desktop screen, and set against the left edge on the same 1260px line as
   the masthead, so the first thing read starts where every other page starts. Below
   900px it returns to centred: there is no left column to align to. */
@media(min-width:901px){
 .hero{min-height:min(85svh,880px);place-items:center stretch}
 .hero--short{min-height:min(62svh,640px)}
 /* same 1260px box and same 1.5rem gutter as .top__in, so the first line of the page
    starts on the masthead's left edge rather than near it */
 /* .top__in is content-box, so its outer width is 1260 + the 1.5rem gutter on each side.
    Matching that total with border-box puts the two left edges on the same pixel without
    risking an overflow on the narrow end of the range. */
 .hero__in{max-width:calc(1260px + 3rem);width:100%;margin:0 auto;box-sizing:border-box;
   text-align:left;padding:3.5rem 1.5rem}
 .hero h1{max-width:17em}
 .hero__s{margin-left:0;margin-right:0;max-width:33em}
 .hero .btns{justify-content:flex-start}
 .hero__cap{right:1.5rem;bottom:1rem}
}
/* --- epigraph from the Rule ---
   The same device as the cultuelle site of the abbey: the Latin as it stands, the
   translation beneath it, the chapter named. One per page, and only where a verified text
   genuinely bears on what the page describes - an epigraph added for decoration would be
   the opposite of the register it is meant to carry. */
.body blockquote.rule{margin:0 auto 2.4rem;max-width:40rem;text-align:center;padding:0 1rem}
.body blockquote.rule p{font-family:"IM Fell DW Pica",serif;font-style:italic;
  font-size:1.25rem;line-height:1.5;margin:0 0 .4rem;color:var(--encre)}
.body blockquote.rule .tr{display:block;font-style:normal;font-family:"EB Garamond",serif;
  font-size:1.02rem;line-height:1.45;color:var(--brun);margin-top:.45rem}
.body blockquote.rule cite{font-family:"IM Fell DW Pica SC",serif;font-style:normal;
  letter-spacing:.12em;font-size:.85rem;color:var(--rubrique)}
/* --- named things ---
   Where the specific names are the argument rather than an illustration of it, they get
   room: the name in the display face and one line saying why it is here. Used high on a
   page, before the reader has agreed to read a list. */
.names{list-style:none;margin:1.9rem 0;padding:1.5rem 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:1.4rem 2.2rem;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.names li{margin:0}
.names b{display:block;font-family:"IM Fell DW Pica",serif;font-weight:400;font-size:1.3rem;line-height:1.15}
.names i{display:block;font-style:italic;color:var(--brun);font-size:.95rem;margin-top:.1rem}
.names span{display:block;font-size:1rem;line-height:1.45;color:var(--brun);margin-top:.4rem}
/* --- captions ---
   Captions here carry information, not decoration, so they are set close to the size of
   the text they sit beside rather than shrunk out of the way. */
.split2 figcaption,.figw figcaption{font-size:1.06rem;line-height:1.45;margin-top:.7rem}
.grid3 figcaption,.illums figcaption{font-size:1.02rem;line-height:1.45}
.illum figcaption{font-size:1.06rem}
/* --- motion ---
   One gesture on imagery and one on links. Both are opt-out. */
.plate img,.figw img,.split2 img{transition:filter .35s}
.plate a:hover img,.figw a:hover img{filter:brightness(1.04)}
.act{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.act:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
 .act,.act img,.plate img,.figw img,.split2 img,.top{transition:none}
 .act:hover{transform:none}
 .act:hover img{transform:none}
 .hero__bg{transform:none}
}
/* --- sticky sub-navigation ---
   The offset is the masthead's real height, declared once: the 50px brand mark plus the
   .45rem of padding above and below it and the hairline under it, which is 65.4px. The
   previous 3.6rem was 6px short, so the two bars overlapped as soon as the page moved.
   Deep links then clear both bars rather than landing underneath them. */
:root{--toph:4.1rem}
.subnav{top:calc(env(safe-area-inset-top,0px) + var(--toph));border-top:0}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--toph) + 2.6rem)}
/* German compounds are longer than a phone column. Let the browser hyphenate them with its
   own dictionary, and keep a plain break as the backstop for every language. */
html[lang="de"] body{hyphens:auto}
h1,h2,h3,h4,p,li,dd,dt,figcaption,span,td,th{overflow-wrap:break-word}
/* A table keeps a minimum width according to how many columns it carries, so that on a narrow
   screen the wrapper scrolls instead of the columns collapsing to one word per line. The
   affordance on .tbl.scrolls already tells the reader there is more to the right. */
.tbl table.c2{min-width:24rem}
.tbl table.c3{min-width:34rem}
.tbl table.c4{min-width:42rem}
/* A limit on its own reads as a refusal. Each one is followed by the arrangement that answers
   it, set apart by a rule and the small-caps label used elsewhere for a named field. */
.claim .fix{margin:.75rem 0 0;padding-top:.65rem;border-top:1px solid var(--filet);font-size:.97rem;color:var(--brun)}
.claim .fix b{font-family:"IM Fell DW Pica SC",serif;font-weight:400;letter-spacing:.05em;color:var(--encre);display:block;font-size:.84rem;text-transform:uppercase;margin-bottom:.12rem}