/* ════════════════════════════════════════════════════════════════════
   The typefaces live on this site rather than at Google. Six files, 104KB
   in all. Nothing is fetched from another company, the headings cannot
   arrive late, and the page still looks right where Google is blocked.
   Anton and Archivo are both SIL Open Font License, free to host.
   ════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/anton-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/archivo-latin-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════
   STRANGELY STUDIOS
   Rule one: text never sits on top of art, and never behind it.
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:    #07060A;
  --pitch:   #0D0B10;
  --bone:    #F0E6D2;
  --bone-2:  #C7BCA4;
  --bone-3:  #9F9684;
  --gold:    #E8C46A;
  --gold-dp: #C2932F;
  --ox:      #96201F;
  --blood:     #7E1216;    /* the deep red edge on the store tiles */
  --blood-lit: #B81E22;
  /* The two status colours and the third bone, all lifted together.
     They were picked against black, and nothing on this site sits on black:
     every page carries a painting behind it under a veil, and the brightest
     thing that lands behind a line of status text measures about 0.022
     relative luminance. Against that, the old values read 3.4, 3.8 and 4.4
     to one, which is below the 4.5 this site holds itself to, and the green
     was the worst of the three. These clear 4.7 to 5 to one there while
     keeping the same hues, so ORIGINAL AVAILABLE is still that green and
     ORIGINAL SOLD is still red. Measured off rendered pixels on the pages
     they appear on, not computed from the stylesheet. */
  --blood-txt: #E66F6A;    /* red that reads as small type over a backdrop */
  --violet:  #6B4E86;
  --brine:   #76A096;

  /* Anton is the poster face. One weight only, built for capitals. */
  --disp: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --ui:   'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --pad:  clamp(1.15rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.19,.85,.28,1);
  --maxw: 1380px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--ui);
  font-size:clamp(1rem,.95rem + .2vw,1.06rem);
  line-height:1.7;
  /* no overflow-x:hidden here. It makes body a scroll container, which stops
     background-attachment:fixed working for anything inside it. Nothing on
     the site overflows sideways, which the layout checks confirm at every
     width, so the guard is not needed. */
}

/* paper grain over everything, never over text legibility */
body::after{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* :not([hidden]) so an <img hidden> stays hidden. A bare img rule that
   sets display beats the browser's own [hidden] rule, which left the
   empty photograph preview in the studio admin showing a broken frame. */
img:not([hidden]){ display:block; max-width:100%; }
a{ color:var(--gold); text-decoration:none; }
:focus-visible{ outline:2px solid var(--brine); outline-offset:3px; }

.hold{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:3; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

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

/* ── type ─────────────────────────────────────────────── */
/* Section headings are the poster. Always capitals, packed tight.
   Item names (h3, h4) stay in Archivo and in normal case, so an artwork
   called "There's Always Stormy Weather Here" still reads as a title
   rather than as shouting. */
h1,h2{
  font-family:var(--disp); font-weight:400; margin:0;
  line-height:.92; letter-spacing:.005em; text-transform:uppercase;
}
h3,h4{
  font-family:var(--ui); font-weight:700; margin:0;
  line-height:1.14; letter-spacing:-.005em;
}
p{ margin:0 0 1.15em; max-width:64ch; }
p:last-child{ margin-bottom:0; }

.big{ font-size:clamp(1.9rem,4vw,3.3rem); }
.mid{ font-size:clamp(1.6rem,3vw,2.4rem); }

.gilt{
  background:linear-gradient(104deg,#8A6218 0%,#F7E4B0 18%,#E8C46A 34%,#9C7222 52%,#FBEFC8 68%,#D8AE4E 84%,#8A6218 100%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:sheen 11s linear infinite;
}
@keyframes sheen{ from{ background-position:0 0; } to{ background-position:280% 0; } }

.tag{
  font-family:var(--ui); font-weight:600; font-size:.66rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold-dp);
  margin:0 0 .9rem;
}
.lede{
  font-family:var(--ui); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,.98rem + .5vw,1.32rem); line-height:1.5;
  color:#DDD0B4; max-width:34ch;
}
.dim{ color:var(--bone-2); }

.rise{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; } }
/* if the script never runs, nothing stays invisible */
.no-js .rise{ opacity:1; transform:none; }

/* ── actions ──────────────────────────────────────────── */
/* The hidden attribute means hidden, whatever else is set.
   A browser hides [hidden] with display:none from its own stylesheet, which
   any author rule setting display will beat. .act sets display:inline-block,
   so every gold button marked hidden was showing anyway: Remove appeared on
   a piece that did not exist yet.

   Named rather than written as a blanket [hidden] rule, because Netlify's
   sign in widget injects its own markup into this page and an !important of
   ours has no business deciding what a third party may show. The fault was
   ours, in our own classes, and the fix belongs there too. */
.act[hidden], .qlink[hidden], .sicon[hidden], .full[hidden],
.cartbtn[hidden], .cartpop[hidden], .cartpop-list[hidden],
.sift[hidden], .siftwrap[hidden]{ display:none !important; }

.act{
  position:relative; overflow:hidden; display:inline-block; cursor:pointer; border:0;
  font-family:var(--ui); font-weight:600; font-size:.73rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.05em 2.1em; color:var(--void);
  background:linear-gradient(135deg,#F5E3B4,var(--gold) 45%,#B8892A);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.act::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg); transition:left .7s var(--ease);
}
.act:hover{ transform:translateY(-2px); box-shadow:0 0 34px rgba(232,196,106,.5), 0 18px 34px -18px #000; }
.act:hover::after{ left:120%; }
.act.hollow{ background:transparent; color:var(--gold); box-shadow:inset 0 0 0 1px rgba(232,196,106,.5); }
.act.hollow:hover{ color:#FFF3D6; box-shadow:inset 0 0 0 1px var(--gold), 0 0 30px rgba(232,196,106,.3); }
.act.wide{ width:100%; text-align:center; }

.qlink{
  font-family:var(--ui); font-weight:600; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); position:relative;
  display:inline-block; padding-bottom:3px;
}
/* Some of these are buttons rather than links, and a button arrives from the
   browser with a grey box around it. Inside a sentence that reads as a
   mistake, which is what it looked like in the studio's drop areas. */
button.qlink{ background:none; border:0; padding:0 0 3px; cursor:pointer; }
.qlink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.qlink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* A link inside a sentence. qlink is a standalone call to action, set small,
   uppercase and letterspaced, which reads as a label when it lands mid
   paragraph. This one keeps the sentence's size and case and just takes the
   gold and a rule under it. */
.inlink{
  color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(232,196,106,.45);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.inlink:hover{ color:#FFF0CE; border-bottom-color:#FFF0CE; }

/* ═══════════ MASTHEAD ═══════════ */
.mast{
  position:fixed; top:0; left:0; right:0; z-index:200; padding:.55rem 0;
  background:linear-gradient(180deg,rgba(7,6,10,.94),rgba(7,6,10,0));
  transition:background .4s ease, padding .4s ease;
}
.mast.stuck{
  background:rgba(7,6,10,.96); backdrop-filter:blur(14px);
  padding:.3rem 0; border-bottom:1px solid rgba(232,196,106,.16);
}
.mast-in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.mark{ display:block; line-height:0; flex:none; }
.mark img{ height:clamp(38px,4.4vw,52px); width:auto; transition:height .4s ease, filter .4s ease; }
.mast.stuck .mark img{ height:clamp(32px,3.4vw,40px); }
.mark:hover img{ filter:drop-shadow(0 0 16px rgba(232,196,106,.6)); }

.mast nav{ width:100%; display:flex; justify-content:center; }
/* Eight sections, the newsletter button and four social icons have to share
   one row, so the type and the gaps both track the window: full size on a wide
   screen, tightening down to the width where the menu button takes over. */
.mast ul{
  display:flex; gap:clamp(.62rem,.78vw,1.45rem);
  list-style:none; margin:0; padding:0; align-items:center;
}
/* Eight sections of bold upper case filled 83% of the bar and read heavy.
   The weight comes down from 700 to 500 and the size and tracking with it,
   which lightens the row and shortens it to about 77%. The heading face was
   tried here and is too thick: it ships one weight and that weight is a
   poster weight. */
.mast nav a{
  font-family:var(--ui); font-weight:500; letter-spacing:.03em;
  font-size:clamp(.78rem,.6vw + .3rem,.98rem);
  text-transform:uppercase; color:var(--gold); transition:color .3s, text-shadow .3s;
  white-space:nowrap;
}
.mast nav a:hover{ color:var(--gold); text-shadow:0 0 14px rgba(232,196,106,.7); }
.mast nav a.on{
  color:var(--void); background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A);
  padding:.5rem clamp(.6rem,.7vw,1rem); transition:box-shadow .4s;
}
.mast nav a.on:hover{ color:var(--void); text-shadow:none; box-shadow:0 0 26px rgba(232,196,106,.55); }

.mast li.has-sub{ position:relative; }
.caret{
  display:inline-block; margin-left:.4rem; width:.4em; height:.4em;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--ease);
}
.mast li.has-sub:hover .caret{ transform:translateY(0) rotate(225deg); }
.mast ul.sub, .sub{
  /* display:block matters, and it has to outrank `.mast ul{display:flex}`
     or the dropdown lays itself out as a horizontal strip that runs off
     the side of the screen. */
  display:block;
  position:absolute; top:100%; left:-1.1rem; min-width:240px; margin:0; padding:.45rem 0;
  list-style:none; background:rgba(7,6,10,.98); backdrop-filter:blur(16px);
  border:1px solid rgba(232,196,106,.26);
  box-shadow:0 22px 44px -22px #000, 0 0 30px rgba(232,196,106,.1);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mast li.has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; }
.mast li.has-sub:hover .sub, .mast li.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none; }
.sub li{ display:block; }
.sub li a{ display:block; padding:.7rem 1.3rem; font-size:.76rem; color:#C0B49B; }
.sub li a:hover{ background:rgba(232,196,106,.12); color:var(--gold); }

.knot{
  display:none; margin-left:auto; background:none; border:1px solid rgba(232,196,106,.45);
  color:var(--gold); font-family:var(--ui); font-weight:600; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; padding:.55rem .9rem; cursor:pointer;
}
@media (max-width:1180px){
  .knot{ display:block; }
  .mast nav{
    position:absolute; left:0; right:0; top:100%; display:none;
    background:rgba(7,6,10,.99); backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(232,196,106,.2);
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .mast nav.open{ display:block; }
  .mast ul{ flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--pad) 1.4rem; }
  /* Anton sits on a shorter line box than the text face did, so the same
   padding left these rows at 37px. A menu row is a thumb target. */
  .mast nav li a:not([hidden]){ display:flex; align-items:center; min-height:46px;
    padding:.6rem 0; font-size:.9rem; letter-spacing:.06em;
    border-bottom:1px solid rgba(232,196,106,.1); }
  .mast nav a.on{ display:inline-block; margin-top:1rem; }
  .caret{ display:none; }
  .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0 0 .4rem 1.1rem; min-width:0;
  }
  .sub li a{ padding:.6rem 0; font-size:.78rem; }
  .mast li.has-sub::after{ display:none; }
}

/* ═══════════ HERO ═══════════ */
.hero{ position:relative; min-height:78svh; overflow:hidden; background:var(--void); display:flex; }
.layer{ position:absolute; inset:-8%; will-change:transform; }
.layer img{ width:100%; height:100%; object-fit:cover; }
.lay-back img{ filter:blur(26px) saturate(.75) brightness(.55); transform:scale(1.15); }
.lay-mid img{ filter:saturate(1) contrast(1.1) brightness(.78); }

/* the scrim: this is what guarantees the hero type is never lost in the art */
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(118% 88% at 50% 46%, rgba(7,6,10,0) 6%, rgba(7,6,10,.86) 72%),
    linear-gradient(180deg, rgba(7,6,10,.82) 0%, rgba(7,6,10,.12) 26%, rgba(7,6,10,.2) 54%, var(--void) 97%);
}
.bloom{
  position:absolute; left:50%; top:46%; width:min(1050px,118vw); aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(232,196,106,.2), rgba(150,32,31,.1) 38%, transparent 68%);
  filter:blur(30px); animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}

.hero-logo{
  /* height:auto matters. The height="537" attribute is a presentational hint,
     and with width:100% overriding only the width the logo rendered 25% too
     tall. Natural ratio 1.68, it was drawing at 1.34. */
  max-width:min(720px,76vw); width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 44px rgba(232,196,106,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.8));
}

/* the credit line sits in its own band under the art, never on it */
.credit{
  position:relative; z-index:5; margin-top:auto;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,196,106,.55); max-width:52ch;
}

/* ═══════════ ART REEL ═══════════ */
.reel{
  overflow:hidden; padding:clamp(.8rem,2vh,1.2rem) 0;
  background:linear-gradient(180deg,var(--void),var(--pitch));
  border-block:1px solid rgba(232,196,106,.14);
}
.reel-track{ display:flex; gap:1rem; width:max-content; animation:roll 52s linear infinite; }
.reel-track:hover{ animation-play-state:paused; }
.reel-track img{
  height:clamp(92px,13vw,168px); width:auto; object-fit:cover;
  outline:1px solid rgba(232,196,106,.22);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), outline-color .5s;
}
.reel-track img:hover{
  transform:scale(1.05); outline-color:var(--gold);
  box-shadow:0 0 34px rgba(232,196,106,.38);
}
@keyframes roll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ═══════════ SCENE: artwork behind every section ═══════════ */
/* scroll-margin keeps a heading clear of the fixed masthead on an anchor jump */
.scene, .carried, section[id], footer[id]{ scroll-margin-top:92px; }
.scene{ position:relative; overflow:hidden; padding:clamp(3rem,7vh,5rem) 0; background:var(--void); }

.scene-art{ position:absolute; inset:0; z-index:0; }
/* Darkening the source is what makes the veil able to stay light.
   No patch of art can ever get bright enough to swallow a word. */
.scene-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 2.6s ease-in-out;
  transform:scale(1.06);
  filter:brightness(.46) saturate(.92) contrast(1.04);
  animation:driftslow 46s ease-in-out infinite alternate;
}
.scene-art img.on{ opacity:1; }
@keyframes driftslow{ from{ transform:scale(1.06) translate(0,0); } to{ transform:scale(1.16) translate(-2%,-1.6%); } }

/* the veil blends the art into the page and keeps every word readable */
.scene-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.52) 16%, rgba(7,6,10,.56) 84%, var(--void) 100%),
    linear-gradient(100deg, rgba(7,6,10,.68) 0%, rgba(7,6,10,.3) 58%, rgba(7,6,10,.48) 100%);
}
.scene.soft .scene-veil{
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.46) 18%, rgba(7,6,10,.5) 82%, var(--void) 100%),
    linear-gradient(100deg, rgba(7,6,10,.6) 0%, rgba(7,6,10,.26) 60%, rgba(7,6,10,.42) 100%);
}

.head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.4rem,6vh,4rem);
}

/* ═══════════ SALON WALL ═══════════ */
/* Captions live BELOW the frame in normal flow. Nothing overlaps the art. */
/* An even grid. The staggered collage that used to live here left large black
   gaps and read as clutter rather than as composition. */
/* The story a collection tells above its own wall. Set to a reading measure
   rather than the full width of the grid below it, and given air on both
   sides so it is read as writing and not as a caption on the first row.
   Not .tale: that is the testimonial, further down, which would have hung a
   gold rule over this and shrunk it to small print. */
.lore{ max-width:66ch; margin:clamp(1.4rem,3vh,2rem) 0 clamp(2.6rem,6vh,3.8rem); }
.lore p{ margin:0 0 1.05em; }
.lore p:last-child{ margin-bottom:0; }
/* Across the full width on a wide screen, in two columns rather than one
   long line.
   
   The block sat in the left half with 630 empty pixels beside it, which
   looked unfinished. Letting the paragraphs run the whole width instead
   would have been the obvious fix and the wrong one: the line is already 93
   characters, and the full 1380 would make it about 195. Anything past
   roughly 75 and the eye starts losing its place on the way back to the
   left.
   
   Two columns use the space and keep the line where it is. A paragraph is
   not allowed to break across the gap, so each one stays whole and the two
   columns balance themselves on the paragraph boundaries. Below 860 a
   second column would be too narrow to read comfortably, so it stays one. */
@media (min-width:860px){
  .lore{ max-width:none; columns:2; column-gap:clamp(2.5rem,5vw,4rem); }
  .lore p{ break-inside:avoid; }
  /* The last paragraph of the first column would otherwise sit flush
     against the bottom of the block while the second column runs on. */
  .lore p:last-child{ margin-bottom:1.05em; }
}

.wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  column-gap:clamp(1.5rem,3vw,2.6rem);
  row-gap:clamp(2.6rem,6vw,4rem);
  align-items:start;
}
.wall .frame{ aspect-ratio:1/1; }
.wall .frame img{ width:100%; height:100%; object-fit:cover; }

.piece{
  display:block; width:100%; background:none; border:0; padding:0; margin:0;
  cursor:pointer; text-align:left; color:inherit; font:inherit;
  perspective:1100px;
}
.piece[hidden]{ display:none; }

.frame{
  position:relative; display:block; overflow:hidden; background:var(--pitch);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), outline-color .5s;
  box-shadow:0 26px 50px -30px #000;
  outline:1px solid rgba(232,196,106,.22);
}
.frame img{
  display:block; width:100%; height:auto;
  transition:transform .8s var(--ease), filter .6s var(--ease);
  filter:saturate(.97) brightness(.99);
}
.piece:hover .frame, .piece:focus-visible .frame{
  box-shadow:0 0 48px rgba(232,196,106,.3), 0 34px 60px -28px #000;
  outline-color:var(--gold);
}
.piece:hover .frame img, .piece:focus-visible .frame img{
  transform:scale(1.025); filter:saturate(1.06) brightness(1.05);
}
/* inner rule draws inside the frame, over art only, never over words */
.frame::before{
  content:""; position:absolute; inset:10px; z-index:3; pointer-events:none;
  border:1px solid rgba(232,196,106,0); transition:border-color .55s var(--ease);
}
.piece:hover .frame::before{ border-color:rgba(232,196,106,.55); }
/* specular highlight, art only */
.frame::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(circle 220px at var(--px,50%) var(--py,50%), rgba(255,240,205,.2), transparent 68%);
  transition:opacity .4s ease;
}
.piece:hover .frame::after{ opacity:1; }

/* THE CAPTION. Plain flow, clear air above it, no borders through the words. */
.capt{ display:block; margin-top:1.5rem; }
.capt .t{
  display:block; font-family:var(--ui); font-weight:700;
  font-size:clamp(1.15rem,1rem + .55vw,1.65rem); line-height:1.2;
  letter-spacing:-.018em; color:var(--bone);
}
.capt .p{
  display:block; margin-top:.5rem; font-family:var(--ui); font-weight:600;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  line-height:1.5;
}
.capt .m{
  display:block; margin-top:.5rem; font-family:var(--ui);
  font-size:.86rem; line-height:1.6; color:var(--bone-3);
}
.capt .see{
  display:inline-block; margin-top:.85rem; font-family:var(--ui); font-weight:600;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dp);
  transition:color .3s;
}
.piece:hover .capt .see{ color:var(--gold); }

.sift{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.sift button{
  background:none; border:0; cursor:pointer; padding:0 0 4px;
  font-family:var(--ui); font-weight:600; font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:#8C8271; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.sift button:hover{ color:var(--gold); }
.sift button[aria-pressed="true"]{ color:var(--gold); border-bottom-color:var(--gold); }

/* ═══════════ FILTERING THE SHOP ═══════════

   These were the same quiet underlined words as the page tabs above them and
   were being read as labels rather than as things to press. They are chips
   now: a border each, a filled one for wherever you are. New and Top sellers
   sit first, in gold, with a rule after them, because they are not shelves.
   A piece keeps its category whether or not it is also new. */
.siftwrap{ position:relative; margin:0 0 clamp(1.7rem,3vw,2.5rem); }
.sift.cats{
  gap:.5rem; padding:.1rem 0 .2rem; align-items:stretch;
}
.sift.cats button{
  padding:.58rem .95rem; border:1px solid rgba(232,196,106,.3);
  border-bottom:1px solid rgba(232,196,106,.3);
  background:rgba(232,196,106,.045); color:var(--bone-2);
  font-size:.66rem; letter-spacing:.16em; line-height:1;
  transition:background .25s, border-color .25s, color .25s;
}
.sift.cats button:hover{
  border-color:var(--gold); color:var(--gold); background:rgba(232,196,106,.1);
}
.sift.cats .mark-tab{ border-color:rgba(232,196,106,.6); color:var(--gold); }
.sift.cats button[aria-pressed="true"]{
  background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A);
  border-color:transparent; color:var(--void); font-weight:700;
}
.sift-rule{
  width:1px; align-self:stretch; flex:none;
  background:rgba(232,196,106,.25); margin:.1rem .3rem;
}

/* The price row, under the shelves. Quieter than the row above it: the
   subject is the first question and the price narrows the answer, so the
   chips are smaller and sit in bone rather than gold until one is pressed.
   Two rows of equally loud chips read as one confusing row of twenty. */
.sift.cats.bands{ margin-top:.55rem; }
.sift.cats.bands button{
  font-size:.62rem; padding:.48rem .8rem;
  border-color:rgba(232,196,106,.18); background:rgba(232,196,106,.025);
  color:var(--bone-3);
}
.sift.cats.bands button:hover{
  border-color:rgba(232,196,106,.7); color:var(--gold);
  background:rgba(232,196,106,.08);
}
.sift.cats.bands button[aria-pressed="true"]{
  background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A);
  border-color:transparent; color:var(--void); font-weight:700;
}

/* On a phone thirteen chips is five stacked rows and the art is pushed off
   the screen, so the row scrolls sideways instead. The last chip is left
   half shown and a fade sits over the edge, which is what says there is
   more rather than leaving it to be discovered. */
@media (max-width:860px){
  .sift.cats{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:.5rem;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .sift.cats::-webkit-scrollbar{ display:none; }
  .sift.cats button{ flex:none; scroll-snap-align:start; }
  .siftwrap::after{
    content:""; position:absolute; top:0; right:0; bottom:.5rem; width:2.4rem;
    background:linear-gradient(90deg,rgba(7,6,10,0),rgba(7,6,10,.92));
    pointer-events:none;
  }
}

/* The same two marks on the art itself, so they mean something while you are
   looking at the work rather than only while you are filtering it. */
.flags{
  position:absolute; top:.65rem; left:.65rem; z-index:3;
  display:flex; gap:.35rem; flex-wrap:wrap; max-width:calc(100% - 1.3rem);
}
.flag{
  font-family:var(--ui); font-weight:700; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.34rem .52rem; line-height:1;
}
.flag.new{
  background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A); color:var(--void);
}
.flag.top{
  background:rgba(7,6,10,.86); color:var(--gold); border:1px solid rgba(232,196,106,.55);
}

/* The tick boxes in the studio.
   Everything in that form is a labelled field: .line label is a block of
   small gold capitals above its box, and .pgrid input is a full width box
   with a border. A tick box is neither, so each of those has to be undone by
   name or the two checkboxes come out as two tall empty fields with their
   words underneath. */
.line.ticks{ display:flex; flex-wrap:wrap; gap:.7rem 1.8rem; align-items:center; }
/* chk, not tick: .tick is already taken further down by the lit panels on
   the Titanic tracker, and a label borrowing that name came out as a tall
   bordered box with its words at the bottom. */
.line.ticks label.chk{
  display:inline-flex; align-items:center; gap:.6rem; margin:0; cursor:pointer;
  font-family:var(--ui); font-weight:500; font-size:.82rem; letter-spacing:.02em;
  text-transform:none; color:var(--bone-2); transition:color .25s;
}
.line.ticks label.chk:hover{ color:var(--gold); }
.pgrid .ticks input[type="checkbox"],
.line .ticks input[type="checkbox"],
.ticks input[type="checkbox"]{
  /* appearance:auto because the form strips it from every input, and a
     checkbox with its appearance taken away is an empty box that never
     shows a tick however many times it is pressed. */
  appearance:auto; -webkit-appearance:checkbox;
  width:19px; height:19px; flex:none; padding:0; margin:0; border:0;
  background:none; accent-color:#B88A2E; cursor:pointer;
  min-height:0 !important;
}
.line.ticks .fine{ flex:1 0 100%; min-width:100%; margin:.4rem 0 0; }

/* A heading for a row of ticks, matching the gold capitals that label every
   other field, since a row of ticks has no single input to point a label at. */
.ticks-head{
  flex:1 1 100%; font-family:var(--ui); font-weight:600; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp);
  margin-bottom:-.15rem;
}
/* Eight shelves wrap into a block, so they are spaced as a block rather than
   as two stray ticks on a line. */
#p-cats, #b-cats{ gap:.55rem 1.3rem; }

/* ═══════════ ARTIFACTISM ═══════════ */
.creed-top{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:end;
}
@media (max-width:900px){ .creed-top{ grid-template-columns:1fr; } }
.genre{ font-size:clamp(2.1rem,5vw,4rem); line-height:.95; }
.genre sup{ font-size:.2em; vertical-align:super; letter-spacing:.03em; }
.creed-def{
  font-family:var(--ui); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,1rem + .8vw,1.7rem); line-height:1.4; color:#EDE2C8;
  max-width:30ch; margin:0; padding-left:1.4rem; border-left:1px solid var(--gold);
}

.stuff{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2.6rem,7vh,4.5rem);
}
@media (max-width:1000px){ .stuff{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stuff{ grid-template-columns:1fr; } }
.thing{
  position:relative; overflow:hidden; padding:1.7rem 1.4rem 1.5rem; min-height:258px;
  display:flex; flex-direction:column; justify-content:flex-end;
  outline:1px solid rgba(232,196,106,.2);
  background:linear-gradient(165deg,rgba(232,196,106,.06),rgba(7,6,10,.5));
  transition:outline-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.thing-art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.16; transform:scale(1.04);
  transition:opacity .7s var(--ease), transform .9s var(--ease);
}
/* a scrim over the panel art so the words on top of it always read */
.thing::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,6,10,.35), rgba(7,6,10,.88) 72%);
}
.thing:hover{ transform:translateY(-6px); outline-color:var(--gold); box-shadow:0 0 44px rgba(232,196,106,.26); }
.thing:hover .thing-art{ opacity:.46; transform:scale(1.13); }
.thing > *{ position:relative; z-index:2; }
.thing h3{ font-size:clamp(1.3rem,1.1rem + .75vw,1.8rem); font-weight:700; }
.thing p{ font-size:.9rem; color:var(--bone-2); margin:.7rem 0 0; }
.thing .lab{
  font-family:var(--ui); font-weight:600; font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .7rem;
}

/* ═══════════ TITANIC ═══════════ */
.souls{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
@media (max-width:920px){ .souls{ grid-template-columns:1fr; } }

.tally{ display:grid; grid-template-columns:repeat(12,1fr); gap:.45rem; margin:clamp(1.8rem,5vh,2.6rem) 0 1rem; }
@media (max-width:620px){ .tally{ grid-template-columns:repeat(6,1fr); } }
.tick{
  aspect-ratio:1/3.2; position:relative; overflow:hidden;
  border:1px solid rgba(232,196,106,.28);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:.4rem;
  font-family:var(--ui); font-size:.58rem; color:rgba(232,196,106,.45);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s;
}
.tick:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 24px rgba(232,196,106,.35); }
.tick.lit{
  border-color:var(--gold); color:#0B0908;
  background:linear-gradient(178deg,#F2DCA4,#D3A94C 30%,#8A6218 78%,#4A3410);
  box-shadow:0 0 26px rgba(232,196,106,.4);
}
.tick.lit::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%);
  background-size:250% 100%; animation:sheen 7s linear infinite;
}
.count{ font-family:var(--ui); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); margin:0; }
.named{ font-family:var(--ui); font-style:italic; font-size:1.05rem; color:var(--bone-2); margin:.6rem 0 0; }

.docket{ list-style:none; margin:clamp(1.8rem,5vh,2.6rem) 0 0; padding:0; }
.docket li{
  display:grid; grid-template-columns:minmax(5.5rem,8.5rem) 1fr; gap:.4rem 1.5rem;
  padding:.95rem 0; border-top:1px solid rgba(232,196,106,.16); align-items:baseline;
}
.docket .k{ font-family:var(--ui); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); }
.docket .v{ color:var(--bone-2); font-size:.95rem; }
@media (max-width:560px){ .docket li{ grid-template-columns:1fr; gap:.2rem; } }

/* tipped photo: caption sits under the picture, inside the mount */
.tipped{
  margin:0; position:relative; background:#120F14; padding:12px 12px 14px;
  outline:1px solid rgba(232,196,106,.25); transform:rotate(-1.3deg);
  box-shadow:0 34px 60px -34px #000;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), outline-color .6s;
}
.tipped:hover{ transform:rotate(0deg) scale(1.015); outline-color:var(--gold); box-shadow:0 0 54px rgba(232,196,106,.28), 0 34px 60px -30px #000; }
.tipped figcaption{
  font-family:var(--ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3); margin-top:.85rem; text-align:center;
}

.witness{
  font-family:var(--ui); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,1rem + .7vw,1.55rem); line-height:1.45; color:#EDE2C8;
  margin:clamp(2.2rem,6vh,3.4rem) 0 0; max-width:38ch;
}
.witness cite{
  display:block; font-style:normal; font-family:var(--ui); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dp); margin-top:1rem;
}

/* ═══════════ FORMS ═══════════ */
.post-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(2.4rem,6vw,5rem); align-items:start;
}
@media (max-width:940px){ .post-in{ grid-template-columns:1fr; } }

/* stacked: title over the box, centred, on a narrower measure. The fields
   themselves stay left aligned, because centred form labels are hard to scan. */
.post-in.stack{
  display:block; max-width:560px; margin-inline:auto; text-align:center;
}
.post-in.stack .ticket{ margin-top:clamp(1.6rem,3.6vw,2.2rem); text-align:left; }
.post-in.stack .ticket-in{ padding:clamp(1.3rem,3vw,1.9rem); }
.post-in.stack .receipt{ text-align:left; }

.ticket{ position:relative; padding:3px; }
/* deep red, not a rainbow. The slow turn stays, but between two reds, so the
   edge reads as one colour catching light rather than a spectrum. */
.ticket::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:conic-gradient(from var(--spin,0deg), #96201F, #5E1312, #B8302C, #5E1312, #96201F);
  animation:spin 14s linear infinite;
}
.ticket::after{
  content:""; position:absolute; inset:-14px; z-index:-1;
  background:#96201F;
  filter:blur(34px); opacity:.26;
}
@keyframes spin{ to{ --spin:360deg; } }
@property --spin{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.ticket-in{ position:relative; z-index:2; background:#0E0C11; padding:clamp(1.6rem,4vw,2.5rem); }
.ticket-in h3{ font-size:clamp(1.4rem,3.2vw,1.95rem); font-weight:700; }

.line{ margin-top:1.3rem; }
.line label{
  display:block; font-family:var(--ui); font-weight:600; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:.35rem;
}
.line input, .line select, .line textarea{
  width:100%; font-family:var(--ui); font-size:1.05rem; color:var(--bone);
  background:rgba(255,255,255,.03); border:0; border-bottom:1px solid rgba(232,196,106,.35);
  padding:.6rem .2rem; border-radius:0; appearance:none;
  transition:border-color .4s, box-shadow .4s, background .4s;
}
.line select{ font-family:var(--ui); font-size:.95rem; }
.line select option{ background:#0E0C11; color:var(--bone); }
.line textarea{ min-height:118px; resize:vertical; font-family:var(--ui); font-size:.98rem; }
.line input:focus, .line select:focus, .line textarea:focus{
  outline:0; border-bottom-color:var(--gold);
  box-shadow:0 6px 22px -12px rgba(232,196,106,.7); background:rgba(232,196,106,.05);
}
.line input.bad, .line textarea.bad{ border-bottom-color:var(--ox); }
.fine{ font-size:.72rem; color:var(--bone-3); margin-top:1rem; line-height:1.55; }
form .act{ margin-top:1.7rem; }

.receipt{ display:none; }
.receipt.show{ display:block; animation:pop .6s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
.receipt strong{
  display:block; font-family:var(--ui); font-weight:700; font-size:1.65rem;
  margin-bottom:.4rem; color:var(--bone);
}
.receipt p{ font-size:.92rem; color:var(--bone-2); }

.gets{ list-style:none; margin:1.8rem 0 0; padding:0; max-width:46ch; }
.gets li{
  padding:.9rem 0 .9rem 2.1rem; border-top:1px solid rgba(232,196,106,.14);
  position:relative; font-size:.97rem; color:var(--bone-2);
  transition:color .4s, padding-left .4s var(--ease);
}
.gets li:last-child{ border-bottom:1px solid rgba(232,196,106,.14); }
.gets li::before{
  content:""; position:absolute; left:0; top:1.35rem; width:9px; height:9px;
  background:var(--gold); transform:rotate(45deg);
  transition:box-shadow .4s, transform .5s var(--ease);
}
.gets li:hover{ color:var(--bone); padding-left:2.5rem; }
.gets li:hover::before{ box-shadow:0 0 16px rgba(232,196,106,.9); transform:rotate(135deg); }

/* ═══════════ STORE ═══════════ */
/* Four projects, four across, one row. Two by two was over two thousand
   pixels tall for four names. */
.doors{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.6vw,1.2rem); }
@media (max-width:900px){ .doors{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .doors{ grid-template-columns:1fr; } }
.door{ position:relative; display:block; overflow:hidden; background:var(--pitch); }
/* display:block is load bearing. This is a <span>, and aspect-ratio and
   overflow:hidden are both ignored on an inline box, so without it the
   picture spills over the title beneath. */
.door-pic{
  display:block; position:relative; overflow:hidden; aspect-ratio:3/4;
  border:2px solid var(--ox); box-sizing:border-box;
}
.door-pic img{ display:block; }
.door-pic img{
  width:100%; height:100%; object-fit:cover; opacity:.82;
  transition:opacity .6s var(--ease), transform 1s var(--ease), filter .6s var(--ease);
}
.door:hover .door-pic img, .door:focus-visible .door-pic img{
  opacity:1; transform:scale(1.05); filter:saturate(1.05) brightness(1.05);
}
.door .edge{ position:absolute; inset:14px; z-index:3; pointer-events:none; }
.door .edge span{ position:absolute; background:var(--gold); transition:transform .6s var(--ease); }
.door .edge span:nth-child(1){ top:0; left:0; right:0; height:1px; transform:scaleX(0); transform-origin:left; }
.door .edge span:nth-child(2){ bottom:0; left:0; right:0; height:1px; transform:scaleX(0); transform-origin:right; }
.door .edge span:nth-child(3){ left:0; top:0; bottom:0; width:1px; transform:scaleY(0); transform-origin:bottom; }
.door .edge span:nth-child(4){ right:0; top:0; bottom:0; width:1px; transform:scaleY(0); transform-origin:top; }
.door:hover .edge span:nth-child(1), .door:hover .edge span:nth-child(2){ transform:scaleX(1); }
.door:hover .edge span:nth-child(3), .door:hover .edge span:nth-child(4){ transform:scaleY(1); }
.door:hover{ box-shadow:0 0 48px rgba(232,196,106,.25); }
/* door label sits BELOW the picture, on its own ground */
.door-name{
  display:block; padding:1rem .6rem 1.1rem; text-align:center;
  background:linear-gradient(180deg,rgba(232,196,106,.05),rgba(7,6,10,.6));
  border-top:1px solid rgba(232,196,106,.2);
}
/* One line, whatever the title. The size tracks the tile rather than the
   page, because four tiles in a row at 1440 give each about 300px and the
   longest of these names is twenty characters. */
.door-name .t{
  display:block; font-family:var(--ui); font-weight:700;
  font-size:clamp(.58rem,.95vw,.84rem); color:var(--bone); line-height:1.25;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  transition:color .4s var(--ease), text-shadow .4s var(--ease),
             letter-spacing .4s var(--ease);
}
/* Hovering a tile lights its name gold and opens the letters a touch, which
   reads as the title waking up rather than simply changing colour. */
.door:hover .door-name .t, .door:focus-visible .door-name .t{
  color:var(--gold);
  text-shadow:0 0 22px rgba(232,196,106,.45);
  letter-spacing:.09em;
}
.door-name{ transition:background .4s var(--ease), border-color .4s var(--ease); }
.door:hover .door-name, .door:focus-visible .door-name{
  background:linear-gradient(180deg,rgba(150,32,31,.22),rgba(7,6,10,.72));
  border-top-color:rgba(232,196,106,.5);
}
@media (max-width:900px){ .door-name .t{ font-size:clamp(.5rem,1.9vw,.82rem); } }
@media (max-width:520px){ .door-name .t{ font-size:clamp(.7rem,3.9vw,1rem); } }
.door-name .s{
  display:block; font-family:var(--ui); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); margin-top:.5rem; line-height:1.5;
}

.shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,2.8rem); }
@media (max-width:780px){ .shelf{ grid-template-columns:1fr; max-width:330px; } }
.vol figure{
  margin:0; background:var(--pitch); padding:10px;
  outline:1px solid rgba(232,196,106,.18);
  transition:outline-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.vol:hover figure{ outline-color:var(--gold); box-shadow:0 0 40px rgba(232,196,106,.26); transform:translateY(-5px); }
.vol img{ width:100%; transition:filter .5s; filter:brightness(.95); }
.vol:hover img{ filter:brightness(1.05); }
.vol h3{ font-size:1.18rem; margin-top:1.1rem; font-weight:700; }
.vol .qlink{ margin-top:.65rem; }

/* store item cards: picture, then words. Never stacked on top of each other. */
.rack{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(1.8rem,3.5vw,2.8rem); }
.item{ display:flex; flex-direction:column; }
.item[hidden]{ display:none; }
/* The same thinking as the guard in the script: the real protection is the
   size of the file, this only takes away the one gesture that would copy it
   without thinking about it. */
#v-img, .shotbox img, .shot img, .plate img{
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.shotbox{
  position:relative; display:block; width:100%; border:0; padding:0; margin:0;
  overflow:hidden; background:var(--pitch); aspect-ratio:4/5; cursor:zoom-in;
  outline:1px solid rgba(232,196,106,.2);
  transition:outline-color .5s var(--ease), box-shadow .5s var(--ease);
}
.item:hover .shotbox{ outline-color:var(--gold); box-shadow:0 0 44px rgba(232,196,106,.26); }
.shotbox img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.97) brightness(.99);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.item:hover .shotbox img{ transform:scale(1.04); filter:saturate(1.06) brightness(1.05); }
/* the "view full" strip is a band of its own at the foot of the picture, with a scrim */
.zoom{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--ui); font-weight:600; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
  background:linear-gradient(180deg,transparent,rgba(7,6,10,.92) 58%);
  padding:2.4rem .8rem .8rem; pointer-events:none; transition:color .3s;
}
.zoom svg{ width:13px; height:13px; flex:none; }
.item:hover .zoom{ color:#FFF0CE; }
.item h3{ font-size:1.32rem; font-weight:700; margin-top:1.15rem; line-height:1.2; }
.item .price{ font-family:var(--ui); font-weight:700; font-size:.76rem; letter-spacing:.16em; color:var(--gold); margin:.5rem 0 0; }
.item .spec{ font-family:var(--ui); font-size:.72rem; letter-spacing:.04em; color:var(--bone-3); margin:.35rem 0 0; }
.item .blurb{ font-size:.9rem; color:var(--bone-2); line-height:1.65; margin:.9rem 0 1.3rem; flex:1; }
.item .act{ align-self:flex-start; font-size:.65rem; padding:.9em 1.5em; }

.ledger{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(2rem,5vw,3.5rem); }
.ledger h3{ font-size:1.45rem; font-weight:700; padding-bottom:.8rem; border-bottom:1px solid rgba(232,196,106,.3); }
.ledger ul{ list-style:none; margin:0; padding:0; }
.ledger li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.72rem .5rem; border-bottom:1px solid rgba(232,196,106,.12);
  transition:background .35s, padding-left .35s var(--ease);
}
.ledger li:hover{ background:linear-gradient(90deg,rgba(232,196,106,.08),transparent 80%); padding-left:1rem; }
.ledger .t{ font-family:var(--ui); font-size:1.02rem; color:var(--bone-2); }
.ledger .p{ font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; color:var(--gold-dp); white-space:nowrap; }
.ledger li.out .t{ color:#6E6558; }
.ledger li.out .p{ color:var(--ox); }

.howto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(1.4rem,3vw,2.4rem); }
.step{
  padding:1.5rem; outline:1px solid rgba(232,196,106,.18); background:rgba(255,255,255,.015);
  transition:outline-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.step:hover{ outline-color:var(--gold); box-shadow:0 0 34px rgba(232,196,106,.2); transform:translateY(-4px); }
.step h4{ font-size:1.18rem; font-weight:700; margin-bottom:.6rem; }
.step p{ font-size:.9rem; color:var(--bone-2); }

/* ═══════════ AS SEEN IN ═══════════ */
.carried{ padding:clamp(3rem,8vh,4.5rem) 0; background:var(--pitch); border-block:1px solid rgba(232,196,106,.16); }
.brands{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(232,196,106,.18); border-left:1px solid rgba(232,196,106,.18);
  margin-top:clamp(1.6rem,4vh,2.4rem);
}
@media (max-width:900px){ .brands{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .brands{ grid-template-columns:repeat(2,1fr); } }
.brand{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(84px,10vw,114px); padding:1rem .8rem;
  border-right:1px solid rgba(232,196,106,.18); border-bottom:1px solid rgba(232,196,106,.18);
  font-family:var(--ui); font-weight:700; letter-spacing:-.01em; line-height:1.15;
  font-size:clamp(1rem,1.6vw,1.4rem); color:var(--bone);
  position:relative; overflow:hidden; transition:color .4s var(--ease), background .4s var(--ease);
}
.brand::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 50% 120%, rgba(232,196,106,.3), transparent 70%);
  transition:opacity .45s var(--ease);
}
.brand span{ position:relative; }
.brand:hover{ color:#FFF0CE; background:rgba(232,196,106,.06); }
.brand:hover::before{ opacity:1; }

/* ═══════════ VOICES ═══════════ */
/* The quote stays in Archivo. Anton would turn it into another headline. */
.shout{ font-family:var(--ui); font-style:italic; font-weight:400; font-size:clamp(1.4rem,3.4vw,2.5rem); line-height:1.3; letter-spacing:-.01em; max-width:24ch; margin:0; }
.shout cite{
  display:block; font-family:var(--ui); font-style:normal; font-weight:600;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-dp); margin-top:1.3rem;
  -webkit-text-fill-color:var(--gold-dp); background:none;
}
.mids{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3.4vw,2.6rem); margin-top:clamp(2.6rem,7vh,4.2rem); }
@media (max-width:860px){ .mids{ grid-template-columns:1fr; } }
.mid-q{
  margin:0; padding:1.4rem 1.5rem; outline:1px solid rgba(232,196,106,.16);
  background:rgba(255,255,255,.02);
  transition:outline-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.mid-q:hover{ outline-color:var(--gold); box-shadow:0 0 36px rgba(232,196,106,.2); transform:translateY(-4px); }
.mid-q p{ font-family:var(--ui); font-style:italic; font-size:1.1rem; line-height:1.45; color:#DDD0B4; }
.mid-q cite{ font-style:normal; font-family:var(--ui); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); }

.tales{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem); margin-top:clamp(2.6rem,7vh,4.2rem); }
@media (max-width:920px){ .tales{ grid-template-columns:1fr; } }
.tale{ margin:0; padding-top:1.4rem; border-top:1px solid rgba(232,196,106,.2); }
.tale p{ font-size:.9rem; color:var(--bone-3); line-height:1.68; }
.tale cite{ font-style:normal; font-family:var(--ui); font-weight:600; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dp); }

/* ═══════════ ABOUT ═══════════ */
.about-in{ display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,5rem); align-items:start; }
@media (max-width:880px){ .about-in{ grid-template-columns:1fr; } }
.mugshot{ margin:0; position:relative; }
.mugshot-pic{ display:block; position:relative; overflow:hidden; }
.mugshot img{
  width:100%; aspect-ratio:5/4; object-fit:cover; object-position:38% 46%;
  filter:grayscale(.28) contrast(1.08) brightness(.95);
  transition:filter .7s var(--ease), transform .7s var(--ease);
}
.mugshot-pic::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(232,196,106,.3); transition:box-shadow .6s var(--ease);
}
.mugshot:hover img{ filter:none; transform:scale(1.015); }
.mugshot:hover .mugshot-pic::after{ box-shadow:inset 0 0 0 1px var(--gold), 0 0 50px rgba(232,196,106,.26); }
.mugshot figcaption{
  font-family:var(--ui); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-3); margin-top:.9rem;
}

/* ═══════════ APPEARANCES ═══════════ */
.entry{
  display:grid; grid-template-columns:minmax(6rem,11rem) minmax(0,1fr) auto;
  gap:.55rem clamp(1.5rem,4vw,3rem); align-items:baseline;
  padding:1.5rem 1rem; border-top:1px solid rgba(232,196,106,.16);
  transition:background .45s, padding-left .45s var(--ease);
}
.entry:last-child{ border-bottom:1px solid rgba(232,196,106,.16); }
.entry:hover{ background:linear-gradient(90deg,rgba(232,196,106,.08),transparent 70%); padding-left:1.8rem; }
.entry .when{ font-family:var(--ui); font-weight:700; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.entry h3{ font-size:clamp(1.12rem,1rem + .6vw,1.55rem); font-weight:700; }
.entry .where{ font-size:.9rem; color:var(--bone-3); margin:.35rem 0 0; }
.entry .state{ font-family:var(--ui); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-3); white-space:nowrap; }
.entry .state.next{ color:var(--void); background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A); padding:.35rem .7rem; }
@media (max-width:760px){ .entry{ grid-template-columns:1fr; } .entry .state{ order:-1; justify-self:start; } }

/* ═══════════ SOCIALS ═══════════ */
.social-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,2vw,1.3rem); margin-top:clamp(1.8rem,5vh,2.6rem); }
@media (max-width:860px){ .social-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .social-grid{ grid-template-columns:1fr; } }
/* On Behind the art the four social cards are the whole section now that the
   film descriptions above them are gone, so they sit on a narrower measure in
   the middle of the page rather than stretched across it, each card's mark
   and name centred in its own box. */
.mid-grid{ max-width:800px; margin-inline:auto; }
.mid-grid .sock{ align-items:center; text-align:center; }
.sock{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.85rem;
  padding:1.5rem 1.4rem; outline:1px solid rgba(232,196,106,.22);
  background:linear-gradient(160deg,rgba(232,196,106,.05),rgba(7,6,10,.4));
  transition:outline-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sock::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 20% 0%, rgba(232,196,106,.22), transparent 65%);
  transition:opacity .5s var(--ease);
}
.sock:hover{ transform:translateY(-6px); outline-color:var(--gold); box-shadow:0 0 44px rgba(232,196,106,.28); }
.sock:hover::before{ opacity:1; }
.sock svg{ width:28px; height:28px; color:var(--gold); position:relative; transition:transform .5s var(--ease), filter .5s; }
.sock:hover svg{ transform:scale(1.1) rotate(-4deg); filter:drop-shadow(0 0 12px rgba(232,196,106,.9)); }
.sock .who{ position:relative; font-family:var(--ui); font-weight:700; font-size:1.22rem; line-height:1.1; color:var(--bone); }
.sock .at{ display:block; font-family:var(--ui); font-weight:400; font-size:.7rem; letter-spacing:.12em; color:var(--bone-3); margin-top:.35rem; }

/* ═══════════ FOOT ═══════════ */
.foot{ position:relative; overflow:hidden; padding:clamp(3.5rem,9vh,6rem) 0 2.5rem; background:var(--void); }
.foot .scene-art img{ animation:none; transform:scale(1.08); }
.foot .scene-veil{ background:linear-gradient(180deg, rgba(7,6,10,.9), rgba(7,6,10,.96)); }
.foot h4{ font-family:var(--ui); font-weight:700; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:1rem; }
.foot-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem; }
@media (max-width:880px){ .foot-in{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .foot-in{ grid-template-columns:1fr; } }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.5rem; }
.foot a{ color:var(--bone-3); font-size:.92rem; transition:color .3s, text-shadow .3s; }
.foot a:hover{ color:var(--gold); text-shadow:0 0 14px rgba(232,196,106,.6); }
.foot p{ font-size:.92rem; color:var(--bone-3); }
/* display:block and line-height:0, or the inline anchor's line box is sized by
   font metrics and the 54px logo spills over the paragraph beneath it. */
.foot-mark{ display:block; line-height:0; margin-bottom:1.2rem; }
.foot-mark img{ height:54px; width:auto; }
.colophon{
  margin-top:clamp(2.4rem,6vh,3.6rem); padding-top:1.4rem;
  border-top:1px solid rgba(232,196,106,.16);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#6E6558;
}

/* ═══════════ PLATE VIEW ═══════════ */
.view{
  position:fixed; inset:0; z-index:1000; background:rgba(5,4,7,.97);
  backdrop-filter:blur(10px); display:none; padding:clamp(1rem,4vw,3rem); overflow:auto;
}
.view.open{ display:grid; place-items:center; animation:pop .45s var(--ease); }
.view-in{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.5rem,4vw,3.5rem); max-width:1150px; width:100%; align-items:center;
}
@media (max-width:840px){ .view-in{ grid-template-columns:1fr; } }
.view .shot{ position:relative; background:#0E0C11; padding:12px; outline:1px solid rgba(232,196,106,.3); box-shadow:0 0 90px rgba(232,196,106,.16); }
.view .shot img{ width:100%; max-height:76vh; object-fit:contain; }
/* The other photographs of the piece on screen, under it. The arrows at
   the edges of the viewer move between pieces; this moves between the
   shots of one, which is a different thing and gets its own control.
   max-height comes down when the strip is there so the picture and its
   thumbnails together still fit the window. */
.view .shot:has(.vstrip:not([hidden])) img{ max-height:64vh; }
.vstrip:not([hidden]){
  display:flex; gap:8px; margin-top:12px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.vstrip::-webkit-scrollbar{ display:none; }
.vstrip button{
  flex:0 0 auto; width:64px; height:64px; padding:0; border:0; cursor:pointer;
  background:#0E0C11; outline:1px solid rgba(232,196,106,.25);
  transition:outline-color .3s var(--ease), opacity .3s var(--ease);
  opacity:.62;
}
.vstrip button img{ width:100%; height:100%; object-fit:cover; max-height:none; display:block; }
.vstrip button:hover{ opacity:1; outline-color:rgba(232,196,106,.6); }
.vstrip button[aria-current="true"]{ opacity:1; outline:2px solid var(--gold); }
.view h3{ font-size:clamp(1.6rem,3.8vw,2.7rem); font-weight:700; color:var(--bone); }
.view .vmeta{ font-family:var(--ui); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:.9rem 0 1.2rem; }
.view .vdesc{ color:var(--bone-2); font-size:.95rem; max-width:46ch; }
.view .full{
  display:inline-block; margin-top:1rem; font-family:var(--ui); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3);
  border-bottom:1px solid rgba(232,196,106,.35); padding-bottom:2px;
}
.view .full:hover{ color:var(--gold); }
.shut{
  position:fixed; top:1rem; right:1rem; z-index:1010; background:rgba(7,6,10,.7);
  border:1px solid rgba(232,196,106,.5); color:var(--gold); font-family:var(--ui);
  font-weight:600; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.6rem 1.05rem; cursor:pointer; transition:background .35s, color .35s, box-shadow .35s;
}
.shut:hover{ background:var(--gold); color:var(--void); box-shadow:0 0 30px rgba(232,196,106,.6); }
.vnav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:1010;
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  background:rgba(7,6,10,.7); border:1px solid rgba(232,196,106,.4); color:var(--gold);
  transition:background .3s, color .3s, box-shadow .3s;
}
.vnav:hover{ background:var(--gold); color:var(--void); box-shadow:0 0 26px rgba(232,196,106,.6); }
.vnav.prev{ left:clamp(.4rem,1.5vw,1.2rem); }
.vnav.next{ right:clamp(.4rem,1.5vw,1.2rem); }
.vnav svg{ width:18px; height:18px; }
@media (max-width:840px){ .vnav{ top:auto; bottom:1rem; transform:none; } }

/* ═══════════ SIMPLE PAGES (404, thanks) ═══════════ */
.plain{ min-height:100svh; display:grid; place-items:center; position:relative; overflow:hidden; padding:6rem 0 4rem; text-align:center; }
.plain .hold{ max-width:640px; }
.plain .act{ margin-top:1.8rem; }

/* ═══════════ ADDED FOR THE PROJECT AND PIECE PAGES ═══════════ */

.credit-line{
  font-family:var(--ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,196,106,.62); margin:0 0 1rem; max-width:none;
}

/* status line under a piece: sold work is shown with dignity, not struck out */
.st{
  display:block; margin-top:.45rem; font-family:var(--ui); font-weight:600;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.st.ok{ color:var(--brine); }
.st.gone{ color:var(--bone-3); }
/* A sold original is the one status worth noticing. The greys are for work
   that was never for sale in the first place: in a private collection, or
   kept by the artist. This one is louder and red, and the red is lifted off
   the --blood on the store tiles until it clears 5:1 against the black, so
   it reads as small uppercase type instead of smouldering into the page. */
.st.sold{
  color:var(--blood-txt); font-weight:700;
  font-size:.74rem; letter-spacing:.18em;
}

/* …and the frame goes red with it, so the wall can be read at a glance
   without stopping at every caption. Thin, the same weight of line the gold
   already draws, so a sold piece is marked rather than crossed out. */
.piece.is-sold .frame,
.item.is-sold .shotbox,
.piece-art.is-sold .shotbox{ outline:1px solid rgba(224,81,76,.62); }
.piece.is-sold:hover .frame,
.piece.is-sold:focus-visible .frame{
  outline-color:var(--blood-txt);
  box-shadow:0 0 48px rgba(224,81,76,.26), 0 34px 60px -28px #000;
}
.piece.is-sold:hover .frame::before{ border-color:rgba(224,81,76,.55); }
/* the store tile lights its outline gold on hover; a sold one keeps the red */
.item.is-sold:hover .shotbox{
  outline-color:var(--blood-txt); box-shadow:0 0 44px rgba(224,81,76,.26);
}

/* the salon wall is now links, so kill the underline but keep the behaviour */
a.piece{ text-decoration:none; color:inherit; }

/* catalogue lists */
.ledger-list{ list-style:none; margin:0; padding:0; }
.ledger-list li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.72rem .5rem; border-bottom:1px solid rgba(232,196,106,.12);
  transition:background .35s, padding-left .35s var(--ease);
}
.ledger-list li:hover{ background:linear-gradient(90deg,rgba(232,196,106,.08),transparent 80%); padding-left:1rem; }
.ledger-list .t{ font-family:var(--ui); font-size:1.02rem; color:var(--bone-2); }
.ledger-list .p{ font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; color:var(--gold-dp); white-space:nowrap; }
.ledger-list li.out .t{ color:#6E6558; }
.ledger-list li.out .p{ color:var(--ox); }

/* handing over to the other site */
.handoff{
  margin-top:clamp(3.5rem,9vh,5.5rem); padding:clamp(1.6rem,4vw,2.4rem);
  outline:1px solid rgba(232,196,106,.3); background:rgba(232,196,106,.04);
}

/* ═══════════ A COLLECTION THAT LIVES SOMEWHERE ELSE ═══════════
   The story on the left, the way to the series' own site on the right, and
   both of them on the first screen. The link used to be the last thing on
   the page, under a list of the work and three doors to other collections,
   which is the one place somebody who came looking for it will not look.

   Three blocks in one grid. On a wide screen the card sits beside the
   writing and spans both its rows. Narrower, the grid becomes one column and
   they fall in the order they are written: the name, one line about the
   series, the card, then the long copy for whoever wants it. That order is
   the markup's own, so nothing is reordered to get it and a screen reader
   and a keyboard meet them in the same order as the eye. */
.lede-split{
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vh,3rem) clamp(2rem,5vw,4rem);
}
/* This band owns its own headroom rather than taking the usual opening
   padding, because the whole point of the page is that the way off it is on
   the first screen. On a short handset the standard air above the heading
   pushed the button under the fold by a couple of pixels, which is the
   worst kind of nearly. */
#lede-handoff{ padding-top:clamp(7rem,18vh,12rem); }
@media (max-width:520px){
  /* 3.5rem, not the 4.5 this started at. The strapline grew by a line and
     the card's own writing with it, and on a 640 tall handset that put the
     button back under the fold by eleven pixels. Measured each time rather
     than set once and trusted, because the number that matters is where the
     button lands, and that moves whenever the words above it change. */
  /* 2.5rem of air above the heading, down from the 8 a page normally opens
     with. This page is a card with a way off it, and the only thing that
     matters is that the way off it is on the first screen.

     The button takes two lines on the narrowest handsets and that is left
     alone. Four tracked uppercase words want about 290 pixels and a card at
     360 wide has 217, so one line is only reachable by shrinking the type
     past the legibility floor this stylesheet sets for anything thumbed on a
     phone. The floor is worth more than the line break: it is a full width
     block, so two lines read as a button and not as a mistake. */
  #lede-handoff{ padding-top:2.5rem; }
  .lede-split{ row-gap:1.35rem; }
  .sidecard{ padding:1.15rem; }
}
.lede-head{ grid-column:1; grid-row:1; }
.lede-side{ grid-column:2; grid-row:1 / span 2; align-self:start; }
.lede-body{ grid-column:1; grid-row:2; max-width:62ch; }
@media (max-width:980px){
  .lede-split{ grid-template-columns:1fr; }
  .lede-head, .lede-side, .lede-body{ grid-column:1; grid-row:auto; }
}

/* The only red thing on a gold and bone page, which is the whole job: it has
   to be found without being hunted for. The red is the deep one already used
   for the edge of a sold tile, lit from inside rather than painted flat, so
   it reads as the site's own red and not a warning. */
.sidecard{
  padding:clamp(1.5rem,3.4vw,2.2rem);
  border:1px solid rgba(184,30,34,.6);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(184,30,34,.22), transparent 70%),
    rgba(10,8,12,.72);
  box-shadow:0 0 50px -12px rgba(184,30,34,.5), 0 26px 50px -30px #000;
}
.sidecard .tag.blood{ color:var(--blood-txt); }
.sidecard-name{
  font-family:var(--disp); font-size:clamp(1.5rem,3.4vw,2rem);
  line-height:1.05; margin:0; color:var(--bone);
  /* The address, set as the thing you are being sent to. Bone rather than
     the gilt gradient, because gilt is clipped to the letters and a long
     unbroken string of them in a narrow column is where that treatment
     looks thinnest. */
  word-break:break-word;
}
/* A red button. Text is bone over the darkest end of the gradient at better
   than 6 to 1. */
.act.blood{
  color:#FFF2E6;
  background:linear-gradient(135deg,#C9302F,#A81E22 45%,#7E1216);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(201,48,47,.5) inset;
  transition:background .3s var(--ease), box-shadow .45s var(--ease),
             transform .45s var(--ease);
}
/* No white band sweeping across it. The gold buttons carry one, and on a
   red fill it reads as a smear of light rather than a shine. */
.act.blood::after{ content:none; }
/* It deepens rather than lights up. Going brighter was the obvious move and
   it is the wrong one twice over: it is the same white-ish flare in another
   colour, and the bone text on the lighter red measures 3.8 to 1, which is
   below what the rest of this site holds itself to. Darker keeps the text at
   6 and reads as the button taking the press. */
.act.blood:hover, .act.blood:focus-visible{
  background:linear-gradient(135deg,#B02A28,#8E1A1E 45%,#6B1014);
  box-shadow:0 0 0 1px rgba(230,111,106,.9) inset, 0 16px 30px -16px #000;
  transform:translateY(-2px);
}

/* ── a single piece ── */
.piece-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .piece-in{ grid-template-columns:1fr; } }
.piece-art .shotbox{ aspect-ratio:auto; cursor:zoom-in; }
.piece-art .shotbox img{ height:auto; aspect-ratio:auto; }
.piece-words .price-big{
  font-family:var(--ui); font-weight:700; font-size:.86rem; letter-spacing:.14em;
  color:var(--gold); margin:.9rem 0 0;
}
.piece-words .docket{ margin-top:1.8rem; }

/* ── event photographs ── */
.snaps{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:clamp(.7rem,1.6vw,1.1rem);
}
.snap{
  display:block; padding:0; margin:0; border:0; cursor:zoom-in; overflow:hidden;
  background:var(--pitch); aspect-ratio:1; position:relative;
  outline:1px solid rgba(232,196,106,.18);
  transition:outline-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.snap img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.92);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.snap:hover{ outline-color:var(--gold); box-shadow:0 0 34px rgba(232,196,106,.26); transform:translateY(-3px); }
.snap:hover img{ transform:scale(1.06); filter:saturate(1.04) brightness(1.02); }

/* ── press clippings ── */
.clips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(1.4rem,3vw,2.4rem); }
.clip{
  padding:1.6rem 1.6rem 1.8rem; outline:1px solid rgba(232,196,106,.18);
  background:rgba(255,255,255,.02);
  transition:outline-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.clip:hover{ outline-color:var(--gold); box-shadow:0 0 36px rgba(232,196,106,.2); transform:translateY(-4px); }
.clip h3{ font-size:1.22rem; font-weight:700; line-height:1.25; }
.clip blockquote{ margin:1rem 0 1.2rem; padding-left:1.1rem; border-left:2px solid var(--gold-dp); }
.clip blockquote p{ font-family:var(--ui); font-style:italic; font-size:1.02rem; line-height:1.5; color:#DDD0B4; margin:0; }

/* ── numbered steps ── */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
  padding:1.4rem 0; border-top:1px solid rgba(232,196,106,.16);
}
.steps li:last-child{ border-bottom:1px solid rgba(232,196,106,.16); }
.steps .n{
  font-family:var(--ui); font-weight:700; font-size:1.5rem; color:var(--gold);
  line-height:1; min-width:1.6rem;
}
.steps h3{ font-size:1.22rem; font-weight:700; margin-bottom:.45rem; }

/* ── watch: nothing built yet, say so plainly ── */
.soon{
  margin-top:clamp(2.2rem,6vh,3.2rem); padding:clamp(1.4rem,3.5vw,2rem);
  outline:1px solid rgba(232,196,106,.26); background:rgba(232,196,106,.04); max-width:56ch;
}

/* ── admin ── */
.admin .tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:clamp(1.6rem,4vh,2.4rem) 0; }
@media (max-width:760px){ .admin .tiles{ grid-template-columns:repeat(2,1fr); } }
.tile{ padding:1.2rem 1.3rem; outline:1px solid rgba(232,196,106,.2); background:rgba(255,255,255,.02); }
.tile .n{ display:block; font-family:var(--disp); font-weight:400; font-size:2rem; color:var(--gold); line-height:1; }
.tile .l{ display:block; font-family:var(--ui); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); margin-top:.5rem; }
.deskbar{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1.4rem; }
.deskbar input{
  flex:1 1 260px; font-family:var(--ui); font-size:.95rem; color:var(--bone);
  background:rgba(255,255,255,.04); border:1px solid rgba(232,196,106,.3);
  padding:.75rem .9rem; border-radius:0;
}
.deskbar input:focus{ outline:0; border-color:var(--gold); }
.deskbar .act{ font-size:.64rem; padding:.8em 1.2em; }
.rows{ display:grid; gap:.7rem; }
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem 1.4rem;
  padding:1.1rem 1.2rem; outline:1px solid rgba(232,196,106,.16); background:rgba(255,255,255,.02);
}
.row .who{ font-family:var(--ui); font-weight:700; font-size:1.1rem; color:var(--bone); }
.row .mail{ font-family:var(--ui); font-size:.84rem; color:var(--gold); }
.row .msg{ grid-column:1/-1; font-size:.92rem; color:var(--bone-2); white-space:pre-wrap; margin-top:.4rem; }
.row .kind{ font-family:var(--ui); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-3); text-align:right; white-space:nowrap; }
.row .kind b{ display:block; color:var(--gold-dp); font-weight:600; }
#signout{ cursor:pointer; }

/* ════════════════════════════════════════════════════════════════════
   SIMPLIFICATION PASS. Fewer sections, so each one gets more air.
   ════════════════════════════════════════════════════════════════════ */

/* A single quote standing alone where a whole testimonial section was. */
.oneline{
  padding:clamp(2.6rem,6vh,4rem) 0;
  background:var(--pitch);
  border-block:1px solid rgba(232,196,106,.14);
}
.oneline .shout{ max-width:26ch; margin-inline:auto; text-align:center; }
.oneline .shout cite{ text-align:center; }

/* The newsletter block, now one column and centred. */
.sign{ max-width:54ch; margin-inline:auto; text-align:center; }
.sign h2{ font-size:clamp(1.8rem,3.6vw,2.9rem); }
.sign .lede{ margin-top:1.1rem; }
.sign .ticket{ margin-top:clamp(2rem,5vh,2.8rem); text-align:left; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .pair{ grid-template-columns:1fr; } }

/* The appearance dates, now riding under the event photos. */
.dates{ margin-top:clamp(3rem,8vh,4.5rem); border-top:1px solid rgba(232,196,106,.16); }

/* The brand wall, reduced to one line in the footer. */
.carriers{
  margin-top:clamp(2.4rem,6vh,3.4rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(232,196,106,.12);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--bone-3);
  max-width:72ch;
}

/* Section headings now stand on their own, so they need their own spacing
   where a kicker used to provide it. */
.scene > .hold > h2:first-child,
.scene > .hold > h1:first-child{ margin-bottom:clamp(2.2rem,6vh,3.2rem); }
.scene > .hold > h2:first-child + .lede,
.scene > .hold > h2:first-child + .snaps{ margin-top:calc(clamp(2.2rem,6vh,3.2rem) * -.5); }
.head{ margin-bottom:clamp(2.2rem,6vh,3.2rem); }
.head .lede{ margin-top:0; }

/* With the kicker gone the heading is the only thing announcing a section.
   Give it a hairline so the eye still finds the break. */
.scene > .hold > h2:first-child::after{
  content:""; display:block; width:3.2rem; height:1px; margin-top:1.1rem;
  background:linear-gradient(90deg, var(--gold), transparent);
}

/* The trademark in the nav, small enough not to crowd the word. */
.mast nav sup{ font-size:.5em; vertical-align:super; letter-spacing:0; margin-left:.1em; }

/* ════════════════════════════════════════════════════════════════════
   POSTER PASS. Upcoming events as its own section, and the wall of
   photographs reduced to one at a time.
   ════════════════════════════════════════════════════════════════════ */

/* ── upcoming events ──────────────────────────────────────── */
.gigs{ border-top:1px solid rgba(232,196,106,.18); }
.gig{
  display:grid; grid-template-columns:13rem 1fr auto; gap:1.6rem; align-items:baseline;
  padding:1.5rem 0; border-bottom:1px solid rgba(232,196,106,.14);
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.gig:hover{ background:linear-gradient(90deg,rgba(232,196,106,.07),transparent 72%); padding-left:.9rem; }
.gig .when{
  font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold); line-height:1.5;
}
.gig .what{ display:block; }
.gig .what strong{
  display:block; font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.05rem,1.8vw,1.35rem); line-height:1.06; letter-spacing:.01em; color:var(--bone);
}
.gig .place{ display:block; font-size:.88rem; color:var(--bone-3); margin-top:.4rem; }
.gig .state{
  font-family:var(--ui); font-weight:700; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-3); white-space:nowrap;
}
.gig .state.next{
  color:var(--void); background:var(--gold); padding:.5em 1em;
  box-shadow:0 0 26px rgba(232,196,106,.45);
}
.gig.was{ opacity:.62; }
.gig.was .when, .gig.was .what strong{ color:var(--bone-3); }
.gigs-past-head{
  font-family:var(--ui); font-weight:600; font-size:.62rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-dp); margin:clamp(2.6rem,6vh,3.6rem) 0 .9rem;
}
@media (max-width:760px){
  .gig{ grid-template-columns:1fr auto; gap:.5rem 1rem; }
  .gig .when{ grid-column:1/2; }
  .gig .state{ grid-column:2/3; grid-row:1; justify-self:end; }
  .gig .what{ grid-column:1/3; }
}

/* ── the slideshow ───────────────────────────────────────────
   One photograph at a time, shown whole. The shots are a mix of
   portrait and landscape, so the picture is never cropped: it sits
   inside the stage at its own shape, and a blurred, darkened copy of
   itself fills the space around it instead of a black bar. */
/* centred. Left aligned in a 1380px column left a dead half to its right. */
.slideshow{ max-width:760px; margin-inline:auto; }
#table .hold{ text-align:center; }
#table .slide-count{ text-align:center; }
#table h2::after{ margin-inline:auto; }
.stage{
  position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  background:var(--pitch); outline:1px solid rgba(232,196,106,.22);
  box-shadow:0 34px 80px -46px #000;
  transition:outline-color .5s var(--ease), box-shadow .5s var(--ease);
}
.stage:hover{ outline-color:rgba(232,196,106,.5); box-shadow:0 0 60px rgba(232,196,106,.2); }
/* A true crossfade. The outgoing photograph stays fully opaque underneath
   while the incoming one fades in on top of it, so the stack is never two
   half transparent layers and the picture never dips towards black. */
.sl{
  position:absolute; inset:0; display:block;
  opacity:0; visibility:hidden; z-index:0;
  transition:opacity 1.15s var(--ease), visibility 0s linear 1.15s;
}
.sl.under{            /* the one being replaced, held solid beneath */
  opacity:1; visibility:visible; z-index:1; transition:none;
}
.sl.on{               /* the new one, fading in over the top */
  opacity:1; visibility:visible; z-index:2;
  transition:opacity 1.15s var(--ease), visibility 0s;
}
.sl .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(26px) brightness(.4) saturate(.9); transform:scale(1.14);
}
.sl .fg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  z-index:1;
}

/* the arrows and the full size button only show up on the stage */
.arm, .zoomer{
  position:absolute; z-index:3; cursor:pointer; color:var(--bone);
  background:rgba(7,6,10,.6); border:1px solid rgba(232,196,106,.3);
  backdrop-filter:blur(8px);
  opacity:0; transition:opacity .4s var(--ease), background .3s, border-color .3s;
}
.stage:hover .arm, .stage:hover .zoomer,
.arm:focus-visible, .zoomer:focus-visible{ opacity:1; }
.arm{ top:50%; transform:translateY(-50%); width:3rem; height:3.6rem; padding:0; display:grid; place-items:center; }
.arm svg{ width:1.3rem; height:1.3rem; }
.arm.prev{ left:0; } .arm.next{ right:0; }
.arm:hover, .zoomer:hover{ background:var(--gold); color:var(--void); border-color:var(--gold); }
.zoomer{
  right:0; bottom:0; padding:.75em 1.2em;
  font-family:var(--ui); font-weight:700; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
}
/* touch screens have no hover, so the controls stay put. The width rule is
   a second line of defence for anything that reports hover but has none. */
@media (hover:none), (max-width:860px){ .arm, .zoomer{ opacity:1; } }

/* named slide-count, not tally: .tally is already the twelve column grid
   on the Artifactism page, and it was turning this line into a grid too */
.slide-count{
  margin:1rem 0 0; font-family:var(--ui); font-weight:600; font-size:.64rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dp);
}
@media (max-width:620px){
  .stage{ aspect-ratio:1/1; }
  .arm{ width:2.4rem; height:3rem; }
}
@media (prefers-reduced-motion: reduce){
  .sl{ transition:opacity .01s; }
}

/* ── the home page cards carry the title and the price, nothing else ── */
.wall.bare .capt .m,
.wall.bare .capt .see{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   UX AUDIT FIXES
   ════════════════════════════════════════════════════════════════════ */

/* Touch targets. An audit at phone width found most links were 16 to 23
   pixels tall. The accepted minimum for a finger is 44. The text stays the
   same size; the tappable area around it grows. */
@media (max-width:900px){
  .foot a, .foot li a{
    display:inline-block; padding:.62rem 0; line-height:1.2;
  }
  .foot li{ margin-bottom:0; }
  .qlink{ display:inline-block; padding:.55rem 0; }
  .sift button{ padding:1em 1.4em; min-height:44px; }
  .gig .state .qlink{ padding:.7rem .2rem; }
  .sock{ padding-block:.5rem; }
  /* the social list and the colophon links in the footer */
  .foot .carriers{ line-height:1.9; }
}

/* The menu button was 71 by 31. */
.knot{ min-height:44px; min-width:44px; padding:.7em 1.1em; }

/* The full size button on the slideshow was 130 by 26. */
.zoomer{ min-height:44px; display:inline-flex; align-items:center; }
.arm{ min-width:44px; min-height:44px; }

/* The page is taller on a phone because every grid stacks into one column.
   Tighten the bands further so the scroll does not feel endless. */
@media (max-width:620px){
  .scene{ padding:clamp(2.4rem,5vh,3.2rem) 0; }
  .oneline{ padding:clamp(2rem,4vh,2.6rem) 0; }
  .wall{ row-gap:2rem; }
  .doors{ gap:.8rem; }
  .big{ font-size:clamp(1.7rem,7vw,2.3rem); }
}

/* ── one height for every card, and every tile filled ────────────────
   Every frame is the same box, so rows line up. Inside it the painting is
   shown WHOLE, never cropped. The space a tall or wide piece leaves over is
   filled by a blurred, darkened copy of that same painting, so the tile
   reads as full rather than as a small picture stranded on black. */
.wall, .rack{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.4rem,3vw,2.4rem);
  row-gap:clamp(2.4rem,5vw,3.4rem);
  align-items:stretch;
}
.wall .piece, .rack .item{ display:flex; flex-direction:column; margin:0; }
.wall .frame, .rack .shotbox, .door-pic{ aspect-ratio:4/5; flex:none; position:relative; }

/* the blur that fills the tile */
.wall .frame img.fill, .rack .shotbox img.fill, .door-pic img.fill{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; padding:0;
  filter:blur(30px) brightness(.5) saturate(.85);
  transform:scale(1.2);
  z-index:0;
}
/* the painting itself, complete */
.wall .frame img.art, .rack .shotbox img.art, .door-pic img.art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:0; z-index:1;
}
/* The collection tiles fill their frame rather than sitting letterboxed in it.
   The store tiles above keep object-fit:contain, because there the whole piece
   is the point. Here the tile is a door, not the work, so each one carries a
   focal point: a 4/5 crop out of a wide painting decides what gets cut. */
.doors .door .door-pic img.art{
  object-fit:cover;
  object-position:var(--pos,50% 50%);
  transform:scale(var(--zoom,1));
}
/* Two of these pictures are scans of posters and carry a white paper border
   with a caption line. Filling the frame crops the left and right border
   away but keeps the top and bottom, so those tiles push past the frame
   edge far enough to lose it. The hover lift multiplies that rather than
   replacing it, or hovering would snap the border back into view. */
.doors .door:hover .door-pic img.art,
.doors .door:focus-visible .door-pic img.art{
  transform:scale(calc(var(--zoom,1) * 1.05));
}

@media (max-width:980px){ .wall, .rack{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .wall, .rack{ grid-template-columns:1fr; } }


/* Below the breakpoint the bar is logo on the left, Menu on the right,
   so the three column centring is switched off. */
@media (max-width:1180px){
  .mast-in{ display:flex; }
  .mast nav{ grid-column:auto; justify-self:auto; }
  .knot{ margin-left:auto; }
}


/* ════════════════════════════════════════════════════════════════════
   THE HEADER, rebuilt to the shape of the old site: the mark centred on
   top, the menu centred on its own solid band underneath it, in gold.
   ════════════════════════════════════════════════════════════════════ */
.mast{
  background:var(--void);                 /* solid, not a fade */
  padding:0;
}
.mast.stuck{ background:var(--void); backdrop-filter:none; padding:0; }

.mast .mark{ padding:1.1rem 0 .9rem; transition:padding .35s var(--ease); }
.mast .mark img{ height:clamp(44px,5vw,66px); }
.mast.stuck .mark{ padding:.5rem 0 .45rem; }
.mast.stuck .mark img{ height:clamp(32px,3.4vw,42px); }

.mast nav{
  border-top:1px solid rgba(232,196,106,.18);
  background:rgba(0,0,0,.45);
}
/* Eight sections, the newsletter button and four social icons share this row.
   The gap used to open up to 3.2rem, which was comfortable for five items and
   pushed nine off both ends of the bar, so it now tightens as the window
   narrows and stops well short of where the menu button takes over. */
.mast nav > ul{ padding:.85rem 0; gap:clamp(.55rem,1.15vw,1.5rem); }
.mast.stuck nav > ul{ padding:.6rem 0; }
.mast nav a:hover{ color:#FFF0CE; text-shadow:0 0 18px rgba(232,196,106,.85); }
.mast nav a.here{ color:#FFF0CE; }
.mast nav a.on{ font-weight:600; font-size:clamp(.74rem,.5vw + .28rem,.9rem); padding:.5rem clamp(.6rem,.7vw,1rem); }

/* the hero starts under a two row header now */
.hero{ padding-top:0; }

@media (max-width:1180px){
  /* back to one row: mark on the left, Menu button on the right */
  .mast-in{ flex-direction:row; align-items:center; }
  .mast .mark{ padding:.55rem 0; }
  .mast.stuck .mark{ padding:.4rem 0; }
  .mast nav{ width:auto; display:none; border-top:0; background:rgba(7,6,10,.99); }
  .mast nav.open{ display:block; }
  .mast nav > ul{ padding:.5rem var(--pad) 1.4rem; gap:0; }
}


/* The menu band runs edge to edge like the old site. The header drops its
   max width and the inner list keeps it instead, so the band is full bleed
   without resorting to 100vw, which would overshoot by the scrollbar. */
.mast-in{ max-width:none; padding-inline:0; width:100%; }
.mast nav > ul{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  width:100%; justify-content:center;
}
@media (max-width:1180px){
  .mast-in{ padding-inline:var(--pad); }
  .mast nav > ul{ padding-inline:var(--pad); }
}

/* ── the three doors into the store ──────────────────────────────────
   Square category images with their own lettering baked in, so they carry
   no text of ours. A deep red edge lifts them off the dark page. */
.shopcards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.6vw,2rem);
}
.shopcard{
  display:block; position:relative; aspect-ratio:1/1; overflow:hidden;
  border:4px solid var(--blood);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 18px 46px -24px #000;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease),
             transform .45s var(--ease);
}
.shopcard img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.shopcard:hover, .shopcard:focus-visible{
  border-color:var(--blood-lit);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 42px rgba(158,24,24,.55);
  transform:translateY(-4px);
}
.shopcard:hover img, .shopcard:focus-visible img{
  transform:scale(1.05); filter:brightness(1.08) saturate(1.06);
}
@media (max-width:620px){
  .shopcards{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
}

/* ── the hero banner ─────────────────────────────────────────────────
   The painted Strangely Studios banner carries the name, so the gold mark
   that used to sit here has gone: it was repeating the one in the header
   two inches above it. The banner is shown whole, never cropped, and
   swaps to a squarer crop on a phone so it does not become a thin strip. */
.hero{
  min-height:0; display:block; padding:0;
  background:var(--void);
}
.hero .banner{ display:block; width:100%; }
.hero .banner img{
  display:block; width:100%; height:auto;
  border-bottom:1px solid rgba(232,196,106,.18);
}

/* ── the hero holds still and the site scrolls over it ───────────────
   The banner pins below the header and the rest of the page rides up over
   it. --mast-h and --mast-stuck are measured by the script, because the
   header changes height once it shrinks on scroll.

   This also fixes a real bug: the header is fixed, so without the padding
   below the top of the banner sat hidden underneath it. */
:root{ --mast-h:155px; --mast-stuck:100px; }

main{ padding-top:var(--mast-h); }

.hero{
  position:sticky; top:var(--mast-stuck); z-index:0;
}
/* everything after the hero rides over it, so each band needs to be opaque */
main > *:not(.hero), .foot{ position:relative; z-index:1; }
.reel{ background:var(--pitch); }

/* a sticky hero cannot work inside a scroll container, and it gains nothing
   on a phone where the banner is most of the screen */
@media (max-width:760px){
  .hero{ position:static; top:auto; }
}
@media (prefers-reduced-motion: reduce){
  .hero{ position:static; top:auto; }
}




/* ── as seen in ──────────────────────────────────────────────────────
   The whole band is white and runs edge to edge, so the logos read as
   logos rather than as eleven white boxes on a dark page. Six of them are
   artwork on white and blend into the band completely. Five arrived with
   their own colour block as part of the mark, TokyoPop's red and Books-A-
   Million's navy among them, and those stay: the lettering is white and
   would disappear without it. */
/* The band Dirk likes: barely lighter than the page in the middle, fading to
   nothing at both ends, gold hairline top and bottom. It has to be opaque,
   because the hero banner is sticky and sits directly behind this strip.

   The marks are in their own colours now, and six of the eleven are dark ink
   printed on white paper. On this band they measured between 1.02 and 1.65 to
   one, which is to say invisible, and no shade of grey fixes it: lighten the
   band enough for Amazon's black and Disney's light blue drops to 1.04. The
   two polarities cannot share a ground. So each mark gets its own, one card
   for all eleven at one size with one radius, which is a stockist wall rather
   than the ragged white rectangles the logos arrived with. */
.seen{
  background:
    linear-gradient(180deg,rgba(232,196,106,.05),rgba(232,196,106,0) 60%),
    linear-gradient(90deg,#0B090E,#14111A 32%,#14111A 68%,#0B090E);
  padding:clamp(1.8rem,4.5vh,3rem) 0 clamp(2rem,5vh,3.2rem);
  border-block:1px solid rgba(232,196,106,.22);
}
.seenin{
  font-family:var(--disp); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:.07em; line-height:1;
  text-align:center; margin:0 0 clamp(1.2rem,2.8vw,1.8rem);
  color:var(--gold-dp);
}
.brandstrip{ overflow:hidden; }
.brandtrack{
  display:flex; width:max-content; align-items:center;
  gap:clamp(1.6rem,3.4vw,3rem);
  animation:brandroll 48s linear infinite;
}
.chip{
  flex:none; position:relative;
  width:clamp(118px,13vw,168px);
  height:clamp(44px,5vw,64px);
  /* the card each mark sits on, so a black wordmark and a white one can share
     one dark band. Warm rather than white, so it belongs to this page. */
  background:linear-gradient(180deg,#F6F2E9,#E7E0D2);
  border-radius:6px;
  box-shadow:0 2px 12px -4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(120,96,48,.25);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(232,196,106,.6);
}
/* Anchored to the slot's edges rather than sized with percentages. Inside a
   centred grid cell the browser treats height:100% as auto, so the logos were
   taking their height from their own shape and the tall ones spilled out of
   the row: Barnes and Noble ran 99px in a 64px slot. inset:0 gives a definite
   box, and object-fit then fits each logo inside it whole. */
.chip img{
  /* padding with border-box rather than insets: with position absolute and
     width auto the browser sizes an image from its own pixels, not from the
     box the insets describe, and the wide marks spilled out of the card. */
  position:absolute; inset:0; width:100%; height:100%;
  box-sizing:border-box; padding:8px 13px;
  object-fit:contain; display:block;
  /* a touch held back so eleven retailers' marks sit behind Dirk's own work
     rather than competing with it, and full strength when you point at one.
     Not as far back as the one colour version went: these carry real brand
     colour now and fading it reads as a printing fault. */
  opacity:.88; transition:opacity .4s var(--ease), filter .4s var(--ease);
  filter:saturate(.94);
}
.chip:hover img{ opacity:1; filter:saturate(1.04); }
@keyframes brandroll{ from{ transform:translate3d(0,0,0); }
                      to{   transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){
  .brandtrack{ animation:none; }
  .brandstrip{ overflow-x:auto; }
}



/* ── phone ───────────────────────────────────────────────────────────
   The banner is 2.7 wide to 1 tall. It used to swap to a centre crop on a
   phone, which cut the artwork off at both ends, so it now shows whole at
   every width. A little more room above and below keeps it from reading as
   a thin stripe. */
@media (max-width:620px){
  .hero .banner{ padding-block:.4rem; background:var(--void); }   /* breathing room on the wrapper, so the image keeps its exact shape */

  .seen{ padding:clamp(1.8rem,4vh,2.6rem) 0; }
}

/* ── readable labels on a phone ──────────────────────────────────────
   An audit at 320, 390 and 430 found small uppercase labels rendering
   between 9.6 and 11.5px. Anything under about 12px is a strain to read on
   a handset, so the small type has a floor on small screens. The tracking
   eases off at the same time, since wide letter spacing costs more at small
   sizes than it gives. */
@media (max-width:620px){
  .tag, .fine, .count, .slide-count, .gigs-past-head,
  .foot h4, .colophon, .credit-line{
    font-size:.78rem; letter-spacing:.18em;
  }
  /* matched at the same weight as the rules they override: .ledger-list .p
     and .thing .lab are two classes deep, so a bare .lab or span.p loses */
  .st, span.p, .thing .lab,
  .ledger .p, .ledger-list .p,
  .capt .p, .capt .st, .item .price, .item .spec,
  .gig .when, .gig .state, .ledger .t, .ledger-list .t,
  .sub li a, .clip .tag{
    font-size:.8rem; letter-spacing:.1em;
  }
  .capt .m, .item .blurb, .gig .place, .foot a, .foot p{ font-size:.92rem; }
  .act, .qlink, .see{ font-size:.76rem; }
}

/* ── social icons ────────────────────────────────────────────────────
   In the menu band and in the footer. Drawn as line icons in the same gold
   as the menu so they belong to the set rather than arriving as four
   foreign brand colours. */
/* Said only when a send really failed, and it has to be read rather than
   glanced past, because the alternative is the person assuming the studio
   got their message and is ignoring them. */
.sendfail{
  margin:1rem 0 0; font-family:var(--ui); font-size:.8rem; line-height:1.6;
  color:var(--blood-txt);
}
.sendfail a{ color:var(--gold); }

/* ═══════════ FOLLOW ═══════════
   The wall of accounts under the contact form. The small icons in the
   masthead are for somebody who already knows which one they want; these are
   for somebody deciding, so each is a tile with the mark, the platform and
   the handle to search for.

   Each tile is handed its platform's own colour as --tint and spends it only
   on hover. At rest the wall is gold and bone like everything else, which
   keeps five brand colours from shouting over the artwork behind them. */
/* Wider than the form above it, because five tiles want the room, but not
   the whole window: on a large screen an uncapped row stretched each tile
   into a letterbox with a small mark lost in the middle of it. */
.follow{
  margin:clamp(3rem,7vh,4.5rem) auto 0; max-width:960px; text-align:center;
}
.fols{
  display:grid; gap:clamp(.7rem,1.6vw,1rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(1.6rem,3.6vw,2.2rem);
}
/* Two to a row on a handset leaves the fifth on its own with a gap beside
   it. It takes the whole row instead, which reads as the end of the list
   rather than a tile that failed to load. */
@media (max-width:520px){
  .fol:last-child:nth-child(odd){ grid-column:1 / -1; }
}
.fol{
  display:grid; justify-items:center; gap:.1rem;
  padding:clamp(1.1rem,2.4vw,1.5rem) .7rem;
  text-decoration:none; color:inherit;
  background:rgba(13,11,16,.62);
  border:1px solid rgba(232,196,106,.22);
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s, background .3s;
}
.fol-ico{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:.55rem;
  color:var(--gold); transition:color .3s, transform .35s var(--ease);
}
.fol-ico svg{ width:26px; height:26px; display:block; }
.fol-name{
  font-family:var(--ui); font-weight:700; font-size:.76rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--bone);
}
/* The handle is the thing to search for if somebody would rather find the
   account themselves, so it must not be the faintest text on the page. */
.fol-at{ font-family:var(--ui); font-size:.72rem; color:var(--bone-2); word-break:break-word; }
.fol:hover, .fol:focus-visible{
  border-color:var(--tint); transform:translateY(-3px);
  background:rgba(13,11,16,.86);
  box-shadow:0 0 34px -6px var(--tint), 0 18px 34px -22px #000;
}
.fol:hover .fol-ico, .fol:focus-visible .fol-ico{
  color:var(--tint); transform:scale(1.08);
}
@media (prefers-reduced-motion:reduce){
  .fol, .fol-ico{ transition:none; }
  .fol:hover, .fol:focus-visible{ transform:none; }
  .fol:hover .fol-ico, .fol:focus-visible .fol-ico{ transform:none; }
}

.sicons{ display:flex; align-items:center; gap:.2rem; }
.sicon{
  display:grid; place-items:center;
  width:44px; height:44px;              /* a finger needs 44, the icon is 20 */
  color:var(--gold);
  transition:color .3s, transform .3s var(--ease);
}
.sicon svg{ width:20px; height:20px; display:block; }
.sicon:hover, .sicon:focus-visible{
  color:#FFF0CE; transform:translateY(-2px);
  filter:drop-shadow(0 0 10px rgba(232,196,106,.8));
}
/* the menu band: a hairline keeps them from reading as another menu item */
.socials-in-menu{ display:flex; align-items:center; }
.socials-in-menu .sicons{
  margin-left:.5rem; padding-left:.9rem;
  border-left:1px solid rgba(232,196,106,.28);
}
.foot-icons{ margin:0 0 .9rem; gap:.1rem; }
.foot-icons .sicon{ width:40px; height:40px; }

@media (max-width:1180px){
  /* in the dropped menu they sit on their own row, centred */
  .socials-in-menu{ justify-content:center; padding-top:1rem; }
  .socials-in-menu .sicons{
    margin:0; padding:0; border-left:0; gap:.5rem;
  }
}

/* ── artwork that holds still ────────────────────────────────────────
   The painting behind Upcoming events stays against the viewport while the
   dates ride up over it, the same idea as the hero banner. It is a CSS
   background rather than the crossfading pictures, because a picture that
   is holding still has nothing to crossfade with.

   iOS Safari ignores background-attachment:fixed and scrolls it normally,
   which is a fair outcome, and the hero pin is already off on phones. */
/* One picture behind the whole page, pinned to the viewport, so the page
   scrolls over it. Pinned with position:fixed rather than with
   background-attachment:fixed, which handsets quietly decline to honour.

   No filter on this element, and none on anything above it: a filter, a
   transform or a perspective on an ancestor makes a containing block, and a
   fixed child of a containing block is pinned to the page instead of to the
   viewport. The darkening is a flat layer inside the background property
   for the same reason.

   Written as main > .page-art, not .page-art: main > *:not(.hero) sets
   position:relative on everything in here and outranks a bare class, which
   left this pinned to nothing and collapsed to no height at all. */
main > .page-art, .page-art{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* the bands over it draw their veil and nothing else, so the one picture
   shows through all of them as a single continuous image */
.scene.still{ position:relative; background:transparent; }
/* A page that asked for less darkening on the picture itself gets less over
   the top of it too, or the second layer puts back what the first gave up.
   The ends of the band still fade to the page colour so the sections join.

   The sideways fall is the part that matters on a pale picture. The words
   run down the left, so that side stays heavily covered and keeps its 4.5
   to 1; the right is open, and that is where the drawing is allowed to come
   through. Without it the only two outcomes are a backdrop nobody can see
   or text nobody can read. */
.scene.still.pale .scene-veil{
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.12) 14%, rgba(7,6,10,.12) 86%, var(--void) 100%),
    linear-gradient(100deg, rgba(7,6,10,.64) 0%, rgba(7,6,10,.58) 44%, rgba(7,6,10,.03) 100%);
}
/* A band whose content runs the full width, such as the row of doors through
   to the other collections, has no open side to spare, so the cover goes on
   evenly across it. Same reasoning as the one column case on a handset. */
.scene.still.pale.wide .scene-veil{
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.74) 10%, rgba(7,6,10,.74) 90%, var(--void) 100%);
}
@media (max-width:900px){
  /* one column: the words run the full width, so there is no open side to
     give the picture and the cover goes back on evenly */
  .scene.still.pale .scene-veil{
    background:
      linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.58) 12%, rgba(7,6,10,.58) 88%, var(--void) 100%);
  }
  .scene.still.pale.wide .scene-veil{
    background:
      linear-gradient(180deg, var(--void) 0%, rgba(7,6,10,.74) 10%, rgba(7,6,10,.74) 90%, var(--void) 100%);
  }
}


/* ── shop by kind ────────────────────────────────────────────────────
   The three categories, on every shop page, so Original art, Prints and
   Books are one click from each other instead of three anchors buried in
   one long page. */
.shoptabs{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:clamp(1.8rem,4vh,2.6rem);
}
.shoptab{
  font-family:var(--ui); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.85em 1.4em; color:var(--gold);
  border:1px solid rgba(232,196,106,.4);
  transition:background .3s, color .3s, border-color .3s;
}
.shoptab:hover{ background:rgba(232,196,106,.14); color:#FFF0CE; border-color:var(--gold); }
.shoptab.on{
  background:linear-gradient(135deg,#F5E3B4,var(--gold) 50%,#B8892A);
  color:var(--void); border-color:var(--gold);
}
@media (max-width:620px){
  .shoptab{ font-size:.78rem; padding:1em 1.2em; flex:1 1 auto; text-align:center; }
}

/* ── shop cards line up along the bottom ─────────────────────────────
   The medium line wraps to one or two lines depending on the piece, which
   left the buttons at different heights across a row. Pushing the actions
   down means every card ends on the same line. */
.rack .item{ display:flex; flex-direction:column; }
.rack .item .spec{ margin-bottom:1rem; }
.rack .item .act{ margin-top:auto; align-self:flex-start; }
.rack .item .qlink{ margin-top:.6rem; align-self:flex-start; }

/* ═══════════ TESTIMONIALS ═══════════
   One at a time, every one of them set the same, because a quote from Stan
   Lee and a story from a collector are both somebody saying something kind
   and neither outranks the other.

   Without script the slides share one grid cell, so the box stands as tall as
   the longest and nothing is clipped. Script adds .sized, which takes them out
   of flow and gives the box the height of whichever is showing, so a one line
   quote does not sit in a hole left by a hundred word one. */
.rave{ max-width:62ch; margin:clamp(1.3rem,3vh,1.9rem) auto 0; }
.rave-stage{ display:grid; }
.rave-stage.sized{
  display:block; position:relative; overflow:hidden;
  transition:height .55s var(--ease);
}
.rave-stage.sized > .rv{ position:absolute; inset:0 0 auto 0; }

/* The outgoing quote clears out before the new one arrives. The photographs
   crossfade, holding the old frame solid underneath while the new one covers
   it, but that only works because a photograph is opaque. Two blocks of text
   over the same artwork simply read through each other, so these take turns:
   .4s out, then in. */
.rave-stage > .rv{
  grid-area:1/1; margin:0 auto; align-self:center; max-width:58ch;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.rave-stage > .rv.on{
  opacity:1; pointer-events:auto;
  transition:opacity .55s var(--ease) .38s;
}
.rave-stage > .rv p{
  margin:0; font-family:var(--ui); font-style:italic; color:var(--bone-2);
  font-size:clamp(.95rem,1.4vw,1.06rem); line-height:1.62;
}
.rave-stage > .rv cite{
  display:block; margin-top:1.1rem; font-family:var(--ui); font-style:normal;
  font-weight:600; font-size:.63rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-dp);
}
.rave-dots{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:clamp(.9rem,2vh,1.4rem);
}
.rave-dots .rv-dot{
  width:44px; height:36px; padding:0; border:0; background:none;
  cursor:pointer; position:relative;
}
.rave-dots .rv-dot::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:transparent; border:1px solid rgba(232,196,106,.45);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease);
}
.rave-dots .rv-dot:hover::after{ border-color:var(--gold); transform:scale(1.25); }
.rave-dots .rv-dot.on::after{ background:var(--ox); border-color:var(--gold); }
@media (prefers-reduced-motion:reduce){
  .rave-stage, .rave-stage > .rv{ transition:none; }
}
/* This section is one short block of text, so it does not need the full
   height a section of artwork and headings does. */
#praise{ padding-block:clamp(3rem,7vh,4.6rem); }
/* The heading is centred over the quotes, but only the heading: centring the
   whole column would take the long testimonials with it, and a nine line
   paragraph is hard to read when every line starts somewhere different. The
   hairline under it has to be told to centre as well, since it is a block of
   a fixed width rather than text. */
#praise .hold > h2:first-child{ text-align:center; }
#praise .hold > h2:first-child::after{
  margin-inline:auto;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══════════ FILMS ═══════════
   Tiles that become players on a click. They fit as many across as the
   window allows but never stretch past 440px, so one video looks deliberate
   rather than stranded across the whole column, and the row still fills out
   as more are added. */
.films{
  display:grid; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,440px));
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-top:clamp(1.8rem,5vh,2.6rem);
}
.film{ display:block; text-decoration:none; color:inherit; }
.film-pic{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#000; outline:1px solid rgba(232,196,106,.22);
  transition:outline-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* A film shot upright stands in a tile of its own shape, with its own poster
   cut from the film. Held narrower than a wide one: at the grid's full 440px
   an upright tile would be 780px tall and tower over everything beside it.

   Centred with justify-self and an explicit width, not with an auto inline
   margin: an auto margin on a grid item switches off stretch, and the tile
   then shrinks to fit its own contents. The only content with a width of its
   own here is the title, so every tile came out the width of its name, and a
   film called "Amanda" got a 64px picture. */
.film.tall{ width:min(100%, 306px); justify-self:center; }
.film.tall .film-pic{ aspect-ratio:9/16; }
/* maxresdefault is 16/9 but only exists for videos uploaded in HD; the
   fallback hqdefault is 4/3 with black bars, and cover crops those away to
   exactly the picture. Either file lands correctly. */
.film-pic img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 1s var(--ease), filter .4s var(--ease);
  filter:saturate(.9) brightness(.86);
}
.film-pic iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* a film we host ourselves fills its tile the same way the YouTube frame
   does, and contain rather than cover so no part of the drawing is cut */
.film-pic video{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:#000; object-fit:contain; display:block;
}
/* once it is playing the poster and the play button are out of the way */
.film.playing .film-pic img, .film.playing .film-play{ display:none; }
.film-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(58px,6.4vw,72px); z-index:2; pointer-events:none;
  transition:transform .35s var(--ease);
}
.film-play svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6)); }
/* A red disc with a white triangle: the ordinary play control, which people
   click without being told. It brightens and grows a little on hover. */
.film-play .pb-b{ fill:#CC2019; transition:fill .35s var(--ease); }
.film-play .pb-a{ fill:#FFF; }
.film:hover .film-pic{ outline-color:var(--gold); box-shadow:0 0 38px rgba(232,196,106,.18); }
.film:hover .film-pic img{ transform:scale(1.04); filter:saturate(1) brightness(1); }
.film:hover .film-play{ transform:translate(-50%,-50%) scale(1.08); }
.film:hover .film-play .pb-b{ fill:#E8251C; }
.film-name{
  display:block; margin-top:.9rem; font-family:var(--ui); font-weight:600;
  font-size:clamp(.92rem,1.2vw,1.02rem); line-height:1.4; color:var(--bone-2);
  transition:color .35s var(--ease);
}
.film:hover .film-name{ color:var(--gold); }
/* once it is playing the tile is a player, not a link */
.film.playing{ cursor:default; }
.film.playing .film-play{ display:none; }
@media (prefers-reduced-motion:reduce){
  .film-pic img, .film-play, .film-pic{ transition:none; }
  .film:hover .film-pic img{ transform:none; }
}

/* Behind the art lost two sections, and the padding that suited a long page
   left a screen of nothing above the heading and another gap before the
   videos. The intro keeps enough room to clear the two row masthead and no
   more, and the films sit up close under the copy they belong to. */
#intro{ padding-top:clamp(3.4rem,9vh,5.4rem); padding-bottom:clamp(1.4rem,3vh,2.2rem); }
#films{ padding-top:clamp(1.4rem,3vh,2.2rem); padding-bottom:clamp(2.2rem,5vh,3.2rem); }
#follow{ padding-top:clamp(1.6rem,3.5vh,2.4rem); }

/* ═══════════ PHONE: LEGIBILITY AND THUMBS ═══════════
   The small letterspaced labels were drawn for a desktop column and landed
   between 9.6 and 11.2px on a phone, below what anyone should have to read at
   arm's length. The same elements are what people tap: a link set in 10px
   text is a 37px target and a thumb wants about 44.

   This block is a floor, not a style, so it is marked important. Each of
   these labels is also styled by whichever component it sits in, from
   .docket .k to .door-name .s, and every one of those selectors outranks a
   bare class; without this the floor silently loses on half the pages. */
@media (max-width:620px){
  .lab, .k, .s, .at, .tag, .price, .st, cite, figcaption, label,
  .slide-count, .fine, .gigs-past-head, .seenin, .who{
    font-size:.78rem !important; letter-spacing:.13em !important;
  }
  .qlink, .zoomer, .sift button{ font-size:.8rem !important; letter-spacing:.13em !important; }
  .act{ font-size:.84rem !important; letter-spacing:.13em !important; }
  .knot{ font-size:.86rem !important; }
  sup{ font-size:.6em !important; }

  /* Thumb targets: anything that is its own row to tap.
     :not([hidden]) because this hands them a display with !important, and a
     rule that sets display beats the browser's own [hidden] rule. Without
     it, a button hidden from script stayed on screen at phone widths and
     nowhere else, which is a miserable thing to catch. */
  .act:not([hidden]), .zoomer:not([hidden]), .sift button:not([hidden]){
    min-height:44px !important;
    display:inline-flex !important; align-items:center; justify-content:center;
  }
  .qlink, .ledger-list a, .foot-nav a, .foot a, .sock, .door, .film, .shopcard{
    min-height:44px !important;
  }
  .qlink:not([hidden]), .ledger-list a:not([hidden]), .foot-nav a:not([hidden]),
  .foot a:not([hidden]){
    display:inline-flex !important; align-items:center;
  }
  .zoom, .see{ font-size:.8rem !important; letter-spacing:.13em !important; }
  input, select, textarea, .rv-dot{ min-height:44px !important; }
  .rv-dot{ min-width:44px !important; }

  /* A link set in the middle of a sentence is not its own row, so it keeps
     the line it sits on rather than opening a 44px gap mid paragraph. That
     is what .inlink marks; a .qlink standing alone in a paragraph, like the
     studio address in the footer, is still a row and still a target. */
  .inlink, .film-name{ display:inline !important; min-height:0 !important; }
}

/* ═══════════ THE SHOP ═══════════
   The rack itself is the one the category pages already use. These are the
   pieces the live catalogue adds: a holding line while it loads, and a
   status read underneath each one. A sold original stays on the page,
   because the work is the record even once it is gone.

   Nothing is laid over the artwork. A stamp reading SOLD used to sit across
   the middle of it, with the picture greyed out and dimmed behind the stamp,
   and between them they covered the one thing a visitor came to look at.
   Both are gone. Where a piece stands is said in words below it, in the
   colours the collection wall uses, and the only mark on the picture itself
   is the thin red line already drawn round the frame of a sold piece
   further up this file. */
.shop-wait{ grid-column:1/-1; margin:0; padding:clamp(2rem,6vh,3.4rem) 0; text-align:center; }
.shotbox .noshot{ position:absolute; inset:0; background:
  linear-gradient(140deg,rgba(232,196,106,.07),rgba(7,6,10,.5)); }
/* Where a piece stands is read directly under its name, ahead of the price
   and the materials, because it is the first thing a buyer wants to know
   and it was being found last.

   It is a paragraph here and a span on the collection wall, so it arrives
   carrying a paragraph's bottom margin, which left a hole between it and
   the price under it wider than the gap holding the caption together. */
.item > .st{ margin:.4rem 0 0; }
/* The button used to inherit its breathing room from whatever happened to
   sit above it, which stopped working the moment the status line moved up
   the card and left the button sitting against the line above. */
.item > .act{ margin-top:1rem; }

/* The basket only exists once there is something in it, and it rides the
   bottom of the window so it is in front of you wherever you have scrolled to.

   Both selectors are needed. The bar sits inside main, and the layering rule
   further up, main > *:not(.hero), sets position relative on everything in
   there. That selector outranks a bare class, so it quietly won: the bar
   stopped being pinned and sat in the page between the last row of art and
   the footer, where nobody scrolls looking for a checkout button. */
main > .basket,
.basket{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:linear-gradient(180deg,rgba(11,9,14,.96),rgba(11,9,14,.99));
  border-top:1px solid rgba(232,196,106,.35);
  box-shadow:0 -16px 40px -20px #000;
}
.basket-in{
  max-width:1380px; margin-inline:auto; padding:.85rem clamp(1rem,4vw,2rem);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
/* The bar's own list, folded away until the count is tapped. Capped so a
   long basket scrolls inside the drawer rather than covering the art. */
/* .basket here only to outrank the shared .cartpop-list rule further down,
   which zeroes the padding and would otherwise run these lines into both
   edges of the screen. */
.basket .basket-list{
  max-width:1380px; margin:0 auto; padding:.2rem clamp(1rem,4vw,2rem) .1rem;
  max-height:40vh; overflow:auto;
}
.basket-say{
  margin:0; flex:1 1 auto; text-align:left; cursor:pointer;
  background:none; border:0; padding:.2rem 0;
  font-family:var(--ui); font-size:.9rem; color:var(--bone-2);
}
.basket-caret{
  display:inline-block; width:.42rem; height:.42rem; margin-left:.45rem;
  border-right:1.5px solid var(--gold-dp); border-bottom:1.5px solid var(--gold-dp);
  transform:translateY(-2px) rotate(-135deg); transition:transform .25s;
}
.basket-say[aria-expanded="false"] .basket-caret{ transform:translateY(-4px) rotate(45deg); }
.basket-sum{ color:var(--gold-dp); }
.basket-clear{
  order:3; background:none; border:0; cursor:pointer; padding:.6rem .2rem;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3);
}
.basket-clear:hover{ color:var(--gold); }

/* ═══════════ THE CART IN THE HEADER ═══════════

   The corner of the header on a desktop, the bar along the bottom on a
   phone, never both. Below the width where the menu folds into a button
   there is no room in the bar for a cart, and a bar along the bottom of a
   phone is where a thumb already is. */
.cart-li{ position:relative; display:none; }
@media (min-width:1181px){
  .cart-li{ display:block; }
  main > .basket, .basket{ display:none; }
}
.cartbtn{
  display:flex; align-items:center; gap:.42rem; line-height:1;
  background:none; border:1px solid rgba(232,196,106,.45); cursor:pointer;
  padding:.42rem .62rem; color:var(--gold);
  transition:border-color .3s, box-shadow .3s, color .3s;
}
.cartbtn:hover, .cartbtn[aria-expanded="true"]{
  border-color:var(--gold); box-shadow:0 0 18px rgba(232,196,106,.3); color:#FFF0CE;
}
.cartbtn svg{ width:18px; height:18px; flex:none; }
.cartbtn-n{
  font-family:var(--ui); font-weight:700; font-size:.74rem; letter-spacing:.04em;
  min-width:1.1em; text-align:center;
}
.cartpop{
  position:absolute; top:calc(100% + .62rem); right:0; z-index:220;
  width:min(21rem,78vw); padding:1rem;
  background:rgba(9,8,12,.985); border:1px solid rgba(232,196,106,.3);
  box-shadow:0 26px 60px -24px #000;
}
/* The same list of lines serves the panel in the header and the drawer that
   folds out of the bar along the bottom, so the rules are written once and
   named twice: .mast ul lays every list in the header out as a flex row and
   outranks a bare class, which put the lines side by side across the panel
   instead of one above the other. */
.mast .cartpop-list,
.cartpop-list{ display:block; list-style:none; margin:0 0 .75rem; padding:0; }
.mast .cartpop-list li,
.cartpop-list li{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 0; border-bottom:1px solid rgba(232,196,106,.12);
  font-family:var(--ui); font-size:.84rem; color:var(--bone-2);
  text-transform:none; letter-spacing:0; white-space:normal;
}
.cartpop-list .ln-t{ flex:1 1 auto; min-width:0; }
.cartpop-list .ln-p{ color:var(--gold-dp); white-space:nowrap; flex:none; }
.cartpop-list .ln-x{
  flex:none; background:none; border:0; cursor:pointer; line-height:1;
  font-size:1.15rem; padding:0 0 0 .1rem; color:var(--bone-3);
  transition:color .25s;
}
.cartpop-list .ln-x:hover{ color:var(--gold); }

/* one fewer, one more */
.cartpop-list .qty{
  flex:none; display:flex; align-items:center; gap:.1rem;
  border:1px solid rgba(232,196,106,.28);
}
.cartpop-list .qty b{
  min-width:1.5em; text-align:center; color:var(--bone); font-weight:600;
  font-size:.8rem;
}
.cartpop-list .qty-b{
  background:none; border:0; cursor:pointer; color:var(--gold);
  font-family:var(--ui); font-size:.9rem; line-height:1;
  padding:.3rem .42rem; transition:background .25s, color .25s;
}
.cartpop-list .qty-b:hover{ background:rgba(232,196,106,.14); color:#FFF0CE; }
.cartpop-sum{
  margin:0 0 .85rem; font-family:var(--ui); font-size:.8rem; color:var(--bone-3);
}
.cartpop-sum span{ color:var(--gold-dp); font-weight:700; }
.cartpop .act{ display:block; width:100%; text-align:center; }
.cartpop-clear{
  display:block; width:100%; margin-top:.45rem; padding:.55rem 0;
  background:none; border:0; cursor:pointer;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-3);
}
.cartpop-clear:hover{ color:var(--gold); }
@media (max-width:620px){
  .basket-in{ gap:.6rem; }
  .basket-say{ flex:1 1 100%; order:1; }
  .basket .act{ flex:1 1 auto; order:2; }
}

/* ═══════════ TRACK AN ORDER ═══════════ */
.track-msg{ margin:1rem 0 0; font-family:var(--ui); font-size:.88rem; color:var(--bone-3); min-height:1.2em; }
.track-out{ margin-top:clamp(1.6rem,4vh,2.4rem); }
.track-card{
  max-width:520px; padding:clamp(1.3rem,3.4vw,1.9rem);
  outline:1px solid rgba(232,196,106,.3); background:rgba(232,196,106,.04);
}
.track-state{
  margin:.5rem 0 0; font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,1.8rem); color:var(--gold); letter-spacing:.04em;
}
.track-lines{ list-style:none; margin:1rem 0 0; padding:0; font-family:var(--ui); color:var(--bone-2); }
.track-lines li{ padding:.35rem 0; border-bottom:1px solid rgba(232,196,106,.14); }
.track-trk{ margin:1.1rem 0 0; font-family:var(--ui); font-size:.95rem; color:var(--bone); }

/* ═══════════ ADMIN: THE STORE DESKS ═══════════ */
.deck{ display:flex; gap:.4rem; flex-wrap:wrap; }
.deck button{
  font-family:var(--ui); font-weight:600; font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-3); cursor:pointer;
  background:rgba(255,255,255,.03); border:1px solid rgba(232,196,106,.22);
  padding:.8em 1.1em; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.deck button[aria-pressed="true"]{ color:var(--void); background:var(--gold); border-color:var(--gold); }
.deck button:hover[aria-pressed="false"]{ color:var(--gold); border-color:var(--gold); }

.row-main{ min-width:0; }
.row-top{ margin:0; font-family:var(--ui); font-weight:700; font-size:1.02rem; color:var(--bone); }
.row-sub{ margin:.25rem 0 0; font-family:var(--ui); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-3); }
.row-right{ margin:0; font-family:var(--ui); color:var(--gold); white-space:nowrap; }

/* an order is a summary you can open rather than a wall of detail */
.row.order{ display:block; padding:0; }
.row.order summary{
  display:grid; grid-template-columns:7rem minmax(0,1fr) minmax(0,1.3fr) auto auto;
  gap:.5rem 1rem; align-items:center; cursor:pointer; padding:1rem 1.2rem;
  font-family:var(--ui); font-size:.9rem; color:var(--bone-2);
}
.row.order summary::-webkit-details-marker{ display:none; }
.row.order .o-no{ font-weight:700; color:var(--gold); letter-spacing:.04em; }
.row.order .o-who{ color:var(--bone); }
.row.order .o-what{ color:var(--bone-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.order .o-amt{ color:var(--bone); white-space:nowrap; }
.o-state{
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.35em .7em; border:1px solid rgba(232,196,106,.3); color:var(--bone-3); white-space:nowrap;
}
.o-state.paid{ color:var(--gold); border-color:rgba(232,196,106,.6); }
.o-state.shipped{ color:#8FD0B5; border-color:rgba(143,208,181,.5); }
.o-state.delivered{ color:var(--bone-3); }
.o-state.refunded, .o-state.cancelled{ color:#D98A84; border-color:rgba(217,138,132,.5); }
.row.order.flagged{ outline-color:rgba(217,138,132,.6); }
.o-flag{ margin:0 0 1rem; font-family:var(--ui); font-size:.9rem; color:#E7A49E; }
.o-body{ padding:0 1.2rem 1.3rem; border-top:1px solid rgba(232,196,106,.14); }
.o-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; padding-top:1.1rem;
  font-family:var(--ui); font-size:.92rem; color:var(--bone-2); }
.o-cols p{ margin:.2rem 0 0; }
.o-cols select, .o-cols input{
  width:100%; font-family:var(--ui); font-size:.92rem; color:var(--bone); margin-top:.3rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(232,196,106,.3); padding:.6rem .7rem;
}
.o-cols select:focus, .o-cols input:focus{ outline:0; border-color:var(--gold); }
.o-acts{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1rem !important; }
.o-msg{ font-family:var(--ui); font-size:.8rem; color:var(--gold-dp); }
@media (max-width:860px){
  .row.order summary{ grid-template-columns:minmax(0,1fr) auto; }
  .row.order .o-what{ grid-column:1/-1; white-space:normal; }
  .o-cols{ grid-template-columns:1fr; }
}

/* what is for sale */
.row.prod{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; }
.p-thumb{ width:58px; height:58px; object-fit:cover; display:block;
  outline:1px solid rgba(232,196,106,.25); }
.p-thumb.empty{ background:rgba(255,255,255,.04); }
.p-state{ letter-spacing:.18em; }
.p-state.available{ color:var(--gold); }
.p-state.sold{ color:var(--bone-3); }
.p-state.hidden{ color:#D98A84; }

.pform{ margin-bottom:1.6rem; padding:clamp(1.2rem,3vw,1.7rem);
  outline:1px solid rgba(232,196,106,.3); background:rgba(232,196,106,.04); }
.pgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.4rem; }
.pgrid .wide{ grid-column:1/-1; }
.pgrid .line{ margin-top:0; }
.pgrid input, .pgrid select, .pgrid textarea{
  width:100%; font-family:var(--ui); font-size:.95rem; color:var(--bone);
  background:rgba(255,255,255,.04); border:1px solid rgba(232,196,106,.3); padding:.7rem .8rem;
}
.pgrid input:focus, .pgrid select:focus, .pgrid textarea:focus{ outline:0; border-color:var(--gold); }
.pacts{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.3rem; }
.act.danger{ border-color:rgba(217,138,132,.6); color:#E7A49E; }
.act.danger:hover{ border-color:#D98A84; color:#FFF; background:rgba(150,32,31,.5); }
@media (max-width:700px){ .pgrid{ grid-template-columns:1fr; } }


/* ── the studio's photograph drop area ─────────────────────────────── */
.drop{
  border:1px dashed rgba(232,196,106,.38); border-radius:2px;
  background:rgba(255,255,255,.015); padding:1.4rem; text-align:center;
  min-height:132px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.9rem; transition:border-color .2s, background .2s;
}
.drop.over{ border-color:var(--gold); background:rgba(232,196,106,.07); }
.drop.busy{ opacity:.6; pointer-events:none; }
.drop img{ max-height:230px; max-width:100%; border:1px solid rgba(232,196,106,.3); }

/* Every photograph of a piece in the studio admin, in the order a shopper
   will see them. The first is the one on the card, which is said rather
   than implied, because "first" is only obvious once somebody tells you.
   Not .shot: that is the viewer's picture holder on the public side, and
   this page loads the same stylesheet. */
.shotlist:not([hidden]){
  display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:.9rem; margin-top:.9rem;
}
.shotcard{
  position:relative; margin:0; background:#0E0C11;
  outline:1px solid rgba(232,196,106,.25); padding:8px;
}
.shotcard img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border:0; }
.shotcard figcaption{
  margin-top:.5rem; font-family:var(--ui); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-3); text-align:center; min-height:1.1em;
}
.shotcard figcaption b{ color:var(--gold); font-weight:700; }
.shotcard-x{
  position:absolute; top:2px; right:2px; width:26px; height:26px; padding:0;
  border:0; cursor:pointer; background:rgba(7,6,10,.78); color:var(--bone-2);
  font-size:1.05rem; line-height:1; transition:background .2s, color .2s;
}
.shotcard-x:hover{ background:var(--blood-txt); color:#fff; }
.drop-say{ font-family:var(--ui); font-size:.76rem; color:var(--bone-3); margin:0; }
.drop-say .qlink{ font-size:inherit; }


/* ── signing in to the studio ──────────────────────────────────────── */
.signin{ border:1px solid rgba(232,196,106,.22); padding:1.6rem 1.5rem 1.4rem; }
.signin .act{ width:100%; margin-top:.4rem; }
.signin .fine{ color:var(--bone-3); }
.signin .fine.bad{ color:#E2756E; }
.signin .fine.good{ color:#8FC08A; }
/* .qlink is written for anchors; as a button it keeps the browser's own
   chrome, which on this dark panel reads as a grey slab. */
.signin .qlink{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }


/* ── loading a batch of work ───────────────────────────────────────── */
.batch{ border:1px solid rgba(232,196,106,.22); padding:1.5rem; margin-top:1.4rem; }
.batch .drop{ margin-top:1.1rem; }
.batch .bline{
  display:flex; align-items:center; gap:.8rem; padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-family:var(--ui); font-size:.74rem; color:var(--bone-3);
}
.batch .bline:last-child{ border-bottom:0; }
.batch .bline .bname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.batch .bline .bstate{ letter-spacing:.1em; text-transform:uppercase; font-size:.64rem; }
.batch .bline .bstate.ok{ color:#8FC08A; }
.batch .bline .bstate.bad{ color:#E2756E; }

/* the Add to cart slot on a piece page: a span so it sits in the row of
   buttons rather than starting a new line under them */
#piece-buy:not([hidden]){ display:contents; }