/* Off◆Piste Art Space: shared styles for the inner pages.
   Tokens mirror the design system (tokens/*.css). No raw values outside the scale. */
:root{
  --white:#FFFFFF; --snow-50:#F6F6F5; --snow-100:#ECECEA; --grey-400:#8A8A8A; --grey-600:#6B6B6B;
  --run-black:#111111; --boundary-gold:#F2C230; --alert-red:#D22E26;
  --action-fill-hover:#000000;
  --font-display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-zh:"Noto Sans HK","Instrument Sans",system-ui,sans-serif;
  --display-1:76px; --display-2:56px; --display-3:40px;
  --heading-1:30px; --heading-2:24px; --heading-3:19px;
  --body-lg:18px; --body:16px; --body-sm:14px; --caption:13px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:192px;
  --content-max:1320px; --gutter:32px; --control-h:44px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur-control:140ms; --dur-surface:240ms; --move-enter:12px;
}
@media (min-width:1280px){:root{--gutter:64px}}
@media (max-width:720px){:root{--display-1:44px; --display-2:36px; --display-3:30px; --heading-1:24px; --gutter:16px}}
@media (prefers-reduced-motion:reduce){:root{--dur-control:0ms; --dur-surface:0ms; --move-enter:0px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--white); color:var(--run-black); font-family:var(--font-body); font-size:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased}
.zh,[lang="zh-HK"]{font-family:var(--font-zh)}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--run-black); outline-offset:2px}
.tnum{font-feature-settings:"tnum" 1,"lnum" 1}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter)}
.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-6)}
@media (max-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--space-4)}}
.measure{max-width:64ch}
.caption{font-size:var(--caption); color:var(--grey-600)}
.secondary{color:var(--grey-600)}
.ph{color:var(--grey-600)}

/* Wordmark (typeset placeholder) */
.wm{font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; font-size:var(--s); line-height:1; display:inline-flex; align-items:baseline; white-space:nowrap}
.wm .d{display:inline-block; flex:0 0 auto; width:calc(var(--s) * .3228); height:calc(var(--s) * .3228); background:currentColor;
  margin:0 calc(var(--s) * .0934) 0 calc(var(--s) * .0839); transform:translateY(calc(var(--s) * -.0669)) rotate(45deg)}
.wm-h{display:inline-flex; align-items:baseline; gap:calc(var(--s) * .45); text-decoration:none}
.wm-h .zh{font-weight:500; font-size:calc(var(--s) * .78); line-height:1}
.wm-stack{--s:40px; display:inline-grid; grid-template-columns:max-content max-content max-content; row-gap:calc(var(--s) * .22); justify-items:start}
.wm-stack .l{font:700 var(--s)/1 var(--font-display); letter-spacing:-0.02em; align-self:baseline}
.wm-stack .h{font:500 calc(var(--s) * .78)/1 var(--font-zh); align-self:baseline}
.wm-stack .sq{display:block; width:calc(var(--s) * .3228); height:calc(var(--s) * .3228); background:currentColor; align-self:baseline}
.wm-stack .sq.lat{transform:translateY(calc(var(--s) * -.0669)) rotate(45deg)}
.wm-stack .sq.han{transform:translateY(calc(var(--s) * -.0036)) rotate(45deg)}
.wm-stack .desc{grid-column:1 / -1; font:400 var(--body-sm)/1.5 var(--font-body); margin-top:var(--space-1)}

/* Controls */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); height:var(--control-h); padding:0 var(--space-5); border:1px solid var(--run-black); font:600 var(--body)/1 var(--font-body); text-decoration:none; cursor:pointer; border-radius:0; white-space:nowrap;
  transition:background var(--dur-control) var(--ease), color var(--dur-control) var(--ease)}
.btn-primary{background:var(--run-black); color:var(--white)}
.btn-primary:hover{background:var(--action-fill-hover)}
.btn-secondary{background:var(--white); color:var(--run-black)}
.btn-secondary:hover{background:var(--run-black); color:var(--white)}
.btn:disabled{background:var(--snow-100); color:var(--grey-400); border-color:var(--grey-400); cursor:not-allowed}
.btn svg,.link svg{width:18px; height:18px; flex:0 0 auto}
.link{display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; text-decoration:none; transition:opacity var(--dur-control) var(--ease)}
.link:hover{opacity:.6}
.tlink{text-underline-offset:3px; text-decoration-thickness:1px; transition:opacity var(--dur-control) var(--ease)}
.tlink:hover{opacity:.6}
.tag{display:inline-flex; align-items:center; height:24px; padding:0 var(--space-3); border:1px solid var(--run-black); border-radius:999px; font-size:var(--caption); font-weight:500; line-height:1; white-space:nowrap}
.tag.solid{background:var(--run-black); color:var(--white)}
.avail{display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--body-sm); font-weight:500}
.avail::before{content:""; width:8px; height:8px; border-radius:50%; border:1px solid var(--run-black)}

/* Crop-mark brackets: the system's only framing device */
.crop{position:relative}
.crop::before,.crop::after,.crop>.c3,.crop>.c4{content:""; position:absolute; width:8px; height:8px; border:0 solid var(--run-black); pointer-events:none}
.crop::before{top:0; left:0; border-top-width:1px; border-left-width:1px}
.crop::after{top:0; right:0; border-top-width:1px; border-right-width:1px}
.crop>.c3{bottom:0; left:0; border-bottom-width:1px; border-left-width:1px}
.crop>.c4{bottom:0; right:0; border-bottom-width:1px; border-right-width:1px}

/* Boundary band: the only patterned surface (gold banded with ink) */
.band{height:8px; background:repeating-linear-gradient(135deg, var(--boundary-gold) 0 8px, var(--run-black) 8px 16px)}

/* Header (scrolls away; never fixed) */
.site-header{position:relative; z-index:30; border-bottom:1px solid var(--run-black); background:var(--white)}
.site-header.over{position:absolute; top:0; left:0; right:0; background:transparent}
.site-header .bar{height:var(--space-8); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6)}
.site-header nav{display:flex; align-items:center; gap:var(--space-6); font-size:var(--body-sm)}
.site-header nav a{text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; transition:opacity var(--dur-control) var(--ease)}
.site-header nav a:hover{opacity:.6}
.site-header nav a[aria-current="page"]{border-bottom-color:var(--run-black)}
.menu-btn{display:none; font:600 var(--body-sm)/1 var(--font-body); background:none; border:0; padding:var(--space-2) 0; cursor:pointer; color:inherit; align-items:center; gap:var(--space-2)}
.menu-btn svg{width:20px; height:20px}
@media (max-width:900px){
  .site-header nav{display:none}
  .menu-btn{display:inline-flex}
  .site-header.open nav{display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--white); border-bottom:1px solid var(--run-black); padding:0 var(--gutter) var(--space-4)}
  .site-header.open nav a{padding:var(--space-3) 0; border-bottom:1px solid var(--snow-100); font-size:var(--body)}
  .site-header.open nav a[aria-current="page"]{border-bottom-color:var(--run-black)}
  .site-header .wm-h .zh{display:none}
}

/* Page scaffolding */
main{display:block}
.page-head{padding:var(--space-9) 0 var(--space-8)}
.page-head .eyebrow{font-size:var(--body-sm); color:var(--grey-600); margin:0 0 var(--space-4)}
.page-head h1{font:700 var(--display-1)/1.04 var(--font-display); letter-spacing:-0.02em; margin:0}
.page-head .lede{font-size:var(--body-lg); margin:var(--space-5) 0 0; max-width:52ch}
.section{padding:0 0 var(--space-10)}
.sec-head{border-top:2px solid var(--run-black); padding-top:var(--space-5); display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-5); margin-bottom:var(--space-7)}
.sec-head h2{font:700 var(--display-3)/1.04 var(--font-display); letter-spacing:-0.02em; margin:0}
.sec-head .count{font-size:var(--body-sm); color:var(--grey-600)}
h3.h{font:700 var(--heading-1)/1.18 var(--font-display); letter-spacing:-0.02em; margin:0}
h4.h{font:700 var(--heading-3)/1.18 var(--font-display); letter-spacing:-0.01em; margin:0}
.prose p{margin:0 0 var(--space-4); max-width:64ch}
.prose p:last-child{margin-bottom:0}
.reveal{transform:translateY(var(--move-enter)); transition:transform var(--dur-surface) var(--ease)}
.reveal.in{transform:none}
@media (max-width:720px){.page-head{padding:var(--space-7) 0 var(--space-7)} .section{padding-bottom:var(--space-9)}}

/* Image plates: works on white walls, never cropped into shapes */
.plate{background:var(--snow-50); display:grid; place-items:center; overflow:hidden}
.plate img{width:100%; height:100%; object-fit:contain}
.plate.cover img{object-fit:cover}
.plate .empty{display:grid; justify-items:center; gap:var(--space-3); color:var(--grey-600); font-size:var(--caption)}

/* Exhibition cards */
.ex-list{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-6); row-gap:var(--space-9)}
.ex-card{grid-column:span 6}
.ex-card .plate{aspect-ratio:3 / 2; transition:transform var(--dur-surface) var(--ease)}
.ex-card a.plate-link{display:block; text-decoration:none}
.ex-card a.plate-link:hover .plate{transform:translateY(-12px)}
.ex-card .meta{margin-top:var(--space-5); display:grid; gap:var(--space-2)}
.ex-card h3{font:700 var(--heading-1)/1.18 var(--font-display); letter-spacing:-0.02em; margin:var(--space-2) 0 0}
.ex-card h3 a{text-decoration:none}
.ex-card .dates{font-size:var(--body-lg)}
.ex-card .artists{color:var(--grey-600)}
.ex-card .soft{border-top:1px solid var(--snow-100); margin-top:var(--space-3); padding-top:var(--space-3)}
@media (max-width:860px){.ex-card{grid-column:1 / -1}}

/* Artwork cards ("not a card": plate, metadata, soft rule, price line) */
.works-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--space-6); row-gap:var(--space-8)}
.work{display:flex; flex-direction:column; justify-content:flex-start; align-self:start; text-decoration:none; background:none; border:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%}
.work .plate{aspect-ratio:4 / 5; padding:var(--space-5); transition:transform var(--dur-surface) var(--ease)}
.work:hover .plate{transform:translateY(-12px)}
.work .meta{margin-top:var(--space-4); display:grid; gap:2px}
.work .t{font-weight:600}
.work .t .zh{font-weight:500; margin-left:var(--space-2)}
.work .a{color:var(--grey-600); font-size:var(--body-sm)}
.work .m{color:var(--grey-600); font-size:var(--body-sm)}
.work .price{border-top:1px solid var(--snow-100); margin-top:var(--space-3); padding-top:var(--space-3); display:flex; justify-content:space-between; align-items:center; gap:var(--space-3)}
@media (max-width:1100px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.works-grid{grid-template-columns:1fr}}

/* Filters (catalogue sidebar) */
.filters{display:grid; gap:var(--space-7); align-content:start}
.filters h3{font:500 var(--body-sm)/1.5 var(--font-body); color:var(--grey-600); margin:0 0 var(--space-3)}
.filters ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1)}
.filters button{font:inherit; background:none; border:0; padding:var(--space-1) 0; cursor:pointer; color:inherit; display:flex; justify-content:space-between; width:100%; text-align:left; gap:var(--space-3); transition:opacity var(--dur-control) var(--ease)}
.filters button:hover{opacity:.6}
.filters button .n{color:var(--grey-600)}
.filters button[aria-pressed="true"]{font-weight:600}
.filters button[aria-pressed="true"] .lbl{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.empty-state{padding:var(--space-8) 0; color:var(--grey-600)}

/* Definition rows */
.facts{margin:0; display:grid}
.facts > div{display:grid; grid-template-columns:160px 1fr; gap:var(--space-4); padding:var(--space-4) 0; border-top:1px solid var(--run-black)}
.facts > div:last-child{border-bottom:1px solid var(--run-black)}
.facts dt{font-size:var(--body-sm); color:var(--grey-600)}
.facts dd{margin:0}
@media (max-width:720px){.facts > div{grid-template-columns:1fr; gap:var(--space-1)}}

/* Tables */
.table-wrap{overflow-x:auto}
table.rates{width:100%; border-collapse:collapse; font-size:var(--body)}
table.rates caption{text-align:left; font-size:var(--body-sm); color:var(--grey-600); padding-bottom:var(--space-3)}
table.rates th,table.rates td{padding:var(--space-4) var(--space-4) var(--space-4) 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--snow-100)}
table.rates thead th{font:500 var(--body-sm)/1.4 var(--font-body); color:var(--grey-600); border-bottom:1px solid var(--run-black)}
table.rates tbody th{font-weight:500}
table.rates tbody th .sub{display:block; font-weight:400; font-size:var(--body-sm); color:var(--grey-600)}
table.rates td.num{font-feature-settings:"tnum" 1,"lnum" 1; white-space:nowrap}
table.rates tr.group th{padding-top:var(--space-6); font:700 var(--heading-3)/1.2 var(--font-display); letter-spacing:-0.01em; border-bottom:1px solid var(--run-black)}
table.rates tbody tr:last-child th,table.rates tbody tr:last-child td{border-bottom:1px solid var(--run-black)}

/* Forms */
.form{display:grid; gap:var(--space-8)}
.fieldset{border:0; margin:0; padding:0; display:grid; gap:var(--space-5)}
.fieldset legend{font:700 var(--heading-2)/1.2 var(--font-display); letter-spacing:-0.01em; padding:0; margin-bottom:var(--space-5); border-top:2px solid var(--run-black); padding-top:var(--space-4); width:100%}
.fieldset legend .step{font:500 var(--body-sm)/1 var(--font-body); color:var(--grey-600); display:block; margin-bottom:var(--space-2)}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5) var(--space-5)}
.fields .full{grid-column:1 / -1}
@media (max-width:720px){.fields{grid-template-columns:1fr}}
.field{display:grid; gap:var(--space-2); align-content:start}
.field label,.field .label{font-size:var(--body-sm); font-weight:500}
.field .opt{color:var(--grey-600); font-weight:400}
.field .hint{font-size:var(--caption); color:var(--grey-600)}
.field .err{font-size:var(--caption); color:var(--alert-red); display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--alert-red)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=time],select,textarea{
  width:100%; min-width:0; height:var(--control-h); padding:0 var(--space-4); border:1px solid var(--run-black); border-radius:0; background:var(--white); color:var(--run-black);
  font:400 var(--body) var(--font-body); appearance:none; -webkit-appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:var(--space-8)}
textarea{height:auto; min-height:128px; padding:var(--space-3) var(--space-4); line-height:1.5; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--grey-600)}
input[type=file]{font:400 var(--body-sm) var(--font-body)}
.choice{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5)}
.check{display:flex; gap:var(--space-3); align-items:flex-start; cursor:pointer; font-size:var(--body)}
.check input{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; border:1px solid var(--run-black); border-radius:0; background:var(--white); display:grid; place-items:center; cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--run-black)}
.check input[type=checkbox]:checked::after{content:""; width:10px; height:5px; border:2px solid var(--white); border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
.check input[type=radio]:checked::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--white)}
.seg{display:inline-flex; justify-self:start; border:1px solid var(--run-black)}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:block; padding:var(--space-3) var(--space-5); font-weight:500; transition:background var(--dur-control) var(--ease), color var(--dur-control) var(--ease)}
.seg label + label span{border-left:1px solid var(--run-black)}
.seg input:checked + span{background:var(--run-black); color:var(--white)}
.seg input:focus-visible + span{outline:2px solid var(--run-black); outline-offset:2px}

/* Dialog */
dialog.sheet{border:1px solid var(--run-black); border-radius:0; padding:0; max-width:min(1100px, calc(100vw - 2 * var(--gutter))); width:100%; max-height:calc(100vh - 2 * var(--gutter)); color:var(--run-black)}
dialog.sheet::backdrop{background:rgba(17,17,17,.4)}
dialog.sheet .inner{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
dialog.sheet .plate{min-height:420px; max-height:calc(100vh - 2 * var(--gutter) - 2px); padding:var(--space-6)}
dialog.sheet .plate img{max-height:calc(100vh - 2 * var(--gutter) - 66px)}
dialog.sheet .body{padding:var(--space-6); display:grid; gap:var(--space-5); align-content:start; overflow:auto}
dialog.sheet .close{justify-self:end; width:40px; height:40px; display:grid; place-items:center; background:none; border:0; cursor:pointer; margin:calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 0; transition:opacity var(--dur-control) var(--ease)}
dialog.sheet .close:hover{opacity:.6}
dialog.sheet .close svg{width:24px; height:24px}
dialog.sheet .label-card{padding:var(--space-5)}
@media (max-width:860px){dialog.sheet .inner{grid-template-columns:1fr} dialog.sheet .plate{min-height:280px; max-height:55vh} dialog.sheet .plate img{max-height:calc(55vh - 64px)}}

/* Footer */
footer.site-footer{padding:var(--space-9) 0 var(--space-8)}
.foot{border-top:2px solid var(--run-black); padding-top:var(--space-7); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--space-6); row-gap:var(--space-7); font-size:var(--body-sm)}
.foot .c1{grid-column:span 3}
.foot .c2,.foot .c3{grid-column:span 3}
.foot .c4{grid-column:span 3}
.foot h4{font:500 var(--body-sm)/1.5 var(--font-body); color:var(--grey-600); margin:0 0 var(--space-2)}
.foot p{margin:0}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1)}
.foot a{text-decoration:none} .foot a:hover{opacity:.6}
.foot .endorse img{display:block; width:150px; height:auto; margin-top:var(--space-2)}
.foot-base{display:flex; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-8); font-size:var(--caption); color:var(--grey-600)}
@media (max-width:1000px){.foot .c1,.foot .c2,.foot .c3,.foot .c4{grid-column:span 6}}
@media (max-width:560px){.foot .c1,.foot .c2,.foot .c3,.foot .c4{grid-column:1 / -1}.foot-base{flex-direction:column}}

/* Toast */
.toast{position:fixed; left:var(--gutter); bottom:var(--gutter); z-index:50; background:var(--run-black); color:var(--white); padding:var(--space-3) var(--space-5); font-size:var(--body-sm);
  transform:translateY(calc(100% + var(--gutter) + 8px)); visibility:hidden; transition:transform var(--dur-surface) var(--ease), visibility 0s linear var(--dur-surface)}
.toast.show{transform:none; visibility:visible; transition:transform var(--dur-surface) var(--ease)}

@media print{
  .site-header,.site-footer,.no-print,.toast{display:none !important}
  body{font-size:12px}
}