/* XIB'ART: shared scene and atelier foundations. Admin keeps its own system. */
:root {
  --blue:var(--brand-blue,#2a5cff); --coral:var(--brand-coral,#ff7043);
  --ink:var(--brand-ink,#182235); --paper:var(--brand-paper,#f8f7f4);
  --surface:#fff; --muted:#586574; --line:#dde3e9; --soft:#edf2ff;
  --success:#176443; --success-bg:#edf8f1; --danger:#ae2938; --danger-bg:#fff0f1;
  --heading:'Poppins',sans-serif; --sans:'Inter',sans-serif;
  --radius:20px; --radius-sm:12px; --shadow:0 12px 35px #18223509;
  --content:1280px; --gutter:clamp(20px,4vw,64px);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; overflow-x:clip; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
img,video { max-width:100%; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
button { color:inherit; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { font-family:var(--heading); line-height:1.2; letter-spacing:-.045em; }
h1 { font-size:clamp(32px,4.5vw,64px); font-weight:600; }
h2 { font-size:clamp(26px,3vw,42px); font-weight:600; }
h3 { font-size:22px; font-weight:600; }
p { margin-bottom:16px; }
small { font-size:13px; }
em { color:var(--blue); font-style:normal; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.ui-icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--blue); color:white; font-size:14px; font-weight:600; text-decoration:none; line-height:1.45; cursor:pointer; transition:transform .16s,box-shadow .16s,background .16s; }
.button:hover { box-shadow:0 6px 18px #2a5cff26; transform:translateY(-2px); }
.button:active { transform:scale(.98); }
.button:disabled,button[aria-disabled=true] { opacity:.65; cursor:wait; transform:none; }
.secondary-button { border-color:var(--line); background:var(--surface); color:var(--ink); }
.coral-button { background:var(--coral); color:#182235; }
.text-button,.arrow-link,.back-to-gallery,.directory-back { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--blue); font-weight:600; font-size:14px; text-decoration:none; background:none; border:0; padding:8px 0; }
.icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); }
.section-kicker,.eyebrow,.note-meta { display:flex; align-items:center; gap:10px; color:var(--blue); font:600 11px/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.section-kicker:before { content:''; width:18px; height:2px; background:var(--coral); flex-shrink:0; }
.page-heading,.gallery-heading,.directory-intro,.opportunities-intro { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:40px; }
.page-heading>div:first-child,.gallery-heading>div:first-child { max-width:780px; }
.page-heading h1,.gallery-heading h1 { margin-bottom:16px; }
.page-heading p:last-child,.gallery-heading p:last-child { color:var(--muted); max-width:620px; margin-bottom:0; }
.page-heading>.button,.gallery-heading>.button { flex-shrink:0; }
.surface { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
label { display:block; font-weight:600; font-size:14px; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { display:block; width:100%; min-height:48px; padding:12px 14px; border:1px solid #cbd3dd; border-radius:10px; background:var(--surface); color:var(--ink); font-size:16px; outline-offset:2px; margin-top:8px; transition:border-color .16s,box-shadow .16s; }
input::placeholder,textarea::placeholder { color:#788391; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2a5cff0d; }
input[readonly] { background:#f4f6f8!important; color:var(--muted); }
textarea { resize:vertical; line-height:1.7; min-height:112px; }
input[type=checkbox],input[type=radio] { width:20px; height:20px; accent-color:var(--blue); flex-shrink:0; }
input[type=file] { font-size:13px!important; padding:12px!important; }
input::file-selector-button { background:var(--soft); color:var(--blue); border:0; border-radius:6px; padding:9px; margin-right:10px; cursor:pointer; font:600 12px var(--sans); }
.field-help { display:block; color:var(--muted); font-size:13px; line-height:1.7; margin:8px 0 0; }
.form-notice,.admin-alert,.editor-feedback { background:var(--success-bg); color:var(--success); padding:16px 20px; border:1px solid #c5e7d3; border-radius:var(--radius-sm); margin-bottom:24px; font-size:14px; }
.form-notice.is-error,.admin-alert.error,.auth-message.is-error { background:var(--danger-bg); color:var(--danger); border-color:#f1cbd1; }
.editor-feedback { background:#fff6e8; color:#755329; border-color:#eedabb; }
.editor-feedback p { margin:8px 0 0; white-space:normal; }
.status-badge { display:inline-flex; align-items:center; gap:7px; background:#f0f3f7; color:#526071; border:1px solid var(--line); border-radius:30px; padding:5px 10px; font-size:11px; font-weight:600; white-space:nowrap; }
.status-badge:before { content:''; width:5px; height:5px; background:currentColor; border-radius:50%; }
.status-published { background:var(--success-bg); color:var(--success); border-color:#c5e7d3; }
.status-pending { background:#fff5e6; color:#80561c; border-color:#e9d5b4; }
.user-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--blue); font-weight:600; font-size:13px; flex-shrink:0; }
.empty-state,.member-empty,.directory-empty,.opportunities-empty { padding:60px 24px; text-align:center; border:1px dashed #cbd3dd; border-radius:var(--radius); background:var(--surface); }
.empty-state h2,.member-empty h2,.member-empty h3,.directory-empty h2,.opportunities-empty h2 { font-size:24px; margin:20px 0 12px; }
.empty-state p,.member-empty p,.directory-empty p,.opportunities-empty p { max-width:490px; margin:0 auto 24px; color:var(--muted); font-size:14px; }
.empty-art { display:grid; place-items:center; width:76px; height:76px; margin:auto; background:var(--soft); border:1px solid #dce5ff; border-radius:24px; transform:rotate(-6deg); }
.empty-art .ui-icon { width:32px; height:32px; color:var(--blue); transform:rotate(6deg); }
.sr-only,.directory-sr-only,.opportunity-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-70px; left:20px; padding:12px 20px; background:var(--blue); color:white; z-index:100; border-radius:10px; }
.skip-link:focus { top:12px; }
.honeypot { position:absolute!important; left:-10000px; }
.result-count { font-size:13px; color:var(--muted); margin:24px 0; }
.result-pagination,.directory-pagination { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:40px; font-size:13px; }
.result-pagination a,.directory-pagination a,.directory-pagination>span:not(.pagination-gap) { min-height:44px; min-width:44px; display:grid; place-items:center; padding:8px 14px; border:1px solid var(--line); background:white; border-radius:10px; text-decoration:none; }
.directory-pagination [aria-current] { background:var(--blue)!important; color:white; }
.directory-pagination .disabled { color:#8a939e; }
.form-section { padding:28px; border-bottom:1px solid var(--line); }
.form-section:last-child { border-bottom:0; }
.form-section h2 { font-size:20px; margin-bottom:10px; }
.form-section>p { color:var(--muted); font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.form-stack { display:grid; gap:24px; }
.field-wide { grid-column:1/-1; }
.join-consent,.rights-check { display:flex; align-items:flex-start; gap:12px; font-size:13px; font-weight:400; line-height:1.7; }
.join-consent input,.rights-check input { margin:1px 0 0; }
.join-consent:has(input),.rights-check { min-height:44px; }
.reveal { animation:scene-enter .4s both; }
@keyframes scene-enter { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} }
@media(max-width:700px) {
  .page-heading,.gallery-heading,.directory-intro,.opportunities-intro { align-items:flex-start; flex-direction:column; gap:24px; margin-bottom:32px; }
  .form-grid { grid-template-columns:1fr; gap:20px; }
  .form-section { padding:22px; }
  .empty-state,.member-empty,.directory-empty,.opportunities-empty { padding:40px 20px; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important} }