/* ============================================================
   LIZA GILES — design system
   Ground tones sampled from the artist's own raw linen canvas.
   ============================================================ */

:root{
  --linen:    #e7e0d3;
  --paper:    #f4f1ea;
  --paper-hi: #fbf9f5;
  --ink:      #16130f;
  --ink-soft: #3a352d;
  --mute:     #8b8477;
  --rule:     #cfc7b6;
  --sienna:   #a6543b;
  --cobalt:   #2b4886;
  --grass:    #4f5f33;

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --gut: clamp(18px, 4vw, 64px);
  --rail: 46px;
  --nav-h: 64px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.6;
  font-weight:400; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- type primitives ---------- */
.eyebrow{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--mute); font-weight:500;
}
.display{
  font-family:var(--display); font-weight:400;
  line-height:.86; letter-spacing:-.02em;
  font-optical-sizing:auto;
}
.serif-i{ font-family:var(--display); font-style:italic; font-weight:400; }

/* ---------- nav (ref 2: thin spread small-caps, centred mark) ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--gut);
  mix-blend-mode:normal; transition:background .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{ background:rgba(244,241,234,.86); backdrop-filter:blur(14px); border-bottom-color:var(--rule); }
.nav-set{ display:flex; gap:clamp(14px,2.2vw,34px); align-items:center; }
.nav-set.right{ justify-content:flex-end; }
.nav a.nlink{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  position:relative; padding:4px 0; white-space:nowrap; opacity:.78; transition:opacity .3s;
}
.nav a.nlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ink);
  transition:width .45s var(--ease);
}
.nav a.nlink:hover{ opacity:1; }
.nav a.nlink:hover::after, .nav a.nlink.on::after{ width:100%; }
.nav a.nlink.on{ opacity:1; }
.mark{
  font-family:var(--display); font-size:15px; letter-spacing:.34em;
  text-transform:uppercase; white-space:nowrap; padding-left:.34em;
}
.burger{ display:none; }
.menu{ display:none; }

/* ---------- left vertical rail (ref 1) ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:110;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:calc(var(--nav-h) + 18px) 0 18px; pointer-events:none;
}
.rail span, .rail a{
  writing-mode:vertical-rl; font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mute); pointer-events:auto;
}
.rail a:hover{ color:var(--ink); }
.rail .tick{ writing-mode:horizontal-tb; width:1px; height:56px; background:var(--rule); }

/* ============================================================
   HERO — giant type occluded by the work (ref 2)
   with an oversized wordmark bleeding off the base (ref 1)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; background:var(--linen);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:var(--nav-h) var(--gut) 0;
}
.hero-type{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  z-index:1; pointer-events:none; user-select:none;
}
/* one wide word so the painting occludes its centre and the ends
   still read either side — the layering trick from the reference */
.hero-type .word{
  font-size:clamp(92px,23vw,420px); color:var(--paper-hi);
  white-space:nowrap; letter-spacing:-.03em; line-height:.8;
}
/* the painting sits between the two halves of the word */
.hero-art{
  position:relative; z-index:2;
  width:clamp(240px, 40vw, 560px);
  aspect-ratio:1/1;
  will-change:transform;
}
.hero-art .panel{
  position:absolute; inset:0; background-repeat:no-repeat; background-size:400% 100%;
  will-change:transform; backface-visibility:hidden;
  box-shadow:0 24px 60px -30px rgba(22,19,15,.5);
}
.hero-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 var(--gut) clamp(14px,2.4vw,28px); gap:20px; pointer-events:none;
}
.hero-word{
  font-family:var(--display); font-weight:400; line-height:.76;
  font-size:clamp(52px,13.4vw,224px); letter-spacing:-.025em;
  color:var(--ink); white-space:nowrap; margin:0;
  transform:translateY(.1em);
}
.hero-meta{ text-align:right; padding-bottom:.9em; max-width:230px; }
.hero-meta p{ margin:0; font-size:11px; letter-spacing:.05em; color:var(--ink-soft); line-height:1.5; }
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(14px,2.4vw,28px); transform:translateX(-50%);
  z-index:4; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue i{ width:1px; height:34px; background:var(--rule); display:block; overflow:hidden; position:relative; }
.scroll-cue i::after{
  content:''; position:absolute; inset:0; background:var(--ink);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   SHOWCASE — the same panel choreography, but tied to normal
   scrolling instead of pinning the viewport. Each work assembles
   as it reaches the middle of the screen and comes apart as it
   leaves, so the page never stops moving under the reader.
   ============================================================ */
.showcase{ background:var(--linen); }
.showcase-item{
  position:relative; min-height:86svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,7vw,80px) var(--gut);
}
.showcase-stage{
  position:relative; width:clamp(220px,31vw,440px); aspect-ratio:1/1;
}
.showcase-stage .panel{
  position:absolute; inset:0; background-repeat:no-repeat; background-size:400% 100%;
  will-change:transform; backface-visibility:hidden;
  box-shadow:0 22px 60px -34px rgba(22,19,15,.55);
}
.showcase-word{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:0; overflow:hidden;
}
.showcase-word span{
  font-family:var(--display); font-size:clamp(70px,19vw,320px); line-height:.8;
  color:var(--paper-hi); white-space:nowrap; letter-spacing:-.03em;
  will-change:transform;
}
.showcase-cap{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(22px,5vw,54px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; z-index:3;
}
.showcase-cap .t{
  font-family:var(--display); font-size:clamp(19px,2.5vw,38px); line-height:1.02;
  letter-spacing:-.015em; max-width:13ch;
}
.showcase-cap .r{ text-align:right; font-size:11px; color:var(--ink-soft); line-height:1.6; }
.showcase-cap .n{ font-size:10px; letter-spacing:.2em; color:var(--mute); }

/* ---------- section chrome ---------- */
.sec{ padding:clamp(72px,11vw,168px) var(--gut); position:relative; }
.sec.linen{ background:var(--linen); }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; padding-bottom:clamp(24px,4vw,54px); border-bottom:1px solid var(--rule);
  margin-bottom:clamp(28px,4.6vw,64px); flex-wrap:wrap;
}
.sec-head h2{
  font-family:var(--display); font-weight:400; margin:0;
  font-size:clamp(30px,5.6vw,76px); line-height:.94; letter-spacing:-.02em;
}
.idx{ font-size:10px; letter-spacing:.2em; color:var(--mute); }

/* ---------- statement ---------- */
.statement{ max-width:1180px; margin:0 auto; }
.statement .quote{
  font-family:var(--display); font-weight:400;
  font-size:clamp(23px,3.5vw,50px); line-height:1.18; letter-spacing:-.015em;
  margin:0 0 clamp(26px,4vw,48px); max-width:19ch;
}
.statement .quote em{ font-style:italic; color:var(--sienna); }
.st-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(22px,3.4vw,56px); }
.st-cols p{ margin:0 0 1em; color:var(--ink-soft); font-size:14px; line-height:1.72; max-width:46ch; }

/* ---------- work grid ---------- */
.grid{ display:grid; gap:clamp(26px,4vw,72px) clamp(18px,2.6vw,40px); }
.grid.g2{ grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); }
.grid.g3{ grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }

.card{ position:relative; display:block; }
/* no panel behind the work — the artwork sits straight on the page ground */
.card .frame{
  position:relative; overflow:hidden; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.card .frame img{
  width:100%; height:auto; transition:transform 1.05s var(--ease), filter .6s;
  transform-origin:center;
}
.card:hover .frame img{ transform:scale(1.035); }
.card .cap{ display:flex; justify-content:space-between; gap:14px; padding-top:14px; align-items:baseline; }
.card .cap h3{
  font-family:var(--display); font-weight:400; font-size:clamp(16px,1.5vw,22px);
  margin:0; line-height:1.14; letter-spacing:-.01em;
}
.card .cap .yr{ font-size:10px; letter-spacing:.16em; color:var(--mute); white-space:nowrap; }
.card .sub{ font-size:11px; color:var(--mute); padding-top:5px; letter-spacing:.04em; }
.card .num{
  position:absolute; top:10px; left:10px; z-index:2; font-size:9px; letter-spacing:.18em;
  color:var(--paper-hi); mix-blend-mode:difference; opacity:.9;
}

/* ---------- editorial alternating rows (home selected works) ---------- */
.row{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,30px);
  align-items:end; margin-bottom:clamp(52px,9vw,150px);
}
.row .art{ grid-column:1 / span 8; }
.row.flip .art{ grid-column:5 / span 8; order:2; }
.row .info{ grid-column:10 / span 3; padding-bottom:8px; }
.row.flip .info{ grid-column:1 / span 3; order:1; }
.row .info h3{
  font-family:var(--display); font-weight:400; font-size:clamp(20px,2.5vw,36px);
  margin:0 0 10px; line-height:1.02; letter-spacing:-.015em;
}
.row .info dl{ margin:0; border-top:1px solid var(--rule); padding-top:12px; }
.row .info dt{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-top:9px; }
.row .info dd{ margin:2px 0 0; font-size:12.5px; color:var(--ink-soft); }

/* ---------- link / button ---------- */
.lnk{
  display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; padding-bottom:5px; border-bottom:1px solid var(--ink);
  transition:gap .4s var(--ease), color .3s;
}
.lnk:hover{ gap:16px; }
.lnk .ar{ font-family:var(--display); font-size:13px; line-height:1; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink); color:var(--paper-hi); padding:15px 30px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:var(--sienna); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper-hi); }

/* ---------- marquee ---------- */
.marq{ overflow:hidden; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:16px 0; background:var(--paper); }
.marq-in{ display:flex; gap:44px; width:max-content; animation:slide 44s linear infinite; }
.marq span{ font-family:var(--display); font-size:clamp(15px,2vw,26px); color:var(--ink-soft); white-space:nowrap; }
.marq span i{ color:var(--sienna); font-style:normal; padding-left:44px; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- exhibitions list ---------- */
.exh{ border-top:1px solid var(--rule); }
.exh-row{
  display:grid; grid-template-columns:78px 1fr auto; gap:clamp(14px,3vw,44px);
  padding:clamp(16px,2.4vw,26px) 0; border-bottom:1px solid var(--rule); align-items:baseline;
  transition:padding-left .5s var(--ease);
}
.exh-row:hover{ padding-left:12px; }
.exh-row .y{ font-size:11px; letter-spacing:.14em; color:var(--mute); }
.exh-row .t{ font-family:var(--display); font-size:clamp(18px,2.4vw,32px); line-height:1.08; }
.exh-row .v{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
.exh-row .d{ font-size:11px; color:var(--mute); text-align:right; white-space:nowrap; }

/* ============================================================
   WALL VIEW — multi-panel work shown the way it actually hangs:
   separate canvases with air between them, not one flat image.
   ============================================================ */
.wall{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 88% at 50% -14%, #fdfcfa 0%, #f3efe8 46%, #e8e2d8 100%);
  padding:clamp(26px,6vw,84px) clamp(18px,5vw,72px);
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(220px,34vw,460px);
}
.wall::after{   /* soft floor shadow grounds the wall as a room */
  content:''; position:absolute; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(to top, rgba(22,19,15,.07), transparent);
  pointer-events:none;
}
.wall-set{
  display:flex; align-items:center; justify-content:center;
  gap:var(--wgap, clamp(9px,1.5vw,22px));
  width:100%; transition:gap .75s var(--ease);
}
.wall-panel{
  position:relative; flex:0 0 auto;
  background-repeat:no-repeat; background-size:auto 100%;
  box-shadow:
    0 1px 2px rgba(22,19,15,.16),
    0 16px 30px -14px rgba(22,19,15,.34);
  transition:box-shadow .6s var(--ease), transform .75s var(--ease);
  will-change:transform;
}
.wall.joined .wall-set{ --wgap:0px; }
.wall.joined .wall-panel{
  box-shadow:none;
}
.wall.joined .wall-panel:first-child,
.wall.joined .wall-panel:only-child{
  box-shadow:0 1px 2px rgba(22,19,15,.16), 0 16px 30px -14px rgba(22,19,15,.34);
}
/* in joined mode the shadow belongs to the whole, not each slice */
.wall.joined .wall-set{ box-shadow:0 1px 2px rgba(22,19,15,.16), 0 18px 34px -14px rgba(22,19,15,.34); }
.wall-set{ box-shadow:none; transition:gap .75s var(--ease), box-shadow .6s var(--ease); }

.wall-ui{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding-top:14px;
}
.wall-toggle{ display:flex; gap:0; border:1px solid var(--rule); }
.wall-toggle button{
  padding:9px 15px; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); transition:.3s var(--ease);
}
.wall-toggle button.on{ background:var(--ink); color:var(--paper-hi); }
.wall-note{ font-size:11px; color:var(--mute); letter-spacing:.03em; max-width:44ch; }

/* ---------- product ---------- */
.prod{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,90px); align-items:start; }
.prod .shot{ background:transparent; padding:0; }
.prod h1{ font-family:var(--display); font-weight:400; font-size:clamp(30px,4.4vw,60px); margin:0 0 6px; line-height:1; letter-spacing:-.02em; }
.prod .price{ font-family:var(--display); font-size:clamp(19px,2.2vw,28px); margin:16px 0 22px; }
.prod .spec{ border-top:1px solid var(--rule); margin-top:24px; padding-top:18px; }
.prod .spec dt{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-top:15px; }
.prod .spec dd{ margin:4px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.6; }
.size-opts{ display:flex; gap:9px; flex-wrap:wrap; margin:6px 0 22px; }
.size-opts button{
  border:1px solid var(--rule); padding:11px 17px; font-size:11px; letter-spacing:.09em;
  transition:.3s var(--ease);
}
.size-opts button:hover{ border-color:var(--ink); }
.size-opts button.on{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink); }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--linen); padding:clamp(52px,8vw,110px) var(--gut) 30px; }
.foot-word{
  font-family:var(--display); font-size:clamp(46px,15.5vw,250px); line-height:.8;
  letter-spacing:-.03em; margin:0 0 clamp(30px,5vw,64px); color:var(--linen);
}
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:32px; padding-bottom:44px; }
.foot h4{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:#8d8574; margin:0 0 14px; font-weight:500; }
.foot a, .foot p{ display:block; font-size:12.5px; color:#d8d0c0; margin:0 0 8px; transition:color .3s; }
.foot a:hover{ color:var(--paper-hi); }
.foot-base{
  border-top:1px solid #2e2921; padding-top:22px; display:flex; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8d8574;
}

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.09s } .rv.d2{ transition-delay:.18s } .rv.d3{ transition-delay:.27s }

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:300; background:rgba(20,17,13,.95);
  display:flex; align-items:center; justify-content:center; padding:5vh 5vw;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.lb.open{ opacity:1; visibility:visible; }
.lb img{ max-height:88vh; max-width:100%; width:auto; object-fit:contain; }
.lb .x{ position:absolute; top:20px; right:26px; color:var(--linen); font-size:11px; letter-spacing:.2em; }
.lb .cap{ position:absolute; bottom:20px; left:26px; color:var(--linen); font-size:11px; letter-spacing:.09em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .row .art, .row.flip .art{ grid-column:1 / -1; order:1; }
  .row .info, .row.flip .info{ grid-column:1 / -1; order:2; padding-bottom:0; }
  .prod{ grid-template-columns:1fr; }
}
@media (max-width:880px){
  :root{ --rail:0px; }
  .rail{ display:none; }
  .nav{ grid-template-columns:1fr auto; }
  .nav-set.left{ display:none; }
  .nav-set.right{ display:none; }
  .burger{ display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; justify-self:end; }
  .menu{
    position:fixed; inset:0; z-index:200; background:var(--paper);
    display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
    transform:translateY(-100%); transition:transform .7s var(--ease); gap:2px;
  }
  .hero-art{ width:min(76vw,420px); }
  .menu.open{ transform:none; }
  .menu a{ font-family:var(--display); font-size:clamp(28px,8.6vw,52px); padding:7px 0; line-height:1.06; }
  .menu .close{ position:absolute; top:23px; right:var(--gut); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
  .showcase-cap{ flex-direction:column; align-items:flex-start; gap:6px; }
  .showcase-cap .r{ text-align:left; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .hero-meta{ text-align:left; padding-bottom:10px; }
  .hero-word{ font-size:clamp(44px,17vw,120px); }
  .exh-row{ grid-template-columns:58px 1fr; }
  .exh-row .d{ display:none; }
  .scroll-cue{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}