/* Ashgrove — THE GALLERY
   Not white space: light. A white cube is a wall under track lights — a
   bright pool, falling away to a soft grey at the corners — with one thing
   standing off it in its own shadow, and a label. So every section is a
   wall: lit as the reader reaches it, its pool leaning toward the cursor,
   the work's shadow falling away from the light. One sans-serif in two
   weights; black, white, one grey, and the red of a sold dot. Nothing on
   the page moves faster than a breath. */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
:root{
  --wall:#ecebe7; --wall-hi:#f8f8f6; --wall-lo:#d8d6d0; --line:#d9d7d1;
  --ink:#0f0f0f; --ink-2:#4f4f4d; --ink-3:#6d6c69;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --e:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,6vw,96px);
}
body{background:var(--wall);color:var(--ink-2);font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--sans);font-weight:300;color:var(--ink);line-height:1.02;letter-spacing:-.04em}
.demo{background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;padding:9px 16px;text-align:center;position:relative;z-index:2}
.demo b{font-weight:400;color:#fff}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:28px}
.small{font-size:14px;color:var(--ink-3);max-width:62ch;margin-top:clamp(48px,8vh,96px);line-height:1.75;position:relative}

.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);background:var(--wall-hi)}
.brand{font-size:1.25rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;min-height:44px;display:inline-flex;align-items:center}
.top nav{display:flex;gap:28px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.top nav a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:border-color 900ms var(--e)}
.top nav a:hover{border-color:var(--ink)}
@media(max-width:600px){.top{flex-wrap:wrap;row-gap:4px}.top nav{width:100%;gap:20px}}

/* ── the wall ─────────────────────────────────────────────────────────
   The room's own falloff, then the pool of one light (.beam): it rests over
   the wall's focus and leans toward the cursor (--bx/--by, set by the
   page's script); before the reader arrives the wall is dim. */
.wall{position:relative;isolation:isolate;overflow:hidden;--bx:50%;--by:30%;--sx:0px;--sy:16px;
  padding:clamp(80px,14vh,170px) var(--pad);
  background:radial-gradient(120% 100% at 55% 20%,var(--wall-hi) 0%,var(--wall) 52%,var(--wall-lo) 100%)}
.wall::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#2a2925;opacity:.2;
  transition:opacity 1800ms cubic-bezier(.4,0,.2,1) 150ms}
.wall.lit::after{opacity:0}
.beam{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 2200ms cubic-bezier(.4,0,.2,1) 450ms;
  background:
    radial-gradient(24% 32% at var(--bx) calc(var(--by) + 9%),rgb(255 255 255 / 1) 0%,rgb(255 255 255 / .9) 38%,rgb(255 255 255 / .42) 62%,rgb(255 255 255 / 0) 78%),
    radial-gradient(40% 60% at var(--bx) calc(var(--by) + 16%),rgb(255 251 242 / .7) 0%,rgb(255 251 242 / .28) 55%,rgb(255 251 242 / 0) 80%)}
.wall.lit .beam{opacity:1}
/* between two walls, the floor-to-ceiling join of one room to the next */
.wall + .wall{border-top:1px solid rgb(0 0 0 / .06)}

/* the title wall: the name of the show at the door, lit */
.wall--title{min-height:calc(100svh - 120px);display:grid;align-content:center}
.title h1{font-size:clamp(2.75rem,1.4rem + 6.4vw,7.75rem);max-width:12ch;margin-bottom:36px}
.rule{display:block;width:min(100%,520px);height:1px;background:var(--ink);margin-bottom:36px;transform-origin:left;transform:scaleX(0);transition:transform 1800ms var(--e) 700ms}
.wall.lit .rule{transform:none}
.lead{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:300;line-height:1.4;letter-spacing:-.015em;max-width:34ch;color:var(--ink)}

/* one work, standing 4 cm off the wall: its shadow falls away from the light */
.wall--hang,.wall--fees,.wall--visit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,8vw,140px);align-items:center}
.work{margin:0;justify-self:center;width:min(100%,380px)}
.work--small{width:min(100%,300px)}
.work__canvas{position:relative;display:block;aspect-ratio:1;
  box-shadow:var(--sx) var(--sy) 34px -10px rgb(30 28 24 / .30),calc(var(--sx) * .3) calc(var(--sy) * .35) 6px -2px rgb(30 28 24 / .14),0 0 0 1px rgb(30 28 24 / .05);
  transition:box-shadow 1200ms var(--e)}
.work__canvas--tall{aspect-ratio:4/5}
.work__canvas svg{display:block;width:100%;height:100%}
.work__canvas picture{display:block;height:100%}
.work__canvas img{display:block;width:100%;height:100%;object-fit:cover}
.work__canvas::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgb(255 255 255 / .35),rgb(255 255 255 / 0) 4%,rgb(0 0 0 / 0) 94%,rgb(0 0 0 / .06))}
/* the label: small, exact, and always the same distance from the work */
.label{margin-top:18px;font-size:13px;line-height:1.55;color:var(--ink-2);max-width:32ch}
.label b{font-weight:500;color:var(--ink)}
.wall__text h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);margin-bottom:24px}
.wall__text p:last-child{max-width:44ch}

/* the room sheet: works catalogued, numbered, ruled apart */
.wall--sheet .eyebrow{margin-bottom:clamp(28px,5vh,56px)}
.sheet{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.sheet li{border-top:1px solid var(--line);padding-top:22px}
.sheet i{display:block;font-style:normal;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.sheet h3{font-size:1.625rem;font-weight:400;letter-spacing:-.025em;margin-bottom:12px}
.sheet p{max-width:32ch;font-size:15.5px}
.sheet--visit{grid-template-columns:1fr;gap:28px}
.sheet--visit li{display:grid;grid-template-columns:7.5rem 1fr;column-gap:24px;padding-top:18px}
.sheet--visit i{grid-row:1 / span 2;margin:4px 0 0}
.sheet--visit h3{font-size:1.375rem;margin-bottom:6px}

/* the price list: the card at the desk — small, and stated once */
.pricelist{justify-self:center;width:min(100%,360px);background:#fbfbf9;padding:26px 28px 30px;
  box-shadow:var(--sx) var(--sy) 30px -12px rgb(30 28 24 / .26),0 0 0 1px rgb(30 28 24 / .06);transition:box-shadow 1200ms var(--e)}
.pricelist__head{display:flex;justify-content:space-between;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.pricelist__row{display:flex;justify-content:space-between;gap:18px;align-items:baseline;font-size:15px;color:var(--ink)}
.pricelist__row b{font-weight:500;font-variant-numeric:tabular-nums}
.pricelist__note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--ink-3)}

/* the desk */
.desk h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);margin-bottom:20px}
.desk__hours{max-width:44ch;margin-bottom:36px}
.desk__row{display:flex;flex-wrap:wrap;gap:16px 48px;font-size:clamp(1.25rem,1rem + 1.2vw,2rem);font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.desk__row a{border-bottom:1px solid var(--ink);padding-bottom:2px;min-height:44px;display:inline-flex;align-items:flex-end}

.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;background:var(--wall-hi);
  border-top:1px solid var(--line);padding:18px var(--pad) 48px;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.back{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--ink);padding:9px 14px;min-height:44px;color:var(--ink)}
.back:hover{background:var(--ink);color:#fff}

/* the walls arrive the way the lights do: slowly, nothing travelling far */
.wall [data-focus],.wall .wall__text,.wall .sheet,.wall .small{opacity:0;transform:translateY(8px);transition:opacity 1600ms var(--e) 300ms,transform 1600ms var(--e) 300ms}
.wall .wall__text,.wall .sheet{transition-delay:700ms}
.wall.lit [data-focus],.wall.lit .wall__text,.wall.lit .sheet,.wall.lit .small{opacity:1;transform:none}

@media(max-width:820px){
  .wall--hang,.wall--fees,.wall--visit{grid-template-columns:1fr}
  .work{justify-self:start;width:min(78vw,320px)}
  .pricelist{justify-self:start}
  .sheet{grid-template-columns:1fr}
  .sheet--visit li{grid-template-columns:1fr}
  .sheet--visit i{grid-row:auto;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .wall::after,.beam,.rule,.wall [data-focus],.wall .wall__text,.wall .sheet,.wall .small{transition:none}
}