:root { --paper:#faf8f2; --ivory:#f3efe6; --ink:#0d1b26; --blue:#173c52; --brass:#ad8750; --line:rgba(13,27,38,.18); --serif:"Cormorant Garamond",Georgia,serif; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ivory); font:15px/1.6 var(--sans); }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.portal-header { min-height:74px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; color:white; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.14); }
.portal-brand { display:flex; align-items:center; gap:.8rem; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }
.portal-brand span { width:38px; height:38px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font:500 1rem var(--serif); letter-spacing:0; }
.portal-header form { margin:0; }
.portal-header button { border:0; color:white; background:none; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; }
.eyebrow { margin:0 0 1rem; color:var(--brass); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; }
.login-shell { min-height:calc(100svh - 74px); display:grid; grid-template-columns:1.05fr .95fr; background:var(--ink); }
.login-card { padding:clamp(4rem,9vw,9rem); color:white; align-self:center; }
.login-card h1,.portal-intro h1 { margin:0; font:500 clamp(4rem,8vw,8rem)/.78 var(--serif); letter-spacing:-.04em; }
.login-card h1 em,.portal-intro h1 em { color:#d5b987; font-weight:500; }
.login-help { max-width:520px; margin:2.5rem 0; color:rgba(255,255,255,.65); }
.login-form { max-width:460px; display:grid; gap:1rem; }
.login-form label { display:grid; gap:.55rem; color:rgba(255,255,255,.72); font-size:.67rem; text-transform:uppercase; letter-spacing:.12em; }
.login-form input { min-height:54px; padding:0 1rem; border:1px solid rgba(255,255,255,.3); color:white; background:rgba(255,255,255,.06); }
.login-form button { min-height:54px; border:0; color:var(--ink); background:var(--paper); font-size:.69rem; font-weight:600; text-transform:uppercase; letter-spacing:.13em; cursor:pointer; }
.login-art { display:grid; place-content:center; min-height:500px; color:white; background:radial-gradient(circle,rgba(173,135,80,.28),transparent 38%),linear-gradient(135deg,#173c52,#08151f); text-align:center; }
.login-art span { font-size:.65rem; text-transform:uppercase; letter-spacing:.28em; }
.login-art strong { font:500 clamp(7rem,17vw,15rem)/.8 var(--serif); color:rgba(255,255,255,.16); }
.notice { max-width:460px; margin:0 0 1.2rem; padding:1rem; border:1px solid; }
.notice.error { color:#ffd3cc; border-color:#a65146; background:rgba(166,81,70,.18); }
.notice.success { color:#245d45; border-color:#72a58b; background:#edf6f0; }
.portal-notice { max-width:none; }
.text-link { display:inline-block; padding-bottom:.25rem; border-bottom:1px solid; text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; }
.reset-login-link { margin-top:1.5rem; color:rgba(255,255,255,.72); }
.portal-main { width:min(1500px,90vw); margin:0 auto; padding:clamp(4rem,8vw,8rem) 0; }
.portal-intro { display:grid; grid-template-columns:1.5fr .7fr; gap:6vw; align-items:end; padding-bottom:5rem; }
.portal-intro p:last-child { max-width:430px; color:#59656d; }
.customer-picker { display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:2rem; align-items:end; margin-bottom:2rem; padding:1.4rem; border:1px solid var(--line); background:var(--paper); }
.customer-picker label { display:grid; gap:.5rem; }
.customer-picker label span { color:var(--brass); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; }
.customer-picker select { width:100%; min-height:56px; padding:0 1rem; border:1px solid var(--ink); color:var(--ink); background:white; font:500 1.2rem var(--serif); }
.customer-picker p { margin:0; color:#657078; }
.workshop-upload { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,6rem); margin-bottom:5rem; padding:clamp(2rem,4vw,4rem); color:white; background:var(--blue); }
.decor-code-legend { display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; margin:0 0 2rem; padding:1rem 1.25rem; border:1px solid var(--line); background:var(--paper); color:#5d686f; font-size:.72rem; }
.decor-code-legend strong { color:var(--ink); text-transform:uppercase; letter-spacing:.1em; }
.decor-code-legend b { color:var(--brass); }
.workshop-upload h2 { margin:0 0 1rem; font:500 clamp(2.8rem,5vw,5rem)/.9 var(--serif); }
.workshop-upload > div > p:last-child { color:rgba(255,255,255,.7); }
.workshop-upload form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.workshop-upload label { display:grid; gap:.45rem; color:rgba(255,255,255,.72); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; }
.workshop-upload input,.workshop-upload select { width:100%; min-height:50px; padding:.7rem .9rem; border:1px solid rgba(255,255,255,.28); color:white; background:rgba(255,255,255,.08); }
.workshop-upload select option { color:var(--ink); background:white; }
.workshop-upload input[type=file] { padding:.65rem; }
.workshop-upload small { color:rgba(255,255,255,.58); text-transform:none; letter-spacing:0; }
.workshop-upload [data-workshop-status] { min-height:1.2em; color:#d5b987; text-transform:none; letter-spacing:0; }
.workshop-upload button { min-height:52px; align-self:end; border:0; color:var(--ink); background:#d5b987; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; cursor:pointer; }
.customer-section { scroll-margin-top:2rem; padding:4rem 0; border-top:1px solid var(--line); }
.customer-section[hidden] { display:none !important; }
.customer-section > header { display:grid; grid-template-columns:1fr auto; align-items:end; margin-bottom:2rem; }
.customer-section > header .eyebrow { grid-column:1/-1; }
.customer-section h2 { margin:0; font:500 clamp(3.2rem,6vw,6rem)/.85 var(--serif); }
.customer-section > header span { color:#68737a; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.material-grid { display:grid; gap:1.2rem; }
.material-group { border:1px solid var(--line); background:var(--paper); }
.material-group > summary { min-height:160px; display:grid; grid-template-columns:190px minmax(0,1fr) auto; gap:1.6rem; align-items:center; padding:1rem 1.4rem 1rem 1rem; cursor:pointer; list-style:none; }
.material-group > summary::-webkit-details-marker { display:none; }
.material-cover { width:190px; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; color:#727c82; background:#e6e3db; font-size:.7rem; text-align:center; }
.material-cover img { width:100%; height:100%; object-fit:contain; background:#ece9e1; }
.material-summary-copy { min-width:0; display:grid; }
.material-summary-copy .eyebrow { margin-bottom:.35rem; }
.material-summary-copy strong { font:500 clamp(2rem,3.5vw,3.4rem)/.95 var(--serif); }
.material-summary-copy small { margin-top:.65rem; color:#68737a; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.material-toggle { min-width:145px; padding:.8rem 1rem; border:1px solid var(--ink); font-size:.64rem; font-weight:600; text-align:center; text-transform:uppercase; letter-spacing:.1em; }
.material-toggle .close-label { display:none; }
.material-group[open] .material-toggle .open-label { display:none; }
.material-group[open] .material-toggle .close-label { display:inline; }
.material-group:not([open]) > .material-variants { display:none; }
.material-variants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding:1rem; border-top:1px solid var(--line); background:var(--ivory); }
.production-item { background:var(--paper); border:1px solid var(--line); }
.photo-grid { display:grid; aspect-ratio:4/3; overflow:hidden; background:#e6e3db; }
.photo-grid.multiple { grid-template-columns:repeat(2,1fr); }
.photo-grid a { min-width:0; min-height:0; overflow:hidden; }
.production-photo { position:relative; min-width:0; min-height:0; overflow:hidden; }
.production-photo > a { width:100%; height:100%; display:block; }
.production-photo form { position:absolute; right:.55rem; bottom:.55rem; margin:0; opacity:0; transition:opacity .2s; }
.production-photo:hover form,.production-photo:focus-within form { opacity:1; }
.production-photo form button { padding:.45rem .65rem; border:0; color:white; background:rgba(120,35,28,.88); font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.photo-grid img { width:100%; height:100%; object-fit:contain; background:#ece9e1; transition:transform .3s; }
.photo-grid a:hover img { transform:scale(1.02); }
.photo-placeholder { aspect-ratio:4/3; display:grid; place-items:center; color:#727c82; background:#e6e3db; }
.item-copy { padding:1.6rem; }
.item-copy .eyebrow { margin-bottom:.45rem; }
.item-copy h3 { margin:0; font:500 2.3rem var(--serif); }
.collection-badge { display:inline-flex; margin-top:.7rem; padding:.3rem .55rem; color:#765322; background:#eee2ca; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }
.decor-code-badge { display:inline-flex; margin:.7rem .4rem 0 0; padding:.3rem .55rem; color:#30566a; background:#dce9ee; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.decor-code-badge.is-blank { color:#52605b; background:#e3e7df; }
.item-copy > p:last-child { margin:1rem 0 0; color:#56636a; white-space:normal; }
.customer-empty,.empty-state { padding:3rem; color:#657078; background:var(--paper); border:1px solid var(--line); }
@media (max-width:800px) { .login-shell,.portal-intro,.workshop-upload,.customer-picker { grid-template-columns:1fr; } .login-art { display:none; } .material-variants { grid-template-columns:1fr; } .portal-intro { gap:2.5rem; } }
@media (max-width:620px) { .material-group > summary { grid-template-columns:96px minmax(0,1fr); gap:1rem; padding:.8rem; } .material-cover { width:96px; } .material-toggle { grid-column:1/-1; width:100%; } }
@media (max-width:520px) { .portal-header { padding:0 5vw; } .portal-brand strong { font-size:.64rem; } .login-card { padding:4rem 7vw; } .portal-main { width:90vw; padding-top:4rem; } .portal-intro h1,.login-card h1 { font-size:3.8rem; } .workshop-upload form { grid-template-columns:1fr; } .customer-section > header { grid-template-columns:1fr; gap:.8rem; } .photo-grid.multiple { aspect-ratio:auto; grid-template-columns:1fr; } .photo-grid.multiple .production-photo { aspect-ratio:4/3; } .production-photo form { opacity:1; } }
.notice.maintenance { color: #5b3a0c; background: #fff1cf; border-color: #c79038; }