/* The Peggy Williams Collection
   Direction: exhibition catalogue / monograph. The page is deliberately
   achromatic so the watercolours supply every colour on screen. The single
   accent is vermilion - the seal-chop red that appears in her own Chinese
   brush paintings - and it is only ever used for plate numerals and links. */

@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Karla';src:url('fonts/Karla-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Karla';src:url('fonts/Karla-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#FBFAF7;
  --ink:#1A1A1A;
  --muted:#6E6A63;
  --rule:#DDD9D1;
  --seal:#C8442F;          /* the surprise: Chinese seal-chop vermilion */
  --disp:'Fraunces',Georgia,serif;
  --body:'Karla',Helvetica,sans-serif;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.7;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
.wrap{width:min(100% - 3rem,var(--maxw));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

/* ---- masthead ------------------------------------------------------------- */
.mast{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.94);
  backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.9rem 0}
.brand{display:flex;align-items:baseline;gap:.7rem;text-decoration:none}
.pw{font-family:var(--disp);font-weight:600;font-size:1.3rem;letter-spacing:.06em}
.brand-tx{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mast nav{display:flex;gap:1.5rem;align-items:center}
.mast nav a{text-decoration:none;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.15rem;border-bottom:1px solid transparent}
.mast nav a:hover{color:var(--ink);border-bottom-color:var(--seal)}
.mast nav .cta{color:var(--seal)}

/* ---- frontispiece --------------------------------------------------------- */
.front{padding:5rem 0 4rem}
.front .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}
.front-fig{margin:0}
.front-fig img{width:100%;box-shadow:0 1px 0 var(--rule)}
.kicker{margin:0 0 1.4rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.front h1{margin:0 0 1.2rem;font-family:var(--disp);font-weight:400;
  font-size:clamp(3.2rem,7vw,5.4rem);line-height:.98;letter-spacing:-.015em}
.front-sub{margin:0;font-family:var(--disp);font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.5;color:var(--muted);max-width:32ch}

/* ---- artist statement ----------------------------------------------------- */
.statement{padding:3rem 0 5rem;border-top:1px solid var(--rule)}
.statement-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3.4rem}
.statement-rule{width:1px;background:var(--rule)}
.statement-tx{max-width:66ch}
.lead{margin:0 0 1.5rem;font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.7rem);
  line-height:1.45;color:var(--ink)}
.statement-tx p{margin:0 0 1.25rem;color:#33312E}
.statement blockquote{margin:2.2rem 0;padding:0 0 0 1.6rem;border-left:2px solid var(--seal)}
.statement blockquote p{margin:0;font-family:var(--disp);font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.4;color:var(--ink)}
.sig{font-family:var(--disp);color:var(--muted)}

/* ---- signature element: exhibition wall labels ---------------------------- */
.plate{padding:4.5rem 0 1rem;border-top:1px solid var(--rule)}
.label{max-width:44ch;margin:0 0 2.6rem;padding-left:1.4rem;border-left:1px solid var(--rule)}
.label-n{margin:0 0 .5rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--seal)}
.label h2{margin:0 0 .35rem;font-family:var(--disp);font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.01em}
.label-m{margin:0 0 .7rem;font-style:italic;color:var(--muted);font-size:.95rem}
.label-note{margin:0;color:var(--muted);font-size:.95rem}

/* ---- work grids -----------------------------------------------------------
   Multi-column, not CSS grid. These are paintings with wildly different aspect
   ratios: a fixed grid leaves holes beside every landscape piece, and the only
   way to square it up would be to crop the artwork, which is never acceptable
   for original work. Columns pack vertically and nothing is cropped. */
.grid{column-gap:2rem}
.g3{column-count:3}
.g4{column-count:4}
.work{margin:0 0 2rem;break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%}
.work img{width:100%;background:#fff}
.work figcaption{margin-top:.6rem;font-size:.82rem;color:var(--muted);letter-spacing:.01em}

/* ---- porcelain pieces: image + its real description ----------------------- */
.pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 3.4rem}
.piece{display:grid;grid-template-columns:150px 1fr;gap:1.6rem;align-items:start;margin:0}
.piece figure{margin:0}
.piece img{width:100%;background:#fff}
.piece h3{margin:0 0 .45rem;font-family:var(--disp);font-weight:400;font-size:1.2rem;line-height:1.25}
.piece p{margin:0;font-size:.92rem;line-height:1.62;color:var(--muted)}

/* ---- commission ----------------------------------------------------------- */
.commission{padding:5rem 0;border-top:1px solid var(--rule);margin-top:4rem}
.commission-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
.commission h2{margin:.4rem 0 1.1rem;font-family:var(--disp);font-weight:400;
  font-size:clamp(2rem,4vw,3rem);line-height:1.03}
.commission-tx p{color:var(--muted);max-width:40ch}
.cform label{display:block;margin:0 0 1.15rem}
.cform .lbl{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem}
.cform .lbl b{color:var(--seal)}
.cform input,.cform textarea,.cform select{
  width:100%;font-family:var(--body);font-size:1rem;line-height:1.5;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.5rem 0;border-radius:0;
}
.cform select{appearance:none;background:transparent;cursor:pointer}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-bottom-color:var(--seal)}
.cform textarea{resize:vertical;border:1px solid var(--rule);padding:.7rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
.cform button{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;
  padding:1rem 2.2rem;cursor:pointer;margin-top:.5rem}
.cform button:hover{background:var(--seal)}
.cnote{margin:.9rem 0 0;font-size:.82rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.notice{margin:0 0 1.4rem;padding:.9rem 1.1rem;border-left:2px solid var(--seal);
  background:#fff;font-size:.92rem;line-height:1.6}
.notice.bad{border-left-color:#8a1f16}

/* ---- footer --------------------------------------------------------------- */
.foot{border-top:1px solid var(--rule);padding:3rem 0 2.4rem;margin-top:1rem}
.foot-in{display:grid;gap:1.4rem}
.foot-brand{margin:0;display:flex;align-items:baseline;gap:.7rem;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.foot-nav a{text-decoration:none;color:var(--muted);font-size:.82rem}
.foot-nav a:hover{color:var(--seal)}
.foot-c{margin:0;font-size:.78rem;color:var(--muted)}

/* ---- motion: scoped to html.js so content is never hidden without JS ------ */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .front .wrap,.commission-in{grid-template-columns:1fr;gap:2.4rem}
  .g3{column-count:2}
  .g4{column-count:3}
  .pieces{grid-template-columns:1fr}
  .statement-in{grid-template-columns:1fr;gap:1.6rem}
  .statement-rule{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .mast-in{flex-direction:column;align-items:flex-start;gap:.7rem}
  .mast nav{flex-wrap:wrap;gap:.6rem 1.1rem}
  .brand-tx{font-size:.68rem}
  .front{padding:2.6rem 0 2.4rem}
  .g3,.g4{column-count:2}
  .grid{column-gap:1rem}
  .work{margin-bottom:1rem}
  .piece{grid-template-columns:110px 1fr;gap:1.1rem}
  .two{grid-template-columns:1fr}
}