/* ===========================================================================
   Editorial / journal treatment — experimental, homepage only.

   Loaded after style.css and scoped entirely under body.ed, so every other
   page is untouched. To roll it out, add class="ed" to a page's <body> and
   link this file; to abandon it, delete the file and the two references.

   The idiom is a scholarly journal title page: a ruled masthead, a display
   statement, a scope line, the Courbet set as a plate with a catalogue
   caption rather than as a banner with text laid over it, and the prose
   below in a text column with a drop cap.
   =========================================================================== */

body.ed {
  --paper: #faf8f3;
  --ink: #16140f;
  --muted: #6f685c;
  --rule: #16140f;
  --measure: 34rem;

  background: var(--paper);
  color: var(--ink);
  font-family: "Adobe Caslon Pro", Georgia, serif;
}

body.ed ::selection { background: #e8e0cc; }

/* --- masthead ------------------------------------------------------------ */

/* style.css fixes the header to the viewport and positions its three parts
   with floats, orders and margins tuned to that. All of it is reset here so
   the masthead can simply sit at the top of the page in normal flow. */
.ed .si-hr,
.ed .si-hr--act,
.ed .si-hr--btf {
  position: relative;
  background: var(--paper);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 1.35rem 0 0;
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 -4px 0 -3px var(--rule);   /* the thin half of a double rule */
  display: block;
  transition: none;
}

.ed .si-hr-lo,
.ed .si-hr-nv,
.ed .si-hr-lk,
.ed .si-hr-nv__item,
.ed .si-hr-lk__item {
  position: static;
  float: none;
  order: 0;
  margin: 0;
  padding: 0;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  height: auto;
  min-height: 0;
  align-self: center;
  /* style.css gives .si-hr-lo a hard viewport width (44.5vw, 33vw, 21.5vw by
     breakpoint). Left in place it makes the centre grid track that width
     instead of the wordmark's, so the nowrap title overflowed its cell to the
     right and sat off centre. The grid sizes the tracks here. */
  width: auto;
}

.ed .si-hr__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(92vw, 68rem);
  margin: 0 auto;
  padding-bottom: 1.1rem;
}

/* grid-row is explicit on all three: auto-placement fills left to right and
   never backtracks, so the toggles (last in the DOM, first in the layout)
   would otherwise start a second row. */
.ed .si-hr-lo { grid-column: 2; grid-row: 1; margin: 0; }
.ed .si-hr-nv { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; width: auto; }
.ed .si-hr-lk { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; width: auto; gap: 1.6rem; }

.ed .si-hr-lo__container { border: 0; }
.ed .si-hr-lo__title {
  font-family: "Adobe Caslon Pro", serif;
  font-variant: small-caps;
  font-size: clamp(17px, 2.2vw, 23px);
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.ed .si-hr-lk,
.ed .si-hr--btf .si-hr-lk {
  display: flex;
  justify-content: flex-end;
}
.ed .si-hr-lk__item { width: auto; font-size: 15px; }
.ed .si-hr-lk__link,
.ed .si-hr-nv__item--login a {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 16px;
  border: 0;
  color: var(--ink);
}
.ed .si-hr-lk__link[aria-current="page"] { font-style: italic; }
.ed .si-hr-lk__link:hover,
.ed .si-hr-nv__item--login a:hover { text-decoration: underline; }

/* The hamburger duplicates the inline nav once that is visible. */
@media (min-width: 800px) {
  .ed .si-hr-nv__item--menu { display: none; }
}

/* Three balanced columns do not fit a phone: the wordmark is the widest
   thing on the page and was running off the right edge. Two columns, and
   let it wrap. */
@media (max-width: 700px) {
  .ed .si-hr__container {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
  }
  .ed .si-hr-nv { grid-column: 1; }
  .ed .si-hr-lo { grid-column: 2; justify-self: end; }
  /* style.css empties the inline links below 800px but the list is still
     placed in column 3, and in a two-column template that leaves its gap
     behind as a phantom track — 14px of dead space holding the wordmark
     off the right edge while the hamburger sits flush left. */
  .ed .si-hr-lk { display: none; }
  .ed .si-hr-lo__title {
    white-space: normal;
    text-align: right;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.2;
  }
}

/* --- page frame ---------------------------------------------------------- */

/* style.css gives every <main> margin-top:95px to clear the fixed header.
   The masthead is in normal flow here, so that margin was just a cream gap
   between it and the band. */
.ed .ed-main {
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.ed-page {
  width: min(92vw, 68rem);
  margin: 0 auto;
  padding: 0 0 6rem;
}

.ed-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --- title block --------------------------------------------------------- */

/* The band is a child of the full-width <main>, so it spans edge to edge
   without negative margins. Faking the bleed from inside the centred column
   overshot by the width of the scrollbar and gave the page a horizontal
   scrollbar. */
.ed-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(360px, 54vh, 600px);
  padding: clamp(3rem, 8vw, 6rem) 4vw;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ed-title__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: -2;
}
/* Holds the type over the painting wherever the crop lands. */
.ed-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%,
      rgba(12, 10, 6, 0.62) 0%, rgba(12, 10, 6, 0.44) 55%, rgba(12, 10, 6, 0.12) 100%),
    linear-gradient(to bottom, rgba(12, 10, 6, 0.3) 0%, rgba(12, 10, 6, 0) 35%);
}
.ed-title__inner { position: relative; }

.ed-display {
  color: #faf8f3;
  text-shadow: 0 1px 24px rgba(12, 10, 6, 0.45);
  font-family: "Adobe Caslon Pro", serif;
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.ed-display em { font-style: italic; }

/* --- plate + text -------------------------------------------------------- */

.ed-body {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.ed-text { max-width: var(--measure); margin: 0 auto; }

.ed-text { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.62; }

.ed-lead { margin: 0 0 1.5rem; }
.ed-lead::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  font-weight: 400;
}

.ed-services {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: svc;
}
.ed-services li {
  counter-increment: svc;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 1.05rem;
}
.ed-services li::before {
  content: counter(svc, upper-roman) ".";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2.4rem;
  text-align: right;
  font-variant: small-caps;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- notes at the foot of the page --------------------------------------- */

.ed-notes {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .ed-notes { grid-template-columns: 1fr 1fr; }
}

.ed-label {
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #d9d2c4;
}
.ed-note p { margin: 0; font-size: 17.5px; line-height: 1.62; }
.ed-venues { font-style: italic; }
.ed-venues span { font-style: normal; color: var(--muted); }

/* --- call to action ------------------------------------------------------ */

.ed-cta {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.ed-cta a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.95rem 2.4rem;
  border: 1px solid var(--ink);
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.ed-cta a span:first-child {
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: from-font;
}
.ed-cta__arrow { transition: transform 0.2s; }
.ed-cta a:hover {
  background: var(--ink);
  color: var(--paper);
}
.ed-cta a:hover .ed-cta__arrow { transform: translateX(0.22em); }

/* --- footer -------------------------------------------------------------- */

.ed .si-fr {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  margin-top: 0;
}
.ed .si-fr-mu__link,
.ed .si-fr-mu__item b {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 15px;
  color: var(--muted);
  font-weight: 400;
}
.ed .si-fr-mu__link:hover { color: var(--ink); }

/* --- menu overlay, in paper ---------------------------------------------- */

.ed .si-hr-mu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper);
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
}
.ed .si-hr-mu__container {
  width: min(92vw, 68rem);
  margin: 0 auto;
  padding: 1.6rem 0 0.5rem;
}
.ed .si-hr-mu__list { margin-top: 0; }
.ed .si-hr-mu__item {
  font-family: "Adobe Caslon Pro", serif;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 30px;
  padding: 0.3em 0;
}

/* --- language ------------------------------------------------------------
   The old control was a bare "fr", which says nothing about what it does.
   Both languages are named here, each in its own language, with the current
   one set in ink and the other as the link — so the pair reads as a state
   and a choice rather than an unexplained abbreviation. For a translator it
   also demonstrates the service in the masthead.
   ------------------------------------------------------------------------- */

.ed .ed-lang {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 15px;
  white-space: nowrap;
}
.ed .ed-lang__current { color: var(--ink); }
.ed .ed-lang__sep { color: #c6bfae; }
.ed .ed-lang a {
  color: var(--muted);
  border: 0;
  transition: color 0.2s;
}
.ed .ed-lang a:hover,
.ed .ed-lang a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Below 800px the masthead has no room for the pair, so only the choice
   remains — still a word rather than an abbreviation. 800px is also where
   the theme swaps the inline links for the hamburger: with the pair in
   place the left column's content would then outgrow its 1fr share and
   push the centre column, and the wordmark with it, off centre. */
@media (max-width: 799px) {
  .ed .ed-lang__current,
  .ed .ed-lang__sep { display: none; }
}

/* ===========================================================================
   Interior pages
   Everything below restyles markup that already exists in style.css, so the
   pages need no structural change — only body class="ed" and this sheet.
   =========================================================================== */

/* --- generic page: privacy, confirmation, 404 ---------------------------- */

.ed .pg {
  background: var(--paper);
  color: var(--ink);
  font-family: "Adobe Caslon Pro", Georgia, serif;
  font-size: 19px;
  line-height: 1.62;
  text-align: left;
  margin-top: 0;
}
.ed .pg__container {
  width: min(92vw, 68rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
}
.ed .pg__content {
  max-width: var(--measure);
  margin: 0 auto;
  width: auto;
  text-align: left;
}

.ed .pg__heading,
.ed .pg__subheading {
  font-family: "Adobe Caslon Pro", serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  text-align: center;
  border: 0;
  padding: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.ed .pg__content h2 {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 2.4rem 0 0.6rem;
}
.ed .pg__content p { margin: 0 0 1.1rem; }
.ed .pg__content ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.ed .pg__content li { margin-bottom: 0.35rem; }
.ed .pg__content li p { margin: 0 0 0.35rem; }
.ed .pg a { color: var(--ink); border-bottom: 1px solid #c6bfae; }
.ed .pg a:hover { border-bottom-color: var(--ink); }

/* --- work: a bibliography rather than a card grid ------------------------ */

.ed .is-dp { background: var(--paper); padding: 0; }
.ed .is-dp__container {
  width: min(92vw, 68rem);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
}
/* style.css floats this label beside the entries; with .is-dp__main at
   width:100% that pushed the grid off the right edge of the page. The label
   now sits above its section, ruled off like a journal heading. */
.ed .is-dp__header {
  float: none;
  clear: both;
  width: auto;
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
}
.ed .is-dp__heading {
  font-family: "Adobe Caslon Pro", serif;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 17px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.ed .is-dp__heading br { display: none; }

.ed .is-dp__main {
  display: grid;
  /* style.css indents this to clear the floated label; with the label now
     stacked above, the indent pushed the grid past the right edge. */
  margin-left: 0;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 3vw, 2.6rem);
  width: 100%;
}
@media (min-width: 720px)  { .ed .is-dp__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ed .is-dp__main { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ed .is-dp__article {
  margin: 0 0 1.9rem;
  padding: 0;
  text-align: left;
}
.ed .is-dp__author {
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 14px;
  text-transform: none;
  color: var(--muted);
  margin: 0 0 0.25rem;
}
.ed .is-dp__title {
  font-family: "Adobe Caslon Pro", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 400;
  margin: 0;
}
.ed .is-dp__title a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  opacity: 1;
  transition: border-color 0.2s;
}
.ed .is-dp__title a:hover {
  opacity: 1;
  border-bottom-color: var(--ink);
}

/* --- contact ------------------------------------------------------------- */

/* style.css gives .sb min-height:100vh and every <main> a 95px top margin to
   clear its fixed header. With the masthead in normal flow and the form
   shorter than the viewport, that left a large empty band between the submit
   button and the footer. */
.ed .sb {
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
}
.ed .sb, .ed .sb-hr { background: var(--paper); }
.ed .sb-hr { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem); }
/* style.css makes this a flex row above 960px, heading left and form right,
   which left the heading shrunk to its own text. The journal idiom wants one
   centred column, so the heading sits above the form. */
.ed .sb-hr__container {
  display: block;
  width: min(92vw, 68rem);
  margin: 0 auto;
  background: transparent !important;
  overflow: visible;
}
/* The heading and the form now share one column, so a heading centred in
   that column is centred on the form rather than on the whole page. */
.ed .sb-hr__header {
  width: auto;
  max-width: var(--measure);
  margin: 0 auto 2.4rem;
}
.ed .sb-hr__heading {
  font-family: "Adobe Caslon Pro", serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 0.6rem;
}
.ed .sb-hr__desc { text-align: center; color: var(--muted); font-size: 18px; }
/* style.css makes this a flex row, which left the form shrunk to its
   content and sitting left of the column it is supposed to fill. */
.ed .sb-hr__list {
  display: block;
  max-width: var(--measure);
  margin: 0 auto;
  width: auto;
}
.ed .au__section { width: 100%; margin: 0; }

.ed .au__fields { background: transparent; }
.ed .au__inner { padding: 0; }
.ed .au-fm { display: block; }
.ed .au-fm__label,
.ed .au-fm__label--2,
.ed .au-fm__label--message {
  display: block;
  width: 100%;
  font-family: "Adobe Caslon Pro", serif;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 16px;
  color: var(--muted);
  margin: 1.5rem 0 0;
}
.ed .au-fm__required { color: #9a3b33; }

/* Rules under the fields rather than boxes around them: closer to a form
   set in type than a web widget. */
.ed .au-fm__field,
.ed .au-fm__message {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: "Adobe Caslon Pro", serif;
  font-size: 19px;
  color: var(--ink);
  padding: 0.45rem 0;
  margin: 0.35rem 0 0;
  width: 100%;
  transition: border-color 0.2s;
}
.ed .au-fm__message { line-height: 1.55; min-height: 9rem; resize: vertical; }
.ed .au-fm__field:focus,
.ed .au-fm__message:focus { border-bottom-width: 2px; }

.ed .au-fm > div { width: 100%; margin-top: 2rem; }
.ed .au-fm__submit {
  display: inline-flex;
  width: auto;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: "Adobe Caslon Pro", serif;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.15em;
  font-size: 18px;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ed .au-fm__submit:hover { background: var(--ink); color: var(--paper); }
.ed .au-fm__arrow { display: none; }