/* Salon wall: a deep green gallery wall, paintings in gilt frames (works on paper get a cream mat),
   a brass plaque for the painting in focus. One deliberate look in every colour scheme.
   Layout: centred header; the top painting hung large, then a justified wall where every
   painting keeps its true shape and every frame in a row shares one height. */
:root {
  --wall: #24312C;
  --wall-deep: #1B2521;
  --ivory: #EFE8D6;
  --dim: #B5AE9B;
  --rule: #3B4943;
  --field: #2B3933;
  --input: #1D2723;
  --gold-hi: #E6CB82;
  --gold: #D2AE58;
  --gold-lo: #82621F;
  --mat: #F3EEE2;
  --plaque-ink: #2A2210;
  --shadow: rgba(0, 0, 0, .5);
  --bad: #F09A88;
  --good: #A6D8B0;
  --focus: #E6CB82;

  --gilt: linear-gradient(135deg, var(--gold) 0%, var(--gold-lo) 30%, var(--gold-hi) 50%, var(--gold-lo) 78%, var(--gold) 100%);
  --brass: linear-gradient(180deg, #E2C987 0%, #C29F4F 55%, #A88635 100%);

  --f-name: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-text: "Figtree", "Segoe UI", system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ivory);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-wrap: balance; margin: 0; }
p { margin: 0; }

.page {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px), 4vw);
  padding-right: max(20px, env(safe-area-inset-right, 0px), 4vw);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---------- header / footer ---------- */
.site-head { display: grid; justify-items: center; gap: 8px; text-align: center; padding-block: 40px 36px; }
.site-name { font-family: var(--f-name); font-weight: 500; font-size: 38px; letter-spacing: .16em; text-decoration: none; line-height: 1.1; padding-left: .16em; }
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--dim);
  padding-block: 4px;
}
.site-nav a:hover { color: var(--ivory); }
.site-nav a[aria-current="page"] { color: var(--gold-hi); }
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: 13.5px; color: var(--dim);
  border-top: 1px solid var(--rule); padding-block: 26px 44px; margin-top: 80px;
}
.site-foot a { color: var(--dim); }
.site-foot a:hover { color: var(--ivory); }

.intro {
  font-family: var(--f-display); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--dim);
  max-width: 44ch; margin: -8px auto 40px; text-align: center;
}
.empty { font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--dim); padding-block: 60px; display: grid; gap: 12px; text-align: center; }
.empty a { font-style: normal; font-family: var(--f-text); font-size: 15px; }
.muted { color: var(--dim); }

/* ---------- frames ---------- */
/* --f is the gilt moulding, --m the mat (only on works on paper). */
.frame {
  --f: 10px; --m: 0px;
  display: block; padding: var(--f); background: var(--gilt);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .35), inset 0 0 0 3px rgba(0, 0, 0, .18), 0 14px 28px var(--shadow), 0 2px 4px var(--shadow);
}
.frame.mat { --m: 14px; }
.mat-in { display: block; padding: var(--m); background: var(--mat); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.frame img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); background: var(--wall-deep); } /* dark canvas while loading, not a gold slab */
a.frame { text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
a.frame:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .35), inset 0 0 0 3px rgba(0, 0, 0, .18), 0 22px 40px var(--shadow), 0 3px 6px var(--shadow);
}

/* ---------- brass plaque ---------- */
.plaque {
  background: var(--brass); color: var(--plaque-ink);
  border-radius: 2px; padding: 12px 20px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 250, 230, .55), inset 0 -1px 0 rgba(60, 40, 0, .35), 0 4px 10px var(--shadow);
  display: grid; gap: 2px; text-align: center;
}
.plaque .t { font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--plaque-ink); }
.plaque .d { font-size: 12.5px; letter-spacing: .04em; }

/* ---------- home: the painting in focus ---------- */
.feature { display: grid; justify-items: center; gap: 26px; padding-block: 4px 80px; }
.feature .frame { --f: 16px; }
.feature .frame.mat { --m: 22px; }
.feature .frame img { max-height: min(70vh, 820px); width: auto; }
.feature .plaque { min-width: min(280px, 100%); max-width: 420px; }

/* ---------- home: the wall ---------- */
/* Each frame grows in proportion to its painting's shape. The fixed frame and mat widths sit in the
   basis, not the growth, so every painting in a row ends up the same height. The trailing spacer
   stops the last row stretching. */
.wall {
  display: flex; flex-wrap: wrap; gap: 64px 48px;
  border-top: 1px solid var(--rule); padding-top: 72px;
}
.wall::after { content: ""; flex: 999 1 0; }
.w {
  --f: 10px; --m: 0px;
  margin: 0;
  flex: var(--ar) 1 calc(var(--ar) * 230px + 2 * (var(--f) + var(--m)));
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.w.has-mat { --m: 14px; }
.w-title { font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--dim); text-align: center; line-height: 1.3; }
.w:has(a.frame:hover) .w-title { color: var(--ivory); }

/* ---------- one painting ---------- */
.piece { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 32px 56px; align-items: center; }
.piece-img { margin: 0; justify-self: center; }
.piece-img .frame { --f: 16px; cursor: zoom-in; }
.piece-img .frame.mat { --m: 24px; }
.piece-img img { max-height: calc(100vh - 230px); width: auto; }
.piece-label { gap: 10px; text-align: left; padding: 18px 22px 20px; }
.piece-label .t { font-size: 27px; }
.facts { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.series { font-size: 14px; }
.note { display: grid; gap: 10px; font-size: 14.5px; max-width: 46ch; border-top: 1px solid rgba(60, 40, 0, .3); padding-top: 10px; }
.prevnext {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 36px; font-size: 14.5px;
}
.prevnext a { text-decoration: none; color: var(--dim); font-family: var(--f-display); font-style: italic; font-size: 18px; }
.prevnext a:hover { color: var(--ivory); }
.prevnext [rel="next"] { justify-self: end; text-align: right; }
.prevnext .all { font-family: var(--f-text); font-style: normal; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; }

/* full-size viewer (piece.js) */
.zoom {
  position: fixed; inset: 0; z-index: 10; background: var(--wall-deep); overflow: auto; cursor: zoom-out;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.zoom img { max-width: none; width: auto; margin: auto; }
.zoom-close {
  position: fixed; z-index: 11;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  font: 600 12px var(--f-text); letter-spacing: .14em; text-transform: uppercase;
  background: var(--wall); color: var(--ivory); border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; cursor: pointer;
}

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 4px; }
.about.no-photo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.about-photo { margin: 0; }
.about-photo .frame { --f: 12px; }
.about-text { display: grid; gap: 22px; max-width: 62ch; }
.about-text h1 { font-size: 42px; line-height: 1.1; }
.about-text .intro { margin: 0; text-align: left; }
.statement { display: grid; gap: 16px; font-size: 17px; line-height: 1.75; }
.contact { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 8px 0 0; border-top: 1px solid var(--rule); padding-top: 20px; font-size: 15px; }
.contact dt { color: var(--dim); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding-top: 2px; }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.contact a { color: var(--gold-hi); }

@media (max-width: 760px) {
  .site-head { padding-block: 26px 24px; }
  .site-name { font-size: 32px; }
  .intro { font-size: 19px; margin-bottom: 28px; }
  .piece, .about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature { padding-bottom: 56px; }
  .feature .frame, .piece-img .frame { --f: 10px; }
  .feature .frame.mat, .piece-img .frame.mat { --m: 14px; }
  .feature .frame img, .piece-img img { max-height: none; width: 100%; }
  .feature .frame, .piece-img { justify-self: stretch; }
  .wall { gap: 48px; padding-top: 48px; }
  .w { flex-basis: 100%; }
  .prevnext { grid-template-columns: 1fr 1fr; }
  .prevnext .all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  a.frame, a.frame:hover { transition: none; transform: none; }
}

/* =====================================================================
   Studio (password page)
   ===================================================================== */
.studio { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 28px; align-content: start; }
.studio h1 { font-size: 38px; text-align: center; }
.studio h2 { font-size: 26px; }
.stack { display: grid; gap: 14px; }
.panel { border: 1px solid var(--rule); border-radius: 8px; padding: 24px; display: grid; gap: 18px; background: var(--field); }
.panel[hidden] { display: none; }
.hint { font-size: 14px; color: var(--dim); }
.field { display: grid; gap: 6px; font-size: 14.5px; }
.field > span { font-weight: 600; }
.field small { font-weight: 400; color: var(--dim); }
.field input, .field select, .field textarea, .edit input, .edit select, .edit textarea {
  font: inherit; font-size: 16px; color: var(--ivory); background: var(--input);
  border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; width: 100%; min-width: 0;
}
.field input::placeholder, .field textarea::placeholder, .edit input::placeholder, .edit textarea::placeholder { color: var(--dim); opacity: .6; }
.field textarea, .edit textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  font: 600 14.5px var(--f-text); color: var(--ivory); background: var(--input);
  border: 1px solid var(--rule); border-radius: 6px; padding: 10px 16px; cursor: pointer; min-height: 42px;
}
.btn:hover { border-color: var(--dim); }
.btn.primary { background: var(--brass); color: var(--plaque-ink); border-color: var(--gold-lo); }
.btn.primary:hover { border-color: var(--gold-hi); }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { padding: 6px 10px; min-height: 34px; font-size: 13.5px; }
.msg { font-size: 14.5px; min-height: 1.5em; }
.msg.bad, .msg.error { color: var(--bad); }
.msg.good { color: var(--good); }
#page-msg:empty { display: none; }
.drop {
  display: grid; place-items: center; gap: 4px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--dim); border-radius: 8px; padding: 36px 16px;
}
.drop .big { font-weight: 600; font-size: 16px; }
.drop small { color: var(--dim); font-size: 13.5px; max-width: 46ch; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.crop { display: grid; gap: 10px; }
.crop[hidden] { display: none; }
.crop-stage { position: relative; touch-action: none; user-select: none; background: var(--input); border-radius: 6px; display: grid; place-items: center; }
.crop-stage canvas { max-width: 100%; max-height: 62vh; display: block; }
.crop-box { position: absolute; border: 2px solid var(--gold-hi); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); pointer-events: none; }
.crop-box .h { position: absolute; width: 16px; height: 16px; background: var(--gold-hi); border-radius: 3px; }
.crop-box .tl { left: -8px; top: -8px; } .crop-box .tr { right: -8px; top: -8px; }
.crop-box .bl { left: -8px; bottom: -8px; } .crop-box .br { right: -8px; bottom: -8px; }
.crop-box .t { left: calc(50% - 8px); top: -8px; } .crop-box .b { left: calc(50% - 8px); bottom: -8px; }
.crop-box .l { top: calc(50% - 8px); left: -8px; } .crop-box .r { top: calc(50% - 8px); right: -8px; }
.bar { height: 6px; background: var(--input); border-radius: 3px; overflow: hidden; }
.bar[hidden] { display: none; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 12px; border-top: 1px solid var(--rule); }
.list li:first-child { border-top: 0; }
.list img { width: 64px; height: 64px; object-fit: contain; background: var(--input); }
.list b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 19px; }
.list small { color: var(--dim); font-size: 13px; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.edit { display: grid; gap: 10px; }
.confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.about-now { display: flex; gap: 14px; align-items: center; }
.about-now img { width: 72px; height: 90px; object-fit: cover; border-radius: 4px; }
@media (max-width: 600px) {
  .panel { padding: 18px; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .list li { grid-template-columns: 56px minmax(0, 1fr); }
  .list img { width: 56px; height: 56px; }
  .tools { grid-column: 1 / -1; justify-content: flex-start; }
}