:root { color-scheme: light; --ink:#211b1a; --paper:#fbf8f3; --line:#e3d9d0; --wine:#81102e; --muted:#665b58; --gutter:clamp(14px,3.5vw,32px); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 system-ui,sans-serif; text-align:start; overflow-wrap:anywhere; }
a { color:var(--wine); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--wine); outline-offset:3px; }
.wrap { width:min(1120px,calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.header { border-bottom:1px solid var(--line); background:#fffdfb; }
.header-inner,.brand { display:flex; align-items:center; gap:12px; }
.header-inner { justify-content:space-between; flex-wrap:wrap; min-height:68px; padding-block:10px; }
.brand { flex-wrap:wrap; color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; }
.brand img { max-width:100%; }
.main { padding-block:clamp(20px,4vw,32px) 64px; }
h1 { font:400 clamp(30px,5.5vw,58px)/1.1 Georgia,serif; letter-spacing:-.045em; margin:0 0 18px; text-wrap:balance; }
h2 { font:400 clamp(23px,3vw,27px)/1.2 Georgia,serif; margin:0 0 14px; text-wrap:balance; }
h3 { font-size:15px; }
p { margin:0 0 12px; }
.panel { min-width:0; padding:clamp(14px,3vw,25px); background:#fffdfb; border:1px solid var(--line); border-radius:10px; }
.login { max-width:440px; margin:24px auto; }
.login-form,.status-form,.stack { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:15px; }
.stat { display:grid; color:var(--ink); text-decoration:none; }
.stat strong { font:400 33px Georgia,serif; color:var(--wine); }
.filters { display:flex; flex-wrap:wrap; align-items:end; gap:9px; margin-bottom:14px; }
label { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:4px; font-weight:650; font-size:13px; }
.filters label { flex:1 1 145px; }
.filters label:first-child { flex-grow:2; }
input,select,button,.plain { min-height:44px; border-radius:6px; font:inherit; }
input,select { width:100%; min-width:0; max-width:100%; border:1px solid #cdbeb6; padding:8px 10px; background:white; color:var(--ink); font-size:16px; }
button,.plain { max-width:100%; padding:9px 13px; cursor:pointer; border:1px solid var(--wine); background:var(--wine); color:white; font-weight:650; text-align:center; }
.plain { display:inline-flex; align-items:center; justify-content:center; color:var(--wine); border-color:var(--line); background:transparent; text-decoration:none; }
.request-table { width:100%; border-collapse:collapse; text-align:start; font-size:14px; }
th,td { padding:11px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:12px; }
.request-label { display:none; }
td a { font-weight:650; }
small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.status { display:inline-block; background:#f6e8e8; color:var(--wine); padding:4px 8px; border-radius:5px; font-size:12px; font-weight:650; }
.pagination { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:16px; }
.empty,.notice,.alert { padding:12px; border:1px solid var(--line); border-radius:6px; margin:0 0 12px; }
.notice { color:#245e3e; background:#edf7ed; }
.alert { color:var(--wine); background:#f6e8e8; }
.back { display:inline-flex; align-items:center; min-height:44px; margin-bottom:8px; }
.eyebrow { color:var(--wine); font-size:12px; font-weight:650; }
.reference { overflow-wrap:anywhere; }
h1.reference { font-size:clamp(23px,5vw,48px); }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
dl { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:7px 14px; margin:0; }
dt { color:var(--muted); } dd { margin:0; overflow-wrap:anywhere; }
.brief { white-space:pre-wrap; overflow-wrap:anywhere; }
.item,.order-total { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; align-items:baseline; padding:12px 0; border-top:1px solid var(--line); }
.item > div { min-width:0; flex:1 1 145px; }
.order-total > strong,.item > strong { margin-inline-start:auto; text-align:end; font-variant-numeric:tabular-nums; }
.history { padding:8px 0; border-top:1px solid var(--line); }
@media (min-width:800px) { .detail-grid { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); } }
@media (max-width:700px) {
    .request-table,.request-table tbody { display:block; }
    .request-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .request-table tbody tr { display:block; padding-block:9px; border-top:1px solid var(--line); }
    .request-table td { display:grid; grid-template-columns:minmax(0,5em) minmax(0,1fr); gap:10px; align-items:baseline; padding:4px 0; border:0; }
    .request-table .status { justify-self:start; }
    .request-label { display:block; font-size:12px; font-weight:650; color:var(--muted); }
}
@media (max-width:540px) {
    .filters label { flex-basis:100%; }
    .filters button,.filters .plain { flex:1 1 120px; }
}
@media (max-width:359px) {
    .request-table td:first-child { grid-template-columns:minmax(0,1fr); gap:2px; }
}
.file-form { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding-block:12px; }
.file-form button { justify-self:start; }
.file-form textarea { min-height:84px; width:100%; resize:vertical; font:inherit; font-size:16px; border:1px solid #cdbeb6; border-radius:6px; padding:8px 10px; }
.file-hint { margin-top:6px; font-size:13px; color:var(--muted); }
.proof-actions { display:flex; flex-wrap:wrap; gap:8px; }
textarea:focus-visible { outline:2px solid var(--wine); outline-offset:3px; }
.mail-copy { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; border-top:1px solid var(--line); padding-block:14px; margin:0; }
.payment-main { max-width:600px; }
.payment-main .proof-actions { margin-block:16px 8px; }
.payment-main .back { display:flex; width:fit-content; margin:8px 0 0; }
.transfer-heading { margin-top:20px; }
.quote-acceptance { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; }
.quote-acceptance input { width:22px; margin:0; }
.staff-header-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.staff-project { display:grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); gap:14px; padding:16px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.staff-project img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:5px; }
.staff-project h3 { margin:6px 0; }
@media (max-width:540px) {
    .staff-project { grid-template-columns:minmax(0,1fr); }
    .staff-project img { max-width:140px; }
}
:root {
  --type-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --type-body: "DM Sans", system-ui, sans-serif;
  --accent-wine: #9c234b;
  --accent-teal: #176661;
  --accent-violet: #674398;
  --accent-ochre: #855214;
  --wash-wine: #f8e7ed;
  --wash-teal: #e1f2ed;
  --wash-violet: #eee7fa;
  --wash-ochre: #f9edda;
  --ease-ui: cubic-bezier(.2, .75, .25, 1);
  --lift-shadow: 0 12px 28px #38212112;
}
.icon-wine { --glyph: var(--accent-wine); --glyph-wash: var(--wash-wine); }
.icon-teal { --glyph: var(--accent-teal); --glyph-wash: var(--wash-teal); }
.icon-violet { --glyph: var(--accent-violet); --glyph-wash: var(--wash-violet); }
.icon-ochre { --glyph: var(--accent-ochre); --glyph-wash: var(--wash-ochre); }
.icon-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 11px;
  color: var(--glyph, var(--accent-wine));
  background: var(--glyph-wash, var(--wash-wine));
}
.icon-badge .icon { width: 19px; height: 19px; color: inherit; }
.icon-inline { display: inline-flex; align-items: center; gap: 7px; }
.icon-inline > .icon { color: var(--glyph, currentColor); }
.icon, .icon-badge { transition: transform .24s var(--ease-ui), background-color .24s var(--ease-ui); }
.icon-badge .icon { transform-origin: center; }
@keyframes icon-nudge {
  45% { transform: translateY(-3px) rotate(-8deg); }
}
@keyframes badge-pop {
  from { opacity: .5; transform: scale(.88); }
  68% { transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes surface-in {
  from { opacity: .55; transform: translateY(9px) scale(.995); }
  to { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(a, button):hover > .icon-badge > .icon,
  :is(a, button):hover > .icon-inline > .icon,
  :is(a, button).icon-inline:hover > .icon { animation: icon-nudge .42s var(--ease-ui); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(a, button):focus-visible > .icon-badge > .icon,
  :is(a, button).icon-inline:focus-visible > .icon { animation: icon-nudge .42s var(--ease-ui); }
}
body { font-family: var(--type-body); font-size: 16px; line-height: 1.6; }
h1, h2, .stat strong { font-family: var(--type-display); letter-spacing: -.024em; }
h1 { font-size: clamp(38px, 6.2vw, 67px); }
h2 { font-size: clamp(28px, 4vw, 36px); }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; flex: none; width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: middle; }
.panel { border-radius: 14px; box-shadow: 0 4px 16px #38212108; }
.login > .icon-badge, .payment-main .icon-badge, .detail-grid .panel > .icon-badge { width: 44px; height: 44px; margin-bottom: 12px; }
.stat { grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
.stat strong { display: block; font-variant-numeric: tabular-nums; line-height: 1; }
.stat:hover, .stat:focus-visible { box-shadow: var(--lift-shadow); }
.staff-header-actions :is(a, button) { gap: 6px; }
button, .plain { border-radius: 9px; }
button:hover { background: #681025; }
button.plain:hover, a.plain:hover { background: var(--wash-wine); }
.status[data-status="ready"] { background: var(--wash-teal); color: var(--accent-teal); }
.status[data-status="artwork"], .status[data-status="review"] { background: var(--wash-violet); color: var(--accent-violet); }
.status[data-status="production"], .status[data-status="quoted"] { background: var(--wash-ochre); color: var(--accent-ochre); }
.status[data-status="closed"] { background: #eee8e4; color: #4a403d; }
@media (prefers-reduced-motion: no-preference) {
  .login, .payment-main > .panel, .main > .detail-grid, .main > .totals { animation: surface-in .38s var(--ease-ui) both; }
  :is(.login, .payment-main .panel) > .icon-badge { animation: badge-pop .4s var(--ease-ui) both; }
}