/* ============================================================
   work.css - shared styles for the individual artwork pages
   under /works/. Tokens mirror index.html so the pages read as
   one site. Edit here, every artwork page follows.
   ============================================================ */
:root{
  --paper:#FCFBF8;
  --ink:#1A1A16;
  --ink-2:#3E3E36;
  --mute:#77756A;
  --line:rgba(26,26,22,.14);
  --line-soft:rgba(26,26,22,.08);
  --serif:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --sans:"General Sans","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,6vw,88px);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}

h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.022em;line-height:1.1;margin:0}
h2{font-size:clamp(20px,2.2vw,27px)}
.label{
  font-family:var(--sans);font-weight:400;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin:0;
}
.link{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color .3s var(--ease);display:inline-block;
}
.link:hover,.link:focus-visible{border-bottom-color:var(--ink)}
.link.buy{border-bottom-color:var(--ink)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;
  padding:22px var(--gut);
  background-color:rgba(252,251,248,.92);
  backdrop-filter:saturate(1.1) blur(10px);-webkit-backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:block;width:clamp(126px,12vw,168px)}
.brand span{display:block;width:100%;aspect-ratio:1155/217;
  background:url("../assets/brand/signature.png") left center/100% auto no-repeat}
header nav{display:flex;justify-content:flex-end;align-items:center;gap:clamp(18px,3vw,40px)}
header nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
header nav a:hover{color:var(--ink)}
@media(max-width:560px){header nav a{font-size:10.5px;letter-spacing:.1em}}

/* ---------- breadcrumb ---------- */
.crumb{padding-top:clamp(22px,4vh,44px);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.crumb a{border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:var(--line)}
.crumb i{font-style:normal;padding-inline:9px;opacity:.5}
/* Catalogue references are cased AvM, never AVM. Opt them out of the
   uppercase transform used on the surrounding UI labels. */
.ref{text-transform:none}

/* ---------- the work ---------- */
.work{
  display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(30px,5vw,84px);align-items:start;
  padding-block:clamp(26px,4vh,52px) clamp(56px,9vh,110px);
}
@media(max-width:900px){.work{grid-template-columns:1fr;gap:34px}}
.work-fig{margin:0}
.work-fig img{width:100%}
.work-fig figcaption{margin-top:12px;font-size:12px;color:var(--mute);letter-spacing:.04em}

.meta{position:sticky;top:104px}
@media(max-width:900px){.meta{position:static}}
h1{font-size:clamp(30px,4.4vw,54px);margin-bottom:6px}
h1 .sub{
  display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(14px,1.5vw,17px);letter-spacing:0;color:var(--mute);
  margin-top:12px;line-height:1.5;
}
.by{margin:18px 0 26px;font-size:14px;color:var(--ink-2)}
.by a{border-bottom:1px solid var(--line)}
.by a:hover{border-bottom-color:var(--ink)}

.facts{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0 0 28px;
  border-top:1px solid var(--line-soft);font-size:14px}
.facts dt{color:var(--mute);padding:10px 26px 10px 0;border-bottom:1px solid var(--line-soft);
  letter-spacing:.04em;white-space:nowrap}
.facts dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line-soft);text-align:right}
.facts dd.avail{color:var(--ink)}
.facts dd.price{font-family:var(--serif);font-weight:500}

.desc{color:var(--ink-2);margin:0 0 30px}
.note{font-size:14px;color:var(--mute);margin:0 0 32px;padding-top:20px;
  border-top:1px solid var(--line-soft)}
.acts{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,30px);margin-bottom:8px}

/* ---------- pager ---------- */
.pager{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:clamp(26px,4vh,42px);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.pager a{color:var(--ink-2);transition:color .3s var(--ease)}
.pager a:hover{color:var(--ink)}
.pager .mid{color:var(--mute)}

/* Two words and an arrow asked you to remember which reference came next.
   The thumbnail answers it: you go to the next painting because you can see
   the next painting. */
.pager .pg{display:flex;align-items:center;gap:14px;min-width:0}
.pager .pg img{width:54px;height:54px;object-fit:contain;object-position:center;
  flex:none;transition:transform .5s var(--ease),opacity .3s var(--ease);opacity:.9}
.pager .pg:hover img{opacity:1;transform:scale(1.05)}
.pager .pg-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.pager .pg-t i{font-style:normal;font-size:9.5px;letter-spacing:.22em;color:var(--mute)}
.pager .next{text-align:right}
/* the arrows stay, as the thing your eye reads first */
.pager .prev .pg-t i::before{content:"\2190\00a0\00a0"}
.pager .next .pg-t i::after{content:"\00a0\00a0\2192"}

/* Share sits with Enquire, in the same hand: a text link, not a row of
   coloured network buttons. */
.acts button.link{appearance:none;background:none;border:0;border-radius:0;
  border-bottom:1px solid var(--line);font:inherit;padding:0 0 3px;
  cursor:pointer;text-align:left;line-height:inherit}
.acts .share.done{color:var(--ink);opacity:1}

@media(max-width:560px){
  .pager{gap:12px}
  .pager .mid{order:3;width:100%;text-align:center;padding-top:14px;
    border-top:1px solid var(--line-soft)}
  .pager .pg img{width:44px;height:44px}
}

/* ---------- catalogue strip ---------- */
.strip{border-top:1px solid var(--line-soft);padding-block:clamp(40px,7vh,80px)}
.strip .label{margin-bottom:22px}
.strip ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px}
.strip li a{display:block}
/* Uniform square cells so the rows line up. contain, not cover, so no work
   is cropped just to fit the grid. */
.strip li img{width:100%;aspect-ratio:1;object-fit:contain;object-position:center}
.strip li b{display:block;margin-top:8px;font-weight:400;font-size:11px;
  letter-spacing:.18em;color:var(--mute);text-transform:none}
.strip li a:hover b{color:var(--ink)}
.strip li a[aria-current] b{color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding-block:clamp(34px,6vh,60px);
  font-size:12px;letter-spacing:.06em}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{border-bottom:1px solid rgba(252,251,248,.3)}
footer a:hover{border-bottom-color:rgba(252,251,248,.8)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- palette, scale, aside ---------- */
.scale{font-size:14px;color:var(--mute);margin:-14px 0 26px}

.aside{font-size:13px;color:var(--mute);margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--line-soft)}
.aside a{border-bottom:1px solid var(--line)}
.aside a:hover{border-bottom-color:var(--ink)}

/* ---------- studio essay ---------- */
.essay{max-width:66ch;padding-block:clamp(26px,4vh,52px) clamp(56px,9vh,110px)}
.essay h1{font-size:clamp(30px,4.4vw,54px);margin:6px 0 26px}
.essay h2{font-size:clamp(19px,2.1vw,25px);margin:44px 0 14px}
.essay p{color:var(--ink-2);margin:0 0 1.15em}
.essay .lede{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,21px);
  line-height:1.6;color:var(--ink);margin-bottom:8px}
.essay-end{margin-top:46px;padding-top:26px;border-top:1px solid var(--line-soft)}

/* ---------- light control ---------- */
.stage{position:relative;display:block}
.stage.lt-on{touch-action:none}
/* With the light on, the cursor IS the light. A ring with a centre point
   says 'this is where the lamp is' without a literal bulb icon.
   Falls back to crosshair if the data URI cursor is refused. */
.stage.lt-on{cursor:crosshair;cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSI4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii40NSIgc3Ryb2tlLXdpZHRoPSIzLjQiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSI4LjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjMiLz48Y2lyY2xlIGN4PSIxNCIgY3k9IjE0IiByPSIxLjUiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii40NSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+') 14 14, crosshair}
.lt-canvas{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none}

/* The control used to stack a heading, a four-line instruction, the buttons
   and a caveat - 237px tall, which pushed it below the fold on a 900px
   screen. The one distinctive thing on the page was invisible. Same control,
   laid out as a bar: heading and buttons share a line. */
.lightui{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"title buttons" "lede lede" "hint hint";
  align-items:center;column-gap:20px;row-gap:8px}
.lt-title{grid-area:title;margin:0;white-space:nowrap;
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink)}
/* The heading is the affordance, so it reads as one before the light is on. */
.lt-title::after{content:"";display:inline-block;width:22px;height:1px;
  background:currentColor;vertical-align:middle;margin-left:10px;opacity:.4}
.lt-lede{grid-area:lede;margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:62ch}
/* The two lights were a filled black pill beside a grey outlined one - a
   web form's idea of a toggle, dropped onto a page otherwise built out of
   hairlines and warm paper. They are not two competing actions; they are one
   choice with two positions, so they are drawn as a switch: the same tracked
   micro-type as the heading beside them, divided by a single hairline, and
   the one you are standing in marked with the same dab of gold that marks
   the current language. No box, no fill, nothing to press. */
.lt-temps{grid-area:buttons;justify-self:start;margin:0;
  display:flex;align-items:stretch}
.lt-temps button{
  position:relative;
  appearance:none;background:none;border:0;border-radius:0;
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  padding:9px 15px 10px;
  cursor:pointer;
  transition:color .32s var(--ease);
}
/* the divider: one hairline between the two positions, not around them */
.lt-temps button + button{box-shadow:inset 1px 0 0 var(--line-soft)}
.lt-temps button:hover{color:var(--ink-2)}
.lt-temps button:focus-visible{outline:1px solid var(--line);outline-offset:2px}
.lt-temps button[aria-pressed="true"]{color:var(--ink)}
/* the mark - 4px of gold, centred under the word it belongs to */
.lt-temps button::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:4px;height:4px;margin-left:-2px;
  background:#A07C34;
  opacity:0;transform:translateY(3px);
  transition:opacity .3s ease,transform .42s var(--ease);
}
.lt-temps button[aria-pressed="true"]::after{opacity:1;transform:none}

.lt-hint{grid-area:hint;margin:0;font-size:11.5px;line-height:1.7;color:var(--mute);max-width:52ch}

@media(max-width:560px){
  /* the whole grid stacks here, so the switch takes the width and the two
     positions split it evenly - still a switch, just a wider one */
  .lt-temps{justify-self:stretch}
  .lt-temps button{flex:1;text-align:center;padding:12px 8px 13px}
}
@media (prefers-reduced-motion: reduce){
  .lt-temps button,.lt-temps button::after{transition:none}
}

/* ---------- touch targets ----------
   WCAG 2.5.8 asks for 24x24 minimum on anything you have to hit. These
   controls are small by design, so grow the hit area with padding rather
   than the type, and only where the pointer is actually a finger. Inline
   links inside prose are exempt from the rule and are left alone. */
@media (pointer: coarse) and (min-width:761px){
  header nav a,
  .pager a,

  footer a{
    display:inline-flex;align-items:center;min-height:32px;
  }
  .brand{min-height:32px;display:flex;align-items:center}
  .strip li a{padding-bottom:6px}
}

/* ---------- mobile menu ----------
   These pages originally carried four inline nav links with no mobile
   treatment, so on a narrow screen the last one sat past the edge and
   body{overflow-x:hidden} quietly clipped it. Below 760px the links move
   into a panel behind a hamburger, matching the homepage. */
#menuBtn{display:grid;background:none;border:0;padding:6px 0 6px 4px;cursor:pointer;
  width:20px;justify-items:stretch;gap:4px;position:relative}
#menuBtn i{display:block;height:1px;background:var(--ink-2);
  transition:transform .4s var(--ease),opacity .3s}
/* Tap area only. Never set justify-content here: the bars are empty
   elements sized by justify-items:stretch and centring collapses them. */
#menuBtn::after{content:"";position:absolute;inset:-9px -12px}
#menuBtn[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
#menuBtn[aria-expanded="true"] i:nth-child(2){opacity:0}
#menuBtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

#panel{position:fixed;inset:0;z-index:80;pointer-events:none}
#panel.open{pointer-events:auto}
#panel .scrim{position:absolute;inset:0;background:rgba(250,248,244,.55);
  backdrop-filter:saturate(1.05) blur(14px);-webkit-backdrop-filter:saturate(1.05) blur(14px);
  opacity:0;transition:opacity .4s var(--ease)}
#panel.open .scrim{opacity:1}
#panel .sheet{position:absolute;top:0;right:0;bottom:0;width:min(470px,94vw);
  background:var(--paper);border-left:1px solid var(--line-soft);
  padding:26px var(--gut);display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform .42s var(--ease);
  overflow-y:auto}
#panel.open .sheet{transform:none}
#panel .sheet h4{font-family:var(--sans);font-weight:400;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mute);
  margin:22px 0 8px}
#panel .sheet h4:first-of-type{margin-top:8px}
#panel .sheet a{font-size:15px;color:var(--ink-2);padding:7px 0}
#panel .sheet a:hover{color:var(--ink)}
#panelClose{align-self:flex-end;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);padding:8px 0}
#panelClose:hover{color:var(--ink)}

@media(max-width:760px){
  header nav>a{display:none}
}

/* compact catalogue inside the mobile menu */
.sheet-cat{display:flex;flex-wrap:wrap;gap:8px 14px;margin:2px 0 4px}
.sheet-cat a{font-size:11px;letter-spacing:.14em;color:var(--mute);padding:4px 0}
.sheet-cat a:hover{color:var(--ink)}