/* ---------------------------------------------------------------------------
   Bernadette Beauwin — portfolio

   The catalogue this is built from is a printed object: landscape spreads,
   wide margins, thin black corner brackets, a pale grey square offset behind
   them, hollow display capitals for the chapter titles, and captions set small
   and right-aligned with a little triangle aimed at the painting. Those five
   devices are the whole design system; the rest is white space and restraint.

   Committed to light: the paintings are photographed on white, and a dark
   ground would change how their colour reads.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper: #ffffff;
  --paper-warm: #fbfbf9;
  --ink: #141414;
  --ink-soft: #5a5a5a;
  --ink-faint: #8e8e8e;
  --grey-block: #e7e7e7;
  --grey-line: #dcdcdc;

  --display: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
  --body: 'Lato', 'Segoe UI', 'Helvetica Neue', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 1280px;
  --bracket: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Chrome ------------------------------------------------------------- */

/* Opaque rather than translucent-with-backdrop-filter: the page behind it is
   white anyway, so the blur bought nothing and cost a composited layer that
   painted incorrectly in some engines. */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--grey-line);
}
body.is-editing .site-head { top: var(--ed-bar, 46px); }

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 74px;
}

.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.brand-role {
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-faint);
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); }
.site-nav > a {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  padding-block: .4rem; border-bottom: 1px solid transparent;
}
.site-nav > a:hover, .site-nav > a[aria-current] { border-bottom-color: var(--ink); }

.langs { display: flex; gap: .5rem; padding-left: 1rem; border-left: 1px solid var(--grey-line); }
.langs a {
  font-size: .68rem; letter-spacing: .1em; color: var(--ink-faint);
  padding: .15rem .3rem;
}
.langs a:hover { color: var(--ink); }
.langs a.on { color: var(--ink); border-bottom: 1px solid var(--ink); }

.navtoggle, .burger { display: none; }

/* --- The catalogue's marks ---------------------------------------------- */

/* A thin L. `.bracket-tl` opens top-left, `.bracket-br` bottom-right — the
   two the printed pages use to frame a block without boxing it in. */
.bracket { position: absolute; width: clamp(48px, 6vw, 86px); aspect-ratio: 1; pointer-events: none; }
.bracket-tl { border-top: var(--bracket) solid var(--ink); border-left: var(--bracket) solid var(--ink); }
.bracket-br { border-bottom: var(--bracket) solid var(--ink); border-right: var(--bracket) solid var(--ink); }

/* The pale square that sits half-behind a bracket or a title. */
.grey-block { position: absolute; background: var(--grey-block); pointer-events: none; z-index: -1; }

/* Hollow display capitals. The stroke is the whole effect, so where the
   browser has no `-webkit-text-stroke` the @supports block below keeps the
   type solid and legible rather than invisible. */
.hollow, .solid {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  font-size: var(--title-size);
  margin: 0;
}
.hollow { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
@supports not (-webkit-text-stroke: 1px black) {
  .hollow { color: var(--ink); }
}
.solid { color: var(--ink); }

/* A title with its bracket and grey square.

   Both marks used to be positioned against the surrounding block in px, so
   they drifted out of register with the type as the heading resized. Here the
   wrapper owns the font size, the heading inherits it, and the marks are
   placed in `em` — so the three stay locked together at every viewport width.

   The marks are siblings of the heading rather than children: the heading's
   text is edited in place, and saving replaces its textContent, which would
   otherwise delete them. */
.marked {
  --title-size: clamp(2.1rem, 6.5vw, 4.4rem);
  position: relative;
  display: block;
  font-size: var(--title-size);
  padding: .40em 0 0 .22em;
}
/* Offset to the left of the first letter, as in the printed pages. At left:0
   a solid title covers the square completely — only the outlined ones let it
   show through, which is why it looked inconsistent between pages. */
.marked > .grey-block {
  top: .26em; left: -.28em;
  width: .92em; height: .78em;
}
.marked > .bracket-tl {
  top: 0; left: .10em;
  width: .74em;
}
/* Everything after the heading goes back to body type. */
.marked + *, .marked ~ * { font-size: initial; }

.marked-sm { --title-size: clamp(1.5rem, 4vw, 2.5rem); }

/* Caption with a triangle aimed at its picture. */
.caption {
  font-size: .74rem; line-height: 1.5; color: var(--ink-soft);
  letter-spacing: .04em;
}
.caption .cap-mark { color: var(--ink); font-size: .6rem; }
.caption-right { text-align: right; }

.dots { display: flex; gap: .85rem; margin-top: 2.5rem; }
.dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-block); }

.eyebrow {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 1rem;
}

.quote {
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  line-height: 1.75; font-weight: 300; white-space: pre-line; margin: 0;
}
.quote-author { font-size: .74rem; letter-spacing: .1em; color: var(--ink-faint); margin-top: 1rem; }

/* --- Home --------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}
.hero-figure { position: relative; }
/* No forced aspect ratio: cropping a painting to fit a box is the one thing a
   painter's site must not do, so the figure takes the picture's proportions. */
.hero-figure img { width: 100%; }
.hero-figure .grey-block { inset: auto -1.5rem -1.5rem auto; width: 38%; aspect-ratio: 1; }
.hero-figure .bracket-tl { top: -18px; left: -18px; }
.hero-figure .bracket-br { bottom: -18px; right: -18px; }

.hero-text h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
  line-height: 1.08; letter-spacing: -.01em; margin: 0 0 1.2rem;
}
/* The role sits inside the H1 so the heading carries the full phrase Google
   should match, but it reads as a subtitle rather than a second name. */
.hero-text h1 .hero-role {
  display: block; margin-top: .5rem;
  font-family: var(--body); font-weight: 300;
  font-size: clamp(.95rem, .55rem + 1vw, 1.35rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.hero-text .lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; white-space: pre-line; }

.btn {
  display: inline-block; margin-top: 2rem;
  border: 1px solid var(--ink); padding: .85rem 2.2rem;
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  background: none; cursor: pointer; font-family: var(--body);
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--ink); color: #fff; }

.section { padding-block: clamp(3rem, 7vw, 6.5rem); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.2rem; flex-wrap: wrap;
}
.section-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); margin: 0; letter-spacing: .01em; }

/* --- Series index ------------------------------------------------------- */

.series-list { display: grid; gap: clamp(3rem, 8vw, 7rem); }

.series-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.series-row:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.series-row:nth-child(even) .series-intro { order: 2; }

.series-intro { position: relative; }
.series-intro .marked { margin-bottom: 1.4rem; }
.series-cat {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .6rem;
}
.series-cat a:hover { color: var(--ink); }

/* One picture, not three. Most of the paintings are landscape, so three
   thumbnails side by side left each one too small to read. */
.series-preview { display: block; position: relative; }
.series-preview img { width: 100%; }
.series-count { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Grids -------------------------------------------------------------- */

/* Masonry-ish: the works are all different proportions, and cropping them to a
   common ratio is the one thing a painter's site must not do. Columns keep
   every canvas whole. */
.masonry { columns: 3 260px; column-gap: clamp(1rem, 2.5vw, 2.2rem); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(1rem, 2.5vw, 2.2rem); }

.card { position: relative; display: block; }
.card img { width: 100%; transition: opacity .25s ease; background: var(--paper-warm); }
.card:hover img { opacity: .88; }
.card figcaption { margin-top: .6rem; }
.card .card-title {
  font-size: .82rem; letter-spacing: .02em; color: var(--ink);
  display: block; margin-bottom: .15rem;
}
.card.is-hidden img { opacity: .38; }
.card .hidden-flag {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--ink); color: #fff; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; padding: .25rem .6rem;
}

/* --- Series page -------------------------------------------------------- */

/* Top-aligned, like the printed chapter openers: title at the head of the
   left column, epigraph under it, the painting running full height at right. */
.series-hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
}
.series-hero-text { position: relative; }
.series-hero-text .quote { margin-top: 2rem; max-width: 42ch; }
/* The bracket is anchored to .frame, which wraps the image only. Anchored to
   the <figure> it would have sat below the caption instead of the picture. */
.series-hero-figure { position: relative; }
.frame { position: relative; display: block; }
/* Clear the bracket, which hangs 20px below the picture. */
.series-hero-figure .hero-caption { margin-top: 2.2rem; }
.series-hero-figure .bracket-br { bottom: -20px; right: -20px; }

/* --- Artwork page ------------------------------------------------------- */

.artwork-page {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
.artwork-figure { position: relative; }
.artwork-figure img { width: 100%; }
.artwork-figure .bracket-tl { top: -20px; left: -20px; }
.artwork-figure .bracket-br { bottom: -20px; right: -20px; }

.artwork-meta { position: sticky; top: 110px; }
.artwork-meta h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.8rem); line-height: 1.2; margin: 0 0 1.2rem;
}
.spec { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--grey-line); }
.spec li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--grey-line); font-size: .85rem;
}
.spec .k { color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.pager a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pager .spacer { visibility: hidden; }

.breadcrumb { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 1.5rem; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin-inline: .5rem; }

/* --- Biography ---------------------------------------------------------- */

.bio-layout {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.bio-portrait { position: relative; }
.bio-portrait .grey-block { inset: 1.5rem -1.5rem -1.5rem 1.5rem; z-index: -1; }
.bio-portrait .bracket-tl { top: -16px; left: -16px; }
.bio-portrait .bracket-br { bottom: -16px; right: -16px; }
.bio-text p { white-space: pre-line; max-width: 62ch; }

.cv-block { margin-top: 3.5rem; position: relative; }
.cv-block > .bracket-tl { top: -1.1rem; left: -1.1rem; width: 44px; }
.cv-block h2 {
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.2rem;
}
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-list li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem;
  padding: .45rem 0; font-size: .88rem; border-bottom: 1px solid #f0f0f0;
}
.cv-list .yr { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- Contact ------------------------------------------------------------ */

.contact-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}
.contact-details { position: relative; }
.contact-details .bracket-tl { top: -1.4rem; left: -1.4rem; }
.contact-details dl { margin: 2rem 0 0; }
.contact-details dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1.4rem; }
.contact-details dd { margin: .3rem 0 0; font-size: .95rem; }

form.stack { display: grid; gap: 1.4rem; }
form.stack label { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .5rem; }
form.stack input[type=text], form.stack input[type=email], form.stack textarea, form.stack select {
  width: 100%; font: inherit; color: inherit; background: var(--paper-warm);
  border: 1px solid var(--grey-line); padding: .8rem 1rem; border-radius: 0;
}
form.stack input:focus, form.stack textarea:focus, form.stack select:focus {
  outline: none; border-color: var(--ink); background: #fff;
}
form.stack .errorlist { list-style: none; padding: 0; margin: .4rem 0 0; color: #a4231d; font-size: .8rem; }

.flashes { padding-top: 1.5rem; }
.flash { border-left: 3px solid var(--ink); padding: .7rem 1rem; background: var(--paper-warm); font-size: .9rem; margin: 0 0 .6rem; }
.flash-error { border-left-color: #a4231d; }

/* --- Footer ------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--grey-line); margin-top: clamp(3rem, 8vw, 7rem); padding-block: 3rem; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.foot-name { font-family: var(--display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; margin: 0; }
.foot-role { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: .3rem 0 0; }
.foot-contact, .foot-links { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.foot-contact a:hover, .foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.empty { color: var(--ink-faint); font-size: .9rem; padding: 2rem 0; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero, .series-hero, .artwork-page, .bio-layout, .contact-layout,
  .series-row, .series-row:nth-child(even) { grid-template-columns: 1fr; }
  .series-row:nth-child(even) .series-intro { order: 0; }
  .artwork-meta { position: static; }
  .masonry { columns: 2 200px; }
  .hero-figure { order: -1; }
  .hero-figure img { aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  .burger {
    display: block; width: 26px; height: 18px; position: relative; cursor: pointer;
  }
  .burger span, .burger span::before, .burger span::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  }
  .burger span { top: 8px; }
  .burger span::before { top: -7px; }
  .burger span::after { top: 7px; }

  .site-nav {
    position: absolute; inset: 100% 0 auto; background: var(--paper);
    border-bottom: 1px solid var(--grey-line);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: 0 var(--gutter); max-height: 0; overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
  }
  .navtoggle:checked ~ .site-nav { max-height: 60vh; padding-block: 1.2rem 1.8rem; }
  .site-nav > a { width: 100%; padding-block: .8rem; border-bottom: 1px solid #f0f0f0; }
  .langs { border-left: 0; padding-left: 0; padding-top: 1rem; }
  .masonry { columns: 1; }
  .series-preview { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-head, .site-foot, .edit-bar, .pager { display: none; }
  body { font-size: 11pt; }
}

/* --- Categories ---------------------------------------------------------- */

.cat-block + .cat-block { border-top: 1px solid var(--grey-line); }

/* Category names are phrases ("Peinture à l'huile sur toile"), not single
   words like the series titles, so they need a smaller step or they wrap to
   three lines and swamp the series headings underneath. */
.cat-block > .marked { --title-size: clamp(1.35rem, 3vw, 2.15rem); margin-bottom: .5rem; }
.cat-block > .marked .solid { max-width: 18ch; }
.cat-intro {
  max-width: 62ch; color: var(--ink-soft); margin: 1.5rem 0 0; white-space: pre-line;
}
.cat-tools, .series-tools {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: 1.5rem;
}
.series-tools { font-size: .8rem; color: var(--ink-faint); }
.series-tools label { display: flex; align-items: center; gap: .5rem; }
.series-tools select {
  font: inherit; font-size: .85rem; padding: .4rem .6rem;
  border: 1px solid var(--grey-line); background: #fff; color: var(--ink);
}
.danger-btn {
  font-family: var(--body); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .55rem 1.1rem; cursor: pointer;
  border: 1px solid #c9a6a4; background: #fff; color: #a4231d;
}
.danger-btn:hover { background: #a4231d; border-color: #a4231d; color: #fff; }
.btn.danger-btn { margin-top: 0; }

.series-block { margin-top: clamp(2.5rem, 6vw, 4rem); }
.series-block + .series-block { margin-top: clamp(3rem, 7vw, 5rem); }
.series-intro-text { margin-top: 2rem; max-width: 46ch; }

/* The series heading sits inside .marked, which carries display-size type;
   the link beside it must not inherit that. */
.section-head .marked { font-size: var(--title-size); }
.section-head > a { font-size: .72rem; }

/* --- Contact ------------------------------------------------------------- */

.contact-note { max-width: 46ch; color: var(--ink-soft); margin: 1.8rem 0 0; white-space: pre-line; }

.contact-list { margin: 2rem 0 0; }
.contact-list dt {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 1.5rem;
}
.contact-list dd { margin: .3rem 0 0; font-size: .95rem; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.addr-line { display: block; }
.contact-social { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* The split e-mail must read as one word despite the span in the middle. */
.mail-link .at, .foot-mail .at { margin: 0; }

.social-edit { margin-top: 2.5rem; border-top: 1px solid var(--grey-line); padding-top: 1.5rem; font-size: .85rem; }
.social-edit p { margin: .5rem 0; }
.social-label {
  display: inline-block; min-width: 7rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}

.form-note { font-size: .78rem; color: var(--ink-faint); max-width: 46ch; margin: .5rem 0 0; }

/* The honeypot. Off-screen rather than display:none — the better bots skip
   fields that are not rendered at all, but happily fill one that is merely
   positioned out of the way. Nothing reachable by eye, tab or screen reader. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto; width: 1px; height: 1px; overflow: hidden;
}