:root { --accent:#C0603A; --paper:#0D1320; --ink:#EDE6DA; --muted:#98A3B4; --line:#253247; --rule:#253247; --moon:#C6D0DE; --bone:#EDE6DA; --raise:#131C2E; --edge:#2A3A57; --dim:#8A97AC; --faint:#6C7A91; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:84px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'EB Garamond',Georgia,serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(192,96,58,.35); }
a:hover { color:var(--ink); border-bottom-color:var(--ink); }
button,input,select,textarea { font-family:inherit; }
::selection { background:#35486B; color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
h1,h2,h3 { font-weight:400; letter-spacing:-.03em; margin:0; }
p { margin:0; }

.skip { position:absolute; left:-9999px; top:8px; z-index:130; background:var(--ink); color:var(--paper); padding:10px 16px; border:none; }
.skip:focus { left:8px; }
.grain { position:fixed; inset:0; z-index:110; pointer-events:none; opacity:.09; mix-blend-mode:screen; background-size:180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress { position:fixed; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#35486B,#C0603A); transform:scaleX(0); transform-origin:0 50%; z-index:115; }
.cursor { position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--moon); pointer-events:none; z-index:112; opacity:0; mix-blend-mode:difference; will-change:transform; }
@media (hover:none) { .cursor { display:none; } }

.site-head { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px clamp(20px,4vw,48px); mix-blend-mode:difference; transition:background .35s ease, padding .35s ease; }
.site-head.scrolled { mix-blend-mode:normal; background:rgba(13,19,32,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding-block:13px; border-bottom:1px solid rgba(42,58,87,.6); }
.site-head a { color:var(--ink); border:none; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.wordmark span { opacity:.5; }
.site-head nav { display:flex; gap:clamp(16px,2.5vw,32px); flex-wrap:wrap; }
.site-head nav a { opacity:.65; }
.site-head nav a:hover { opacity:1; }

.wrap { max-width:1440px; margin:0 auto; padding-inline:clamp(20px,4vw,48px); }
.kicker { color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.mono { font-family:'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; font-size:10.5px; color:var(--dim); }
.lede { font-size:19px; line-height:1.6; color:#B4BECD; text-wrap:pretty; }

.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:120px clamp(20px,4vw,48px) clamp(32px,5vw,56px); overflow:hidden; }
.hero h1 { position:relative; font-family:'Fraunces','EB Garamond',Georgia,serif; font-style:italic; font-weight:330; font-size:clamp(50px,12.5vw,190px); line-height:.9; margin:0 0 clamp(28px,4vw,48px); letter-spacing:-.02em; text-shadow:0 0 48px rgba(198,208,222,.14); }
.hero-foot { position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(24px,4vw,64px); align-items:end; border-top:1px solid var(--line); padding-top:clamp(20px,3vw,32px); max-width:min(100%,1100px); }

.swatch { background:repeating-linear-gradient(135deg,#1A2740 0 14px,#14203A 14px 28px); }
.tag { position:absolute; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; }

.btn { display:inline-block; padding:15px 30px; background:var(--bone); color:var(--paper); border:1px solid var(--bone); cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .35s ease; }
.btn:hover { background:var(--accent); border-color:var(--accent); color:var(--bone); box-shadow:0 0 26px rgba(192,96,58,.4); }
.btn.ghost { background:transparent; color:var(--ink); border-color:#3A4A63; }
.btn.ghost:hover { background:var(--bone); color:var(--paper); border-color:var(--bone); }
.btn.light { background:var(--bone); color:var(--paper); border-color:var(--bone); }
.btn.block { width:100%; text-align:center; }
.btn.cta { background:var(--accent); border-color:var(--accent); color:#FFF3EC; box-shadow:0 0 22px rgba(192,96,58,.35); }
.btn.cta:hover { background:#D06E44; border-color:#D06E44; color:#fff; box-shadow:0 0 34px rgba(192,96,58,.55); }

.marquee-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0; background:#111827; }
.marquee { display:flex; gap:48px; white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7F8CA1; will-change:transform; }

section.band { padding-block:clamp(72px,10vw,140px); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2 { font-size:clamp(34px,6vw,78px); line-height:.94; }

.filters { display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; margin-bottom:clamp(32px,5vw,56px); }
.chip { display:inline-block; padding:10px 20px; border:1px solid #303E56; background:transparent; color:var(--muted); cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.chip:hover { border-color:var(--bone); color:var(--bone); }
.chip[aria-pressed="true"] { background:var(--bone); border-color:var(--bone); color:var(--paper); }
.chip-n { opacity:.55; margin-left:4px; }
.chip[aria-pressed="true"] { box-shadow:0 0 16px rgba(237,230,218,.25); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:clamp(40px,5vw,72px) clamp(24px,3vw,40px); align-items:start; }
.card a { display:block; border:none; }
.frame { position:relative; aspect-ratio:4/5; border:1px solid var(--edge); overflow:hidden; background:var(--raise); transition:box-shadow .5s ease,border-color .5s ease,outline-color .5s ease; }
/* gallery frames: a floating frame line offset from the piece, an inner lip, and depth off the wall */
.frame[data-mask] { border-color:#3A4A63; outline:1px solid rgba(237,230,218,.16); outline-offset:7px; box-shadow:0 18px 50px rgba(4,8,16,.55); }
.frame[data-mask]::after { content:''; position:absolute; inset:0; border:1px solid rgba(237,230,218,.07); pointer-events:none; z-index:2; }
.card a:hover .frame { border-color:#4A5E80; outline-color:rgba(237,230,218,.34); box-shadow:0 18px 50px rgba(4,8,16,.55), 0 0 36px rgba(53,72,107,.5), 0 0 12px rgba(192,96,58,.14); }
.frame > .inner { position:absolute; inset:0; will-change:transform; }
/* contain, never cover: cropping an artwork to fit a box is not an option */
.frame img { width:100%; height:100%; object-fit:contain; display:block; }
.ph { position:absolute; inset:0; display:grid; place-content:center; gap:10px; text-align:center; padding:28px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); pointer-events:none; }
.ph em { font-family:'EB Garamond',Georgia,serif; font-style:italic; font-size:21px; letter-spacing:0; text-transform:none; color:var(--dim); line-height:1.3; }
.num { top:14px; left:16px; color:#7F8CA1; }
.status { bottom:14px; left:16px; background:var(--accent); color:var(--bone); }
.status.sold { background:var(--bone); color:var(--paper); }
.status.nfs { background:var(--paper); color:var(--dim); border:1px solid var(--edge); }
.card-foot { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.card-foot h3 { font-size:24px; line-height:1.15; color:var(--ink); letter-spacing:-.01em; }
.card-foot .price { font-size:18px; color:#B4BECD; white-space:nowrap; }
.card-story { font-style:italic; font-size:15.5px; line-height:1.5; color:var(--dim); margin-top:10px; max-width:38ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-cta { display:grid; gap:9px; justify-items:end; }
.acquire { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid rgba(192,96,58,.45); padding:7px 14px; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.card a:hover .acquire { background:var(--accent); color:var(--bone); border-color:var(--accent); box-shadow:0 0 18px rgba(192,96,58,.4); }

.light-band { background:var(--bone); color:#1A1714; overflow:hidden; position:relative; z-index:2; }
.light-band h1,.light-band h2,.light-band h3 { color:#1A1714; }
.light-band .lede { color:#4B443B; }
.light-band .kicker { color:#A84B25; }
.light-band .mono { color:#8A7F70; }
.light-band .class-row { border-color:#D3C9B7; }
.dark { background:#0A0F19; color:var(--bone); overflow:hidden; border-top:1px solid var(--line); }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(40px,6vw,96px); align-items:start; }
.sticky { position:sticky; top:100px; }
.class-row { border-bottom:1px solid var(--rule); padding:28px 0; }
.class-row:first-child { border-top:1px solid var(--rule); }
.class-row h3 { font-size:28px; }
.row-top { display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border-top:1px solid var(--line); }
.facts > div { padding:20px 20px 20px 0; border-bottom:1px solid var(--line); }
.facts .val { font-size:21px; }

.foot-cta { font-size:clamp(40px,11vw,168px); line-height:.86; letter-spacing:-.04em; margin-bottom:clamp(40px,6vw,80px); }
footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(36px,5vw,72px); border-top:1px solid var(--rule); padding-top:clamp(32px,4vw,48px); }
.contact-row { padding:20px 0; border-bottom:1px solid var(--rule); }
.contact-row a,.contact-row p { font-size:22px; color:var(--bone); }
.contact-row a { border-bottom-color:var(--edge); }
.legal { border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px clamp(20px,4vw,48px); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.legal a { color:var(--faint); border:none; }
.legal a:hover { color:var(--bone); }
.sub-form { display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
.sub-form input { flex:1 1 200px; padding:14px 16px; font-size:18px; background:transparent; border:1px solid var(--edge); color:var(--bone); outline:none; }
.sub-form input:focus { border-color:var(--accent); }

.panel-scrim { position:fixed; inset:0; z-index:116; display:flex; justify-content:flex-end; }
.panel-scrim > .bg { position:absolute; inset:0; background:rgba(6,9,16,.7); }
.panel { position:relative; width:min(540px,100%); height:100%; overflow-y:auto; background:#111827; border-left:1px solid var(--edge); }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:20px clamp(20px,5vw,36px); border-bottom:1px solid var(--line); position:sticky; top:0; background:#111827; z-index:2; }
.panel-body { padding:clamp(24px,5vw,36px); display:grid; gap:18px; }
.x { background:none; border:none; cursor:pointer; font-size:22px; line-height:1; color:#8A7F72; padding:6px 10px; }
.x:hover { color:var(--bone); }
label.field { display:block; }
label.field > span { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:9px; }
input.text,textarea.text,select.text { width:100%; padding:13px 15px; font-size:18px; background:var(--paper); border:1px solid #303E56; color:var(--ink); outline:none; }
input.text:focus,textarea.text:focus,select.text:focus { border-color:var(--accent); }
textarea.text { resize:vertical; }
.err { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#E08A6A; margin-top:8px; }
.notice { font-size:16px; line-height:1.5; color:#E08A6A; padding:15px; border:1px solid #5A3324; background:#1C1310; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.toggle { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.toggle button { padding:15px; border:1px solid #303E56; background:var(--paper); color:var(--muted); cursor:pointer; text-align:left; font-size:17px; }
.toggle button[aria-pressed="true"] { border-color:var(--accent); background:#24170F; color:var(--ink); }
.tick { width:48px; height:48px; border-radius:50%; background:var(--accent); color:var(--bone); display:grid; place-items:center; font-size:22px; margin-bottom:26px; box-shadow:0 0 24px rgba(192,96,58,.45); }

.lightbox { position:fixed; inset:0; z-index:118; background:rgba(6,9,16,.96); display:grid; place-items:center; padding:5vmin; cursor:zoom-out; }
.lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; }

.admin-card { background:var(--raise); border:1px solid var(--line); padding:22px 24px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 24px; align-items:start; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:48px; }
.stats > div { padding:22px 24px 22px 0; }
.stats .val { font-size:40px; letter-spacing:-.03em; }
.mini { padding:10px 15px; background:transparent; border:1px solid #303E56; color:var(--muted); cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.mini:hover { border-color:var(--bone); color:var(--bone); }
.mini.solid { background:var(--bone); border-color:var(--bone); color:var(--paper); }
.mini.danger:hover { color:#E08A6A; border-color:#E08A6A; }
.mini.photo { background:#2F6B41; border-color:#2F6B41; color:#EAF5EC; }
.mini.photo:hover { background:#3C8A54; border-color:#3C8A54; color:#fff; }
.empty { font-size:18px; color:var(--dim); padding:30px; border:1px dashed #303E56; }

@media (prefers-reduced-motion:reduce) { *{animation-duration:.001s!important;transition:none!important} html{scroll-behavior:auto} .cursor{display:none} }

/* night layer */
.stars { position:fixed; inset:0; z-index:1; pointer-events:none; }
.stars span { position:absolute; border-radius:50%; background:#DCE4F0; }
main { position:relative; z-index:2; }
.moon { position:absolute; top:8%; right:14%; width:min(38vw,460px); aspect-ratio:1; border-radius:50%; pointer-events:none; filter:blur(2px);
  background:radial-gradient(circle at 38% 34%, rgba(232,238,248,.5) 0%, rgba(160,180,215,.22) 42%, rgba(50,70,110,.08) 68%, rgba(13,19,32,0) 74%); }
.glow { position:absolute; inset:-20% -10%; pointer-events:none;
  background:radial-gradient(60% 50% at 72% 18%, rgba(53,72,107,.55) 0%, rgba(13,19,32,0) 70%); }
/* moon dust and the odd ember, drifting up behind the name */
.motes { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.motes span { position:absolute; border-radius:50%; background:var(--moon); opacity:0; will-change:transform,opacity; }
.motes span.dust { box-shadow:0 0 5px rgba(198,208,222,.55); }
.motes span.ember { background:var(--accent); box-shadow:0 0 7px rgba(192,96,58,.85); }
@keyframes sl-rise-a { 0% { transform:translate(0,0); opacity:0 } 8% { opacity:.85 } 80% { opacity:.45 } 100% { transform:translate(3vw,-56vh); opacity:0 } }
@keyframes sl-rise-b { 0% { transform:translate(0,0); opacity:0 } 8% { opacity:.65 } 80% { opacity:.35 } 100% { transform:translate(-4vw,-48vh); opacity:0 } }
/* tidy two-row header on phones, and studio controls sized for thumbs */
@media (max-width:700px) {
  /* single column: sticky has nothing to stick beside, and iOS displaces it over the content below */
  .sticky { position:static; }
  .mini { padding:13px 16px; font-size:11px; }
  .admin-grid { gap:14px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .site-head { justify-content:center; padding:12px 16px 10px; gap:6px; }
  .site-head .wordmark { width:100%; text-align:center; }
  .site-head nav { width:100%; justify-content:center; gap:16px; }
  .site-head a { font-size:10px; letter-spacing:.13em; }
  .site-head.scrolled { padding-block:9px 8px; }
}
.sheen { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(198,208,222,.22) 50%, rgba(255,255,255,0) 62%); }
@keyframes sl-twinkle { 0%,100% { opacity:.15 } 50% { opacity:.85 } }