/* ==========================================================================
   suzannedolanart.com : p-pages.css
   Page rules for About, Exhibitions, Contact, Privacy, Cookies and the 404.
   Tokens and components come from site.css; nothing here redefines them.
   The CV print sheet lives in print-cv.css.
   ========================================================================== */

/* ------------------------------------------------------------ page head -- */
/* round 13 (2026-09-15, the owner: "every page must open the same way"): About, Exhibitions and Contact open on the
   paper with their title, the same air as the archive's head (p-work-index.css .archive__head). The round-3 shallow
   colour ground (the opening work's glaze at 14%, a 32vh band) is gone: on the cool paper it read as a coloured header. */
.page-head {
  padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  padding-bottom: var(--s-8);
}
.page-head h1 { margin: 0; }
.page-head .folio { margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- about -- */
/* round 13 (2026-09-15, the owner): one narrow column like Exhibitions (.wrap--narrow): the portrait under the
   title, then the sections, 64px apart; the two-column layout with the sticky aside is gone */
.about > section + section { margin-top: var(--s-8); }
.about__quote { margin-bottom: 0; }
.about__quote-source { margin: var(--s-2) 0 0; }
/* the 2026 selections: three sourced lines in mono, set off from the prose by a hairline */
.prose .about__lines {
  list-style: none;
  margin-top: var(--s-3);
  padding: var(--s-2) 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.prose .about__lines li { padding-left: 0; margin: 0; }
.prose .about__lines li + li { margin-top: 6px; }
.prose .about__lines + p { margin-top: var(--s-4); }
/* the opening photograph (only once she has sent one, round 5: no placeholder plate): the 5:4 landscape band
   across the column's full width, as Exhibitions opens (.cv__photo) */
.about__portrait-figure { margin: 0 0 var(--s-8); }
.about__portrait-figure .photo { width: 100%; height: auto; }
/* the process pair: her hands with a brush, two columns on desktop, one on the phone, equal height (2026-09-08) */
.about__process-photos { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: var(--s-5); }
.about__process-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.about__process-photo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 600px) {
  .about__process-photos { grid-template-columns: 1fr 1fr; }
}

/* the plain-text statement: her words, no styling beyond the measure */
.about-plain__text {
  margin: var(--s-4) 0;
  max-width: var(--measure);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- cv -- */
/* the studio photograph above the list, screen only (2026-09-08); .no-print hides it in both the real print and ?print=1 */
.cv__photo { margin: 0 0 var(--s-8); }
/* a row is title, venue line, note line (no kind tag in a left column); an award names itself in its note line */
.cv > h1 { margin-bottom: var(--s-8); }
.cv__year + .cv__year { margin-top: var(--s-8); }
.cv__h { margin-bottom: var(--s-3); }
.cv__row { display: block; padding-block: var(--s-3); }
.cv__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: 1.25;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.cv__venue { display: block; margin-top: 4px; }
.cv__note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.cv__note cite { font-family: var(--font-display); font-size: 1.1em; color: var(--ink); }
.cv__award { font-weight: 500; }
/* a venue the artist has not confirmed yet: soft-ink mono, never a guess */
.cv__tbc { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.01em; color: var(--ink-soft); }
.cv__press { margin-top: var(--s-12); }
.cv__press h2 { margin-bottom: var(--s-3); }
.cv__none { color: var(--ink-soft); }
.cv__press-note { margin-top: var(--s-6); }
/* the quiet "Printable version" link at the very bottom of the list */
.cv__print { margin-top: var(--s-10); font-size: var(--t-sm); }

/* the print sheet head and the on-screen hint are hidden here; print-cv.css shows them */
.cv__sheet { display: none; }
.cv__sheet-name { font-family: var(--font-display); font-size: var(--t-2); line-height: 1.2; }
.cv__print-hint { display: none; }

/* -------------------------------------------------------------- contact -- */
.contact__lead { margin-top: var(--s-3); max-width: 40ch; }
/* the studio photograph beside the form (2026-09-08): a second column on desktop, the form keeps its own width;
   stacked (photo above form, source order) on the phone at full content width */
.contact__layout { display: grid; gap: var(--s-6); align-items: start; margin-top: var(--s-6); }   /* air under the lead (it touched the photograph, 2026-09-08) */
.contact__photo { margin: 0; }
.contact__photo .photo { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  .contact__layout { grid-template-columns: minmax(0, 420px) minmax(0, 560px); justify-content: space-between; }
  .contact__layout .contact-form, .contact__layout .contact__sent { margin-top: 0; }
}
.contact-form { margin-top: var(--s-6); max-width: 35rem; }
.contact-form .form-error { margin-bottom: var(--s-4); }
.contact-form .form-error[hidden] { display: none; }
.contact-form > .field + .field { margin-top: var(--s-3); }
.contact-form__about { font-size: var(--t-0); }
.contact-form > .contact-form__about { margin-bottom: var(--s-3); }
.contact-form__about cite { font-family: var(--font-display); font-size: 1.15em; }
.contact-form__pick { display: block; }
.contact-form__change {
  display: inline;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-sm);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.16em;
}
.contact-form__change::-webkit-details-marker { display: none; }
.contact-form__change::marker { content: ''; }
.contact-form__change:hover { text-decoration-color: var(--accent); }
.contact-form__change:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.contact-form__pick[open] .contact-form__change { color: var(--ink-soft); text-decoration: none; cursor: default; }
.contact-form__pick-body { display: grid; gap: 6px; margin-top: var(--s-2); }
.contact-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
}
.contact-form__note { margin: 0; }
.contact-form .form-status { margin-top: var(--s-2); min-height: 1.5em; }
@media (max-width: 479.98px) {
  .contact-form__submit .btn { width: 100%; }
}
.contact__sent { margin-top: var(--s-6); }
.contact__direct { margin-top: var(--s-10); font-size: var(--t-sm); line-height: 1.9; }
.contact__direct p { margin: 0; }

/* ---------------------------------------------------------------- legal -- */
.legal__prose h2 { font-size: var(--t-1); line-height: 1.25; }
.legal__prose > h1 + p { margin-top: var(--s-2); }

/* ------------------------------------------------------------------ 404 -- */
.notfound { min-height: 40vh; }
.notfound__line { margin-top: var(--s-3); }
.notfound__links { margin-top: var(--s-4); font-size: var(--t-1); font-family: var(--font-display); }