/* Studio gallery — terrazzo world.
   --ground / --accent / --cap-ink / --cap-meta are injected per-request from
   SiteSettings in base.html. Everything else is fixed here. */

:root {
  --ground: #E9E3D8;
  --accent: #35544F;
  --cap-ink: #221F1A;
  --cap-meta: #5F5A50;

  --panel: #F3EFE6;
  --ink: #221F1A;
  --meta: #5F5A50;
  --line: #C4BDAE;
  --hair: #E1DACB;
  --field: #FBF9F3;
  --radius: 4px;
  --shadow-panel: 0 30px 60px -30px rgba(34,31,26,.5), 0 2px 0 rgba(255,255,255,.55) inset;
  --shadow-window: 0 28px 52px -26px rgba(34,31,26,.55), 0 6px 14px -8px rgba(34,31,26,.35);
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--accent) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  background-color: var(--ground);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #F2EEE5; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- surface recipes -------------------------------------------------- */
body.surface-terrazzo {
  background-image:
    radial-gradient(circle at 12% 20%, #C1734F 0 3px, transparent 3.5px),
    radial-gradient(circle at 66% 8%,  #35544F 0 3.5px, transparent 4px),
    radial-gradient(circle at 86% 36%, #D3AE52 0 2.5px, transparent 3px),
    radial-gradient(circle at 34% 62%, #35544F 0 2.5px, transparent 3px),
    radial-gradient(circle at 52% 44%, #C1734F 0 3px, transparent 3.5px),
    radial-gradient(circle at 8% 84%,  #D3AE52 0 3px, transparent 3.5px),
    radial-gradient(circle at 92% 78%, #35544F 0 2.5px, transparent 3px),
    radial-gradient(circle at 74% 92%, #C1734F 0 2px, transparent 2.5px);
  background-size: 200px 200px;
}
body.surface-plaster {
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.24), transparent 55%),
    radial-gradient(circle at 80% 12%, rgba(0,0,0,.05), transparent 45%),
    radial-gradient(circle at 58% 84%, rgba(0,0,0,.045), transparent 52%);
  background-repeat: no-repeat;
}
body.surface-concrete {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 26%),
    linear-gradient(180deg, transparent 39.6%, rgba(0,0,0,.05) 40%, transparent 40.4%),
    linear-gradient(180deg, transparent 71.6%, rgba(0,0,0,.04) 72%, transparent 72.4%);
  background-repeat: no-repeat;
}
body.surface-sandstone {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(140,95,55,.05) 34px 36px),
    linear-gradient(180deg, rgba(180,140,90,.10), transparent 42%);
}

/* --- primitives ---------------------------------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.disp { font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.02em; line-height: 1.05; }
.label { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; }

a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow-panel); }

button { font: inherit; cursor: pointer; color: inherit; }
.btn { display: inline-block; border: none; border-radius: 999px; padding: 13px 24px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.btn-accent { background: var(--accent); color: #F5F2EC; }
.btn-accent:hover { text-decoration: none; filter: brightness(1.08); }
.btn-ghost { background: none; border: 1px solid var(--line); color: var(--ink); }
.btn-dark { background: #221F1A; color: #F5F2EC; }

.pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #4A463D; background: transparent; }
.pill:hover { text-decoration: none; }
.pill.is-active { background: var(--accent); color: #F5F2EC; border-color: var(--accent); }

/* --- topbar / footer -------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--panel);
  border-bottom: 1px solid #DDD5C4; box-shadow: 0 14px 30px -22px rgba(34,31,26,.45); }
.topbar-inner { max-width: 1120px; margin: 0 auto; padding: 14px 40px;
  display: flex; align-items: center; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; color: var(--ink); }
.wordmark:hover { text-decoration: none; }
.wordmark-mark { width: 26px; height: 26px; display: block; flex: none; }
.topnav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.site-footer { margin-top: 90px; border-top: 1px solid var(--line); padding: 26px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--cap-meta); }

.flash-wrap { max-width: 1120px; margin: 18px auto 0; padding: 0 40px; }
.flash { border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px; font-size: 14px; }
.flash-ok { background: #35544F; color: #F2EEE5; }
.flash-error { background: #8C3B2E; color: #F7ECE8; }

/* --- gallery -------------------------------------------------------- */
.hero { padding: 44px 44px 46px; }
.hero h1 { font-weight: 700; font-size: 42px; margin: 20px 0 10px; }
.hero p { max-width: 58ch; margin: 0 0 28px; color: #4A463D; }
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterbar .count { margin-left: auto; color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 58px 40px; margin-top: 58px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } .wrap { padding: 0 22px; }
  .topbar-inner { padding: 14px 22px; } .hero { padding: 30px 24px 32px; } }

.work { display: flex; flex-direction: column; }
.work-frame { display: block; width: 100%; padding: 12px; border: none; border-radius: 3px;
  background: var(--panel); box-shadow: var(--shadow-window); }
.work-frame img { display: block; width: 100%; object-fit: cover;
  border-radius: 1px; background: #EDE7DB; }
  /* aspect-ratio is set inline per work, from the image's own proportions —
     landscape and square pieces show uncropped instead of forced portrait */
.work h3 { font-weight: 700; font-size: 21px; margin: 18px 0 5px; color: var(--cap-ink); }
.work .meta { font-size: 14px; color: var(--cap-meta); }
.work .price { font-family: "Schibsted Grotesk", sans-serif; font-weight: 600; font-size: 18px;
  margin-top: 9px; color: var(--accent); }
.work .price.nfs { color: var(--cap-meta); }
.work.is-hidden { display: none; }
.work-frame { position: relative; }
.badge { position: absolute; top: 10px; left: 10px; background: var(--panel); color: var(--ink);
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(34,31,26,.4); }
.work h3 a { color: inherit; }
.work h3 a:hover { text-decoration: none; color: var(--accent); }

.empty { text-align: center; color: var(--cap-meta); padding: 90px 0; }

/* --- image zoom / pan viewer (artwork page) ------------------- */
.zoomable { cursor: zoom-in; }
.zoom-cue { font-size: 10px; }
.zoom-overlay { position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; background: rgba(20,18,15,.94);
  overflow: hidden; cursor: zoom-out; touch-action: none; overscroll-behavior: contain; }
.zoom-overlay.open { display: flex; }
.zoom-overlay.is-zoomed { cursor: grab; }
.zoom-overlay img { max-width: 92vw; max-height: 92vh; height: auto; border-radius: 2px;
  will-change: transform; user-select: none; -webkit-user-drag: none; }
.zoom-close { position: fixed; top: 16px; right: 18px; z-index: 61;
  border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.35); color: #F5F2EC;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.zoom-close:hover { background: rgba(0,0,0,.6); }

/* --- artwork detail ---------------------------------------------- */
.detail { display: grid; grid-template-columns: 1.02fr 1fr; gap: 52px; padding-top: 38px; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 28px; } }
.detail-media { align-self: start; position: sticky; top: 92px; }
.detail-media .frame { padding: 14px; }
.detail-media img { display: block; width: 100%; border-radius: 2px;
  box-shadow: 0 22px 44px -24px rgba(34,31,26,.6); background: #EDE7DB; }
.detail-body { padding: 34px 34px 36px; }
.detail-body h1 { font-weight: 700; font-size: 37px; margin: 0 0 6px; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 4px; }
.price-row .big { font-family: "Schibsted Grotesk", sans-serif; font-weight: 700; font-size: 30px; }
.chip { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 4px 10px; }
.spec { border-top: 1px solid #D8D1C2; margin-top: 32px; }
.spec > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 12px 0;
  border-bottom: 1px solid var(--hair); }
.spec dt { color: #6B6558; } .spec dd { margin: 0; color: #3E3A32; }
.subgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; margin-top: 20px; }

/* --- forms -------------------------------------------------------- */
.field { display: block; margin-bottom: 16px; }
.lbl { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
  font-weight: 600; color: #6B6558; margin-bottom: 7px; }
.in { width: 100%; border: 1px solid #C8C1B2; border-radius: 3px; background: var(--field);
  padding: 11px 13px; font: inherit; color: var(--ink); }
.in:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inset { border: 1px solid #DCD5C6; border-radius: var(--radius); background: var(--field);
  padding: 22px; margin-top: 8px; }
.checkline { display: flex; gap: 10px; align-items: center; font-size: 15px; margin-bottom: 10px; }

/* --- lightbox ---------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 40px; background: rgba(24,22,18,.8); }
.lightbox.open { display: flex; }
.lightbox-card { background: var(--panel); border-radius: 5px; max-width: 900px; width: 100%;
  max-height: 88vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.6); }
@media (max-width: 720px) { .lightbox-card { grid-template-columns: 1fr; } }
.lightbox-card .media { padding: 22px; }
.lightbox-card .media img { width: 100%; border-radius: 2px; background: #EDE7DB;
  box-shadow: 0 20px 40px -22px rgba(34,31,26,.6); }
.lightbox-card .body { padding: 30px 32px 34px; position: relative; }
.lightbox-close { position: absolute; top: 18px; right: 20px; border: none; background: none; }

/* --- admin ----------------------------------------------------- */
.admin-wrap { max-width: 1000px; margin: 40px auto; padding: 0 40px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.stat { padding: 20px; }
.stat .n { font-family: "Schibsted Grotesk", sans-serif; font-weight: 700; font-size: 32px; }
.table { width: 100%; border-collapse: collapse; background: var(--panel);
  border-radius: var(--radius); overflow: hidden; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hair);
  font-size: 14px; }
.table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6B6558; }
.thumb-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.thumb-row figure { margin: 0; width: 90px; }
.thumb-row img { width: 90px; height: 90px; object-fit: contain; border-radius: 3px;
  border: 1px solid var(--line); background: #EDE7DB; }
.thumb-actions { display: flex; gap: 4px; margin-top: 4px; }
.thumb-actions button { flex: 1; border: 1px solid var(--line); background: var(--field);
  border-radius: 3px; padding: 4px 0; font-size: 14px; cursor: pointer; color: var(--meta); }
.thumb-actions button:hover { color: var(--accent); border-color: var(--accent); }
.login-card { max-width: 380px; margin: 80px auto; padding: 34px; }

/* reorderable works list */
#worklist tr { transition: background .12s; }
#worklist tr.dragging { opacity: .35; }
#worklist tr:hover { background: #EFEBE0; }
.reorder-cell { white-space: nowrap; }
.drag-handle { cursor: grab; color: #A9A08C; font-size: 16px; letter-spacing: -2px;
  user-select: none; padding-right: 4px; }
.drag-handle:active { cursor: grabbing; }
.reorder-btns { display: inline-flex; flex-direction: column; vertical-align: middle; }
.reorder-btns button { border: 1px solid var(--line); background: var(--panel);
  color: var(--meta); font-size: 9px; line-height: 1; padding: 3px 5px; cursor: pointer; }
.reorder-btns button:first-child { border-radius: 3px 3px 0 0; }
.reorder-btns button:last-child { border-radius: 0 0 3px 3px; border-top: none; }
.reorder-btns button:hover { color: var(--accent); }