/* ------------------------------------------------------------------
   Shared by the artist's page and the galleries' page. The palette is
   the Desk's, so the two feel related, but no Interval branding: this
   site is the artist's, and other galleries sign in to it.
   ------------------------------------------------------------------ */

:root{
  /* White throughout, so the photographs sit on the same white as the
     walls most of them were taken against. */
  --cream:#ffffff;
  --paper:#ffffff;
  --ink:#1c1b17;
  --muted:#77736a;
  --faint:#a39e93;
  --line:#e5e1d6;
  --line-dark:#cfc9ba;
  --hover:#f5f5f5;
  --umber:#7d5a3c;
  --alert:#8a4a3a;
  --tag:#f1f1f1;
  --ok:#4f6b45;
  --warn:#9a7a2c;
  /* Aldine for everything, labels and buttons included, from the Adobe
     Fonts kit both pages load (the Desk's). Georgia stands in if the
     kit does not arrive. */
  --text:"adobe-aldine",Georgia,"Times New Roman",serif;
  --ui:var(--text);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font:15px/1.45 var(--text);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
@media (max-width:760px){ input,select,textarea{font-size:16px !important} }
a{color:inherit}
[hidden]{display:none !important}

/* ---------- sign-in ---------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate form{width:100%;max-width:340px;text-align:center}
.gate h1{font-weight:normal;font-size:24px;margin:0 0 4px}
.gate p{color:var(--muted);margin:0 0 20px}
.gate input{width:100%;padding:11px 12px;border:1px solid var(--line-dark);background:var(--paper);border-radius:3px;text-align:center}
.gate .err{color:var(--alert);min-height:1.4em;margin-top:10px;font-size:14px}

/* ---------- frame ---------- */
header.top{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line)}
.top-in{max-width:1280px;margin:0 auto;padding:14px 20px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.top h1{font-weight:normal;font-size:21px;margin:0}
.top .sub{color:var(--muted);font-size:14px}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
nav.tabs{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;gap:22px}
nav.tabs button{background:none;border:0;padding:10px 0 9px;border-bottom:2px solid transparent;cursor:pointer;color:var(--muted);font-family:var(--ui);font-size:13px;letter-spacing:.02em}
nav.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
main{max-width:1280px;margin:0 auto;padding:18px 20px 80px}

/* ---------- controls ---------- */
.btn{font-family:var(--ui);font-size:14px;line-height:1.2;padding:8px 14px;border:1px solid var(--line-dark);background:var(--paper);border-radius:2px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.primary:hover{background:#000}
.btn.danger{color:var(--alert)}
.btn.small{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
/* For the header: words, not boxes. */
.btn.quiet{border-color:transparent;background:none;color:var(--muted);padding-left:8px;padding-right:8px}
.btn.quiet:hover{color:var(--ink);background:none}
/* ---------- searching and filtering ----------
   The search is a line to write on, and the filters read as a sentence
   of words that can be changed: no boxes, no browser-drawn controls. */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:6px}
.toolbar input[type=search]{flex:1 1 260px;min-width:0;padding:8px 0 7px;border:0;border-bottom:1px solid var(--line-dark);border-radius:0;background:transparent;font:16px var(--text);letter-spacing:.02em;outline:none;-webkit-appearance:none;appearance:none}
.toolbar input[type=search]:focus{border-bottom-color:var(--ink)}
.toolbar input[type=search]::placeholder{color:var(--faint)}
.toolbar .actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:12px 0;margin:0 0 24px;border-bottom:1px solid var(--line)}
.filters select{-webkit-appearance:none;appearance:none;border:0;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%2377736a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 1px center;padding:3px 16px 3px 0;font:15px var(--text);letter-spacing:.02em;color:var(--ink);cursor:pointer;max-width:100%}
.filters select:hover,.filters select:focus{color:var(--umber);outline:none}
.chip{position:relative;display:inline-flex;align-items:center;font:14px var(--text);letter-spacing:.02em;color:var(--muted);cursor:pointer;padding:3px 12px;border:1px solid var(--line-dark);border-radius:999px;user-select:none}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip:has(input:focus-visible){outline:2px solid var(--umber);outline-offset:2px}
.filters .count{margin:0 0 0 auto;font-size:13px}
.count{font-family:var(--ui);font-size:12px;color:var(--muted);margin:0 0 10px}

/* ---------- works grid ---------- */
/* Each picture at its own shape, the full width of its column: no frame
   around it and nothing cropped. The documentation photographs come in a
   few shapes only (2:3 upright, 3:2 and 4:3 across), so the rows stay
   orderly; they line up along the top, and the captions follow each
   picture rather than a common line. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 18px;align-items:start}
.card{background:none;border:0;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.card .pic{display:block}
.card .pic img{display:block;width:100%;height:auto;transition:opacity .15s;color:transparent}
/* Holds an upright picture's place until it arrives, so the grid does not
   jump as each one loads. */
.card .pic img:not([src]){aspect-ratio:2/3;visibility:hidden}
.card .pic:has(img:not([src])){background:var(--tag)}
.card .pic .none{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:var(--tag);color:var(--faint);font-family:var(--ui);font-size:12px}
.card:hover .pic img{opacity:.88}
.card .t{font-style:italic;line-height:1.25;overflow-wrap:anywhere}
.card .meta{font-family:var(--ui);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.pill{display:inline-block;font-family:var(--ui);font-size:11px;padding:1px 7px;border-radius:10px;background:var(--tag);color:var(--ink);white-space:nowrap}
.pill.available{background:#e6ecdf;color:var(--ok)}
.pill.reserved{background:#f3ead2;color:var(--warn)}
.pill.sold{background:#f0dfd9;color:var(--alert)}
.pill.check{background:#f3ead2;color:var(--warn)}
.pill.mine{background:var(--ink);color:var(--cream)}
.empty{color:var(--muted);padding:40px 0;text-align:center}

/* ---------- a sheet over the page ---------- */
.veil{position:fixed;inset:0;z-index:100;background:rgba(28,27,23,.45);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:40px 16px}
.sheet{background:var(--cream);width:100%;max-width:920px;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.18);position:relative}
.sheet.narrow{max-width:480px}
.sheet-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:-40px;background:var(--cream);z-index:2;border-radius:4px 4px 0 0}
.sheet-head h2{font-weight:normal;font-size:19px;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.sheet-body{padding:18px 20px 22px}
.sheet-foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px;border-top:1px solid var(--line);justify-content:flex-end}
.sheet-foot .left{margin-right:auto}
@media (max-width:600px){ .veil{padding:0} .sheet{border-radius:0;min-height:100vh} .sheet-head{top:0} }

/* ---------- forms ---------- */
fieldset{border:0;border-top:1px solid var(--line);margin:0 0 6px;padding:14px 0 6px}
legend{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 0}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 16px}
.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.f.wide{grid-column:1/-1}
.f > span{font-family:var(--ui);font-size:12px;color:var(--muted)}
.f input,.f select,.f textarea{padding:7px 9px;border:1px solid var(--line-dark);border-radius:3px;background:var(--paper);width:100%}
.f textarea{min-height:68px;resize:vertical}
.f.bool{flex-direction:row;align-items:center;gap:8px}
.f.bool input{width:auto}
.f.bool span{font-size:13px;color:var(--ink)}
.note{font-family:var(--ui);font-size:12px;color:var(--muted)}
.err-line{color:var(--alert);font-family:var(--ui);font-size:13px}

/* ---------- images in a sheet ---------- */
.pics{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.pics figure{margin:0;flex:0 0 auto}
.pics .frame{height:120px;display:flex}
.pics img{height:120px;width:auto;display:block}
.pics img:not([src]){width:80px;background:var(--tag)}
.pics figcaption{display:flex;gap:4px;margin-top:4px}
.hero{display:flex;justify-content:center;margin-bottom:10px;min-height:200px;align-items:center}
.hero img{max-width:100%;max-height:62vh;display:block}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.thumbs button{height:56px;padding:0;border:0;background:none;cursor:pointer;display:flex;opacity:.55;outline-offset:2px}
.thumbs button.on{opacity:1;outline:1px solid var(--ink)}
.thumbs img{height:56px;width:auto;display:block}
.thumbs img:not([src]){width:40px;background:var(--tag)}

/* ---------- detail lists ---------- */
dl.facts{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 16px;margin:0}
dl.facts dt{font-family:var(--ui);font-size:12px;color:var(--muted);padding-top:2px}
dl.facts dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:600px){ dl.facts{grid-template-columns:1fr} dl.facts dd{margin-bottom:6px} }
.box{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:12px 14px;margin:0 0 14px}
.box h3{font-weight:normal;font-size:16px;margin:0 0 8px}
.history{list-style:none;margin:0;padding:0;font-family:var(--ui);font-size:12px;color:var(--muted)}
.history li{padding:3px 0;border-bottom:1px solid var(--line)}
.history b{color:var(--ink);font-weight:normal}

/* ---------- galleries ---------- */
.gals{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gal{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.gal h3{font-weight:normal;font-size:18px;margin:0}
.gal .link{font-family:var(--text);font-size:13px;background:var(--cream);border:1px solid var(--line);padding:6px 8px;border-radius:3px;overflow-wrap:anywhere}
.gal .link.off{text-decoration:line-through;color:var(--faint)}
.gal .row{display:flex;flex-wrap:wrap;gap:6px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--cream);font-family:var(--ui);font-size:13px;padding:9px 14px;border-radius:3px;z-index:300;max-width:calc(100% - 32px)}

/* ---------- printing a consignment list ---------- */
.print-only{display:none}
@media print{
  body{background:#fff}
  body > *:not(.print-only){display:none !important}
  .print-only{display:block}
  .pl{font:11pt/1.4 var(--text);color:#000}
  .pl h1{font-weight:normal;font-size:18pt;margin:0 0 2pt}
  .pl .sub{color:#555;margin-bottom:14pt}
  .pl table{width:100%;border-collapse:collapse}
  .pl td{vertical-align:top;padding:8pt 8pt 8pt 0;border-top:.5pt solid #bbb;page-break-inside:avoid}
  .pl td.img{width:90pt}
  .pl td.img img{max-width:80pt;max-height:80pt}
  .pl .t{font-style:italic}
  .pl .r{text-align:right;white-space:nowrap}
  .pl .sign{margin-top:30pt;display:flex;gap:40pt}
  .pl .sign div{flex:1;border-top:.5pt solid #000;padding-top:4pt;font-size:9pt}
}