:root{
  --ground:#FCFCFB;
  --surface:#F1F1EF;
  --ink:#1B1B1A;
  --muted:#6C6C68;
  --edge:rgba(20,20,18,.14);
  --rust:#A45E3E;
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Jost",Futura,"Century Gothic",-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,72px);
  font-optical-sizing:auto;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
/* Without this, a panel that sets its own display keeps intercepting clicks
   while hidden, and the whole right-hand side of every page stops working. */
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

header{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:34px var(--gutter) 26px;flex-wrap:wrap}
.mark{width:168px;height:auto;display:block}
nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.navlink{font-size:12px;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:3px 0;background:none;border:0;color:inherit;border-bottom:1px solid transparent;
  cursor:pointer;font-family:var(--sans)}
.navlink:hover,.navlink[aria-expanded=true]{border-bottom-color:var(--rust)}
/* Collections is a button, the others are links, and the two sit on different
   default line heights. Pinning both keeps the menu on one line. */
.navlink{line-height:1.4;margin:0;display:inline-block}
.menu{display:inline-flex;align-items:center}
.menu{position:relative}
.menu-panel{position:absolute;top:calc(100% + 12px);left:0;z-index:20;min-width:250px;
  background:var(--ground);border:1px solid var(--edge);padding:8px 0;display:none}
.menu-panel.open{display:block}
.menu-panel a{display:flex;justify-content:space-between;gap:16px;text-decoration:none;
  padding:9px 16px;font-size:13px}
.menu-panel a:hover{background:var(--surface)}
.menu-panel .n{font-size:11px;letter-spacing:.1em;color:var(--muted)}

section{padding:0 var(--gutter) clamp(56px,8vw,110px)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  border-top:1px solid var(--edge);padding-top:18px;margin-bottom:clamp(28px,4vw,52px);flex-wrap:wrap}
.section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,32px);margin:0}
.section-head .aside{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- the opening ----------
   The painting leads and the words sit tight against it: collection name, the
   way in, a rule, then what the picture actually is. Everything is anchored to
   the top of the work, so no line of type is ever left floating in the middle
   of an empty page. The pair is centred as a block rather than pushed to the
   two far edges of a wide screen. */
.opening{display:grid;grid-template-columns:auto minmax(230px,22rem);
  justify-content:center;gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(14px,2.4vw,32px) var(--gutter) clamp(44px,6vw,86px)}
.opening>*{min-width:0}
.opening-work{padding-top:4px}
.opening-rule{height:1px;background:var(--edge);margin:26px 0 20px}
.opening .cap{color:var(--muted);font-size:13px;margin:0 0 5px;line-height:1.5}
.opening .cap em{font-style:italic;color:var(--ink)}
.opening .cap .action{margin:0;font-size:11px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.opening h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,54px);
  line-height:1;letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
.opening p.blurb{margin:0 0 22px;max-width:34ch;color:var(--muted);font-size:15px}

/* The plate takes its shape from the dimensions Katie typed, which are hers and
   may be a millimetre or two from the crop of the photograph. Painting the
   plate the same colour as the page means any such difference reads as air
   around the work rather than as a grey band stuck to its edge. */
.plate{position:relative;display:block;background:var(--ground);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain;display:block}
.plate-fill img{object-fit:cover}
/* ---------- keeping a tall painting on the screen ----------
   Once each picture takes its own proportions, a portrait work given the full
   width of its column grows taller than the window, and the viewer has to
   scroll to see the bottom of a painting. Capping the height and letting the
   width follow keeps the whole work in view at once, which is the entire point
   of clicking on it. Width must be auto for this to work: with a fixed width
   the ratio would win and the cap would crop instead of shrink. */
.plate{margin-inline:auto;max-width:100%}
.work-image .plate{width:auto;max-height:max(300px,calc(100vh - 250px))}
.opening .plate{width:auto;max-height:max(320px,calc(100vh - 250px));margin-inline:0}

/* ---------- the grids are thumbnails, not the work ----------
   On a wide screen a third of the page is a very large picture, and a column
   of them scrolled for a long time. These are an index: every thumbnail is set
   to the same HEIGHT and takes whatever width its shape needs, so nothing is
   cropped, the row hangs on one line the way pictures do on a wall, and the
   captions line up underneath instead of drifting with each painting's shape.
   The full-size view is one click away, which is what it is for. */
/* A thumbnail fills its column, and the column is what sets the size. Pinning
   the height instead left a narrow picture stranded in a wider column on any
   screen where the two did not happen to agree, which is where the white came
   from. Filling the column also means the caption sits directly under the work
   at the same width, rather than under one corner of it. */
.works .plate,.collection-grid .plate{width:100%;height:auto;margin-inline:0}
.works article,.coll-card{max-width:100%}
/* ---------- hanging the row on one line ----------
   Works of different proportions end up different heights, which left the
   captions stepping up and down across a row. Each card borrows the grid's own
   two rows, so every picture in a row shares one band and every caption starts
   at the same line. The pictures sit at the bottom of that band, the way a wall
   is hung from a common line rather than from the ceiling. Browsers without
   subgrid simply keep the old stacking, which is untidy but never broken. */
.works article{display:grid;grid-template-rows:subgrid;grid-row:span 2;
  align-content:end;gap:0}
.works article > .plate{align-self:end}
.works article > .label{align-self:start}
.plate::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--edge);
  pointer-events:none}

.label{margin-top:15px;min-width:0}
.label h3{font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(19px,2vw,25px);line-height:1.2;margin:0 0 7px}
/* ---------- captions under a thumbnail ----------
   In a grid the painting is the thing being looked at, not its name. A title
   set large enough to wrap onto two lines pushed every caption out of line with
   its neighbours and competed with the work above it. Smaller, on one line, and
   quiet. A title too long for its column ends in an ellipsis; the whole title is
   still there on hover and on the work's own page. */
.works .label h3,.rail .label h3{font-size:15.5px;line-height:1.3;margin:0 0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.works .label .spec,.rail .label .spec{font-size:10.5px}
/* Status and prints link each get their own line in a caption. Side by side
   they fitted for "Original sold" and wrapped for "Original not for sale", so
   half the row sat a line lower than the other half. Always two lines is tidier
   than sometimes one. */
.works .label .sold,.rail .label .sold{display:block;margin-top:10px;font-size:10.5px}
.works .label .action,.rail .label .action{display:inline-flex;margin-top:7px;font-size:10.5px}
.works .label .sold + .action,.rail .label .sold + .action{margin-left:0}
.spec{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;margin:0;display:flex;flex-wrap:wrap}
.spec span{white-space:nowrap}
.spec span+span::before{content:"·";margin:0 7px;opacity:.55}
.note{margin:10px 0 0;color:var(--muted);font-size:14.5px;max-width:52ch}

.action{margin-top:14px;display:inline-flex;align-items:baseline;gap:9px;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--rust);
  border-bottom:1px solid currentColor;padding-bottom:2px}
.action:hover{opacity:.6}
.action .price{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.sold{margin-top:14px;display:inline-block;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
/* A sold original sits beside its prints link. Without the gap the two run
   together as "NOT FOR SALEPRINTS FROM $85", which is how it read the first
   time. They wrap onto separate lines on a narrow card, which is correct. */
.sold + .action{margin-left:14px}

/* ---------- a row of works that scrolls ----------
   The home page shows five works at a time. A collection with more than five
   does not wrap onto a second row and push the rest of the page down; it
   scrolls sideways, with an arrow at each end, so the row stays a row. The
   arrows appear only when there is something past the edge to reach. */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4 * var(--railgap)) / 5);
  --railgap:clamp(18px,2vw,32px);gap:var(--railgap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail > article{scroll-snap-align:start;min-width:0}
.rail .plate{width:100%;height:auto;margin-inline:0}
.rail-btn{position:absolute;top:0;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--edge);background:var(--ground);color:var(--ink);
  display:none;place-items:center;cursor:pointer;font-size:15px;line-height:1;
  transform:translateY(-52px)}
.rail-btn:hover{border-color:var(--rust);color:var(--rust)}
.rail-btn[data-dir="prev"]{right:52px}
.rail-btn[data-dir="next"]{right:0}
.rail-wrap.scrollable .rail-btn{display:grid}
.rail-btn[disabled]{opacity:.28;cursor:default}
.rail-btn[disabled]:hover{border-color:var(--edge);color:var(--ink)}
@media (max-width:1240px){.rail{grid-auto-columns:calc((100% - 3 * var(--railgap)) / 4)}}
@media (max-width:980px){.rail{grid-auto-columns:calc((100% - 2 * var(--railgap)) / 3)}}
@media (max-width:720px){.rail{grid-auto-columns:calc((100% - var(--railgap)) / 2)}}
@media (max-width:480px){.rail{grid-auto-columns:78%}}

/* ---------- how many across ----------
   Three columns was a fixed decision made when pictures filled their column.
   Now that a thumbnail is a set height and only as wide as its shape needs, a
   third of a wide screen is far more room than a portrait painting occupies,
   and the leftover shows up as a corridor of white beside every work. So the
   columns are no longer counted: they are sized to the thumbnail, and the row
   fits as many as the screen genuinely has room for. Six across on a large
   monitor, three or four on a laptop, one or two on a phone, and no dead space
   at any width. This also replaces the old breakpoints, which forced two
   columns on a tablet and reintroduced the same gaps. */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  grid-auto-rows:auto auto;gap:clamp(30px,3.2vw,50px) clamp(18px,2vw,32px)}
.works .plate{aspect-ratio:4/5}

.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(26px,3vw,44px) clamp(18px,2vw,32px)}
.coll-card{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.coll-card .plate{aspect-ratio:5/4}
.coll-card h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.3vw,28px);
  margin:0;line-height:1.15}
.coll-card .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--edge);padding-top:10px}
.coll-card:hover h3{opacity:.62}

.page-top{padding:clamp(10px,2vw,26px) var(--gutter) clamp(38px,5vw,72px)}
.back{display:inline-block;text-decoration:none;color:var(--muted);font-size:11px;
  letter-spacing:.17em;text-transform:uppercase;margin-bottom:26px}
.back:hover{color:var(--rust)}
.page-top h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,80px);
  line-height:1;margin:0 0 18px}
.page-top p{margin:0;color:var(--muted);max-width:52ch;font-size:15px}

.words{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,2.5fr);gap:clamp(22px,4vw,54px)}
.words>*{min-width:0}
.words .lead{font-family:var(--display);font-size:clamp(21px,2.5vw,30px);line-height:1.42;
  margin:0 0 22px;max-width:24ch}
.words p{max-width:60ch;margin:0 0 1.15em;line-height:1.7}

.enquire{border-top:1px solid var(--edge);padding-top:clamp(30px,4vw,54px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.print-ask{border-top:1px solid var(--edge);padding-top:clamp(26px,3.4vw,44px)}
.print-ask h2{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.4vw,28px);
  margin:0 0 12px}
.print-ask p{color:var(--muted);margin:0 0 18px;max-width:52ch}
.enquire h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,36px);margin:0 0 14px}
.enquire p{color:var(--muted);margin:0 0 20px;max-width:44ch}

footer{padding:26px var(--gutter) 40px;border-top:1px solid var(--edge);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- one work ---------- */
.work-page{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);
  gap:clamp(28px,4vw,72px);padding:clamp(10px,2vw,26px) var(--gutter) clamp(50px,7vw,96px);
  align-items:start}
.work-page>*{min-width:0}
.work-detail h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);
  line-height:1.05;margin:0 0 12px}
.wp-desc{margin:16px 0 0;color:var(--muted);font-size:15px;max-width:46ch}
.titlelink{text-decoration:none}
.titlelink:hover{color:var(--rust)}

.buy-block{margin-top:clamp(28px,4vw,42px);border-top:1px solid var(--edge);padding-top:20px}
.buy-block h2{font-family:var(--display);font-weight:400;font-size:19px;margin:0 0 12px}
.buy-note{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:44ch}
.status-line{font-size:14px;color:var(--muted);margin:0}
.status-line strong{color:var(--ink);font-weight:400}

.seg{display:flex;border:1px solid var(--edge);margin:4px 0 16px;width:fit-content}
.seg button{background:none;border:0;padding:9px 16px;cursor:pointer;font-family:var(--sans);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.seg button+button{border-left:1px solid var(--edge)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}

.sizes{display:flex;flex-direction:column;border-top:1px solid var(--edge)}
.size-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:12px 2px;border:0;border-bottom:1px solid var(--edge);background:none;
  cursor:pointer;text-align:left;font-family:var(--sans);color:inherit;width:100%}
.size-row .name{font-size:14.5px}
.size-row .dim{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;margin-left:10px}
.size-row .amt{font-size:14.5px;font-variant-numeric:tabular-nums}
.size-row .addtag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.size-row:hover{background:var(--surface)}
.size-row:hover .addtag{text-decoration:underline}

.buy{display:inline-block;background:var(--rust);color:var(--ground);text-decoration:none;
  border:0;padding:12px 22px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--sans);cursor:pointer;width:100%}
.buy:hover{opacity:.86}
.buy:disabled{opacity:.4;cursor:default}

/* ---------- basket ---------- */
.basket-shade{position:fixed;inset:0;z-index:45;background:rgba(24,22,20,.28)}
.size-row.added{background:var(--surface)}
.size-row.added .addtag{color:var(--ink)}
.basket-tab.bump{transform:translateY(-3px)}
.basket-tab{transition:transform .18s ease;position:fixed;right:0;bottom:26px;z-index:40;background:var(--ink);
  color:var(--ground);border:0;padding:13px 18px;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.basket-tab span{display:inline-block;margin-left:8px;background:var(--rust);
  border-radius:999px;padding:1px 8px}
.basket{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);z-index:50;
  background:var(--ground);border-left:1px solid var(--edge);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(20,18,16,.14)}
.basket-head{display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--gutter) 16px;border-bottom:1px solid var(--edge)}
.basket-head strong{font-family:var(--display);font-weight:400;font-size:20px}
.basket-head button{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 4px}
#basket-items{flex:1;overflow-y:auto;padding:6px var(--gutter)}
.bitem{display:grid;grid-template-columns:1fr auto auto;gap:10px 14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--edge)}
.bitem strong{display:block;font-family:var(--display);font-weight:400;font-size:16px}
.bmeta{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}
.bqty{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.bqty button{background:none;border:1px solid var(--edge);width:26px;height:26px;
  cursor:pointer;color:inherit;font-size:15px;line-height:1}
.bamt{font-variant-numeric:tabular-nums;font-size:14.5px}
.brem{grid-column:1/-1;justify-self:start;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.brem:hover{color:var(--rust)}
.bempty{color:var(--muted);padding:22px 0}
.basket-foot{border-top:1px solid var(--edge);padding:18px var(--gutter) 24px}
.basket-line,.basket-total{display:flex;justify-content:space-between;gap:14px;
  font-size:13.5px;color:var(--muted);padding:5px 0}
.basket-total{font-size:17px;color:var(--ink);padding:10px 0 16px;
  border-top:1px solid var(--edge);margin-top:8px}
.basket-total strong{font-weight:400;font-variant-numeric:tabular-nums}
.basket-note{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}

@media (max-width:900px){
  .work-page{grid-template-columns:1fr}
  .opening,.words{grid-template-columns:1fr}
  .opening{align-items:start;gap:clamp(20px,4vw,34px)}
  .opening-work{width:auto}

  .enquire{grid-template-columns:1fr}
}
@media (max-width:560px){

  .mark{width:132px;height:97px}
}
@media (max-width:380px){
  .spec{font-size:11px;letter-spacing:.05em}
  .spec span{white-space:normal}
}