/* Page styles for About and Contact, lifted verbatim from
   mockups/about.tpl.html and mockups/contact.tpl.html at the re-platform,
   17 August 2026. Moved out of the page, not restyled. */


/* ---------------- about ---------------- */
.about-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem); align-items:start; }
@media (max-width:820px) { .about-grid { grid-template-columns:1fr; } }

.lede { font-size: calc(1.16rem * var(--s-body)); line-height:1.45; font-weight:300;
  margin:0 0 2rem; max-width:28ch; text-wrap:balance; }
.prose { max-width:66ch; }
.prose p { font-size: calc(.85rem * var(--s-body)); line-height:1.75; margin:0 0 1.3rem; }
.prose p:last-child { margin-bottom:0; }
.prose em { font-style:italic; }

.portrait figure { margin:0; }
.portrait img { width:100%; height:auto; }
.portrait figcaption { font-size: calc(.49rem * var(--s)); color:var(--muted);
  margin-top:.9rem; line-height:1.5; }

.facts { margin-top:2.6rem; display:grid; gap:1.6rem; }
.fact-h { font-size: calc(.5rem * var(--s)); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--rule); padding-top:.9rem; margin-bottom:.7rem; }
.fact ul { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.fact li { font-size: calc(.74rem * var(--s-did)); line-height:1.55; }
.fact li span { color:var(--muted); }


.enq { display:inline-block; margin-top:2.4rem; text-decoration:none; font-weight:700;
  font-size: calc(.5rem * var(--s)); letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); border:1px solid var(--accent); padding:.8rem 1.3rem; }
.enq:hover { background: var(--accent); color: var(--paper); }

/* Exhibition history — a dated list, not a CV. Rows, not cards, because what matters
   here is scanning by year. It is also the only place the shows with no images can
   appear at all: they can never sit in a picture grid. */
.history { margin-top:clamp(4rem,9vw,6.5rem); }
.hist-list { display:grid; }
.hist-row { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:1.4rem;
  padding:.95rem 0; border-top:1px solid var(--rule); align-items:baseline; }
.hist-row:last-child { border-bottom:1px solid var(--rule); }
.hist-y { font-size: calc(.62rem * var(--s-did)); letter-spacing:.14em; color:var(--accent);
  font-variant-numeric:tabular-nums; }
.hist-t { font-size: calc(.8rem * var(--s-body)); line-height:1.4; }
.hist-t a { color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); }
.hist-t a:hover { color:var(--accent); border-color:var(--accent); }
.hist-v { display:block; font-size: calc(.7rem * var(--s-did)); color:var(--muted);
  line-height:1.5; margin-top:.25rem; }
@media (max-width:560px) { .hist-row { grid-template-columns:1fr; gap:.3rem; } }



/* ---------------- contact ---------------- */
.contact-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
@media (max-width:820px) { .contact-grid { grid-template-columns:1fr; } }

.lede { font-size: calc(1.16rem * var(--s-body)); line-height:1.45; font-weight:300;
  margin:0 0 1.4rem; max-width:24ch; text-wrap:balance; }
.intro { font-size: calc(.85rem * var(--s-body)); line-height:1.75; color:var(--muted);
  max-width:52ch; margin:0 0 2.8rem; }

form { display:grid; gap:1.5rem; max-width:34rem; }
.field { display:grid; gap:.55rem; }
label { font-size: calc(.5rem * var(--s)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); }
input, textarea, select {
  font:inherit; font-size: calc(.78rem * var(--s-body)); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
  padding:.55rem 0; border-radius:0; width:100%;
  /* iOS rounds and insets these by default and it wrecks the rule */
  -webkit-appearance:none; appearance:none;
}
textarea { resize:vertical; min-height:7.5rem; line-height:1.6; }
input:focus, textarea:focus, select:focus { outline:none; border-bottom-color:var(--accent); }
select { background-image:none; }

.send { justify-self:start; margin-top:.6rem; background:none; cursor:pointer;
  font-weight:700; font-size: calc(.5rem * var(--s)); letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--accent);
  padding:.85rem 1.5rem; }
.send:hover { background:var(--accent); color:var(--paper); }

.or { font-size: calc(.72rem * var(--s-did)); color:var(--muted); line-height:1.6;
  margin:1.8rem 0 0; }
.or a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); }
.or a:hover { border-color:var(--accent); }

.side { display:grid; gap:2.2rem; }
.side-h { font-size: calc(.5rem * var(--s)); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--rule); padding-top:.9rem; margin-bottom:.8rem; }
.side p { font-size: calc(.76rem * var(--s-did)); line-height:1.7; margin:0; }
.side a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); }
.side a:hover { border-color:var(--accent); }
.status-key { display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.status-key li { font-size: calc(.76rem * var(--s-did)); line-height:1.55; }
.status-key b { font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78em; color:var(--accent); margin-right:.5rem; }
.status-key b.avail { color:var(--muted); font-weight:400; }

/* Was an inline style attribute on the mockup's contact page. Moved into the
   stylesheet at the re-platform so the published CSP can forbid inline
   anything without changing how the page looks. */
.status-note { margin-top: 1rem; color: var(--muted); }

/* Honeypot: a field a person never sees and a bot fills in. Off-screen rather
   than display:none, because some bots skip fields that are hidden outright. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }