/* ============================================================
   ORKIDEA
   One light source: top-left. Every shadow, bevel and
   highlight on this page is keyed to it.
   ============================================================ */

:root{
  /* sampled from the logo files */
  --acid:#D4F000;
  --acid-deep:#A9C400;
  --ink:#141C06;
  --ink-soft:#4C5C3A;

  /* the wall */
  --wall:#E9EAE4;
  --wall-lit:#F5F6F1;
  --wall-shade:#D6D8CF;

  /* inside a frame */
  --mat:#FBFBF8;
  --mat-edge:#E2E4DA;

  /* video/background.mp4 — how strongly it shows through the wall.
     0 = invisible, 1 = full strength.
     --ambient-blend: screen for footage on a black background (the
     orkidea clip shipped here). multiply for line art on white.
     luminosity for flat dark footage. */
  --ambient:.6;
  --ambient-blend:screen;
  /* a wall-coloured scrim painted over the clip so body copy stays
     readable. higher = safer text, fainter video. */
  --ambient-veil:.82;

  --ease:cubic-bezier(.2,.6,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--ink);
  background:var(--wall);
  font-family:"Chakra Petch","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(78rem,100% - 2.5rem);margin-inline:auto}
.narrow{width:min(44rem,100% - 2.5rem);margin-inline:auto}
.mono{font-family:"Space Mono",ui-monospace,monospace}

/* ============================================================
   THE WALL
   Four stacked layers: fine plaster grain, coarse mottle,
   the light wash from top-left, and a vignette that darkens
   the far corners. Painted on a fixed layer, not on <body>,
   because background-attachment:fixed desyncs hit areas on iOS.
   ============================================================ */

.wall{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    /* vignette: the wall falls off away from the light */
    radial-gradient(130% 100% at 12% 0%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,0) 45%,
      rgba(20,28,6,.055) 100%),
    /* the light wash itself */
    linear-gradient(152deg,
      var(--wall-lit) 0%,
      var(--wall) 46%,
      var(--wall-shade) 100%),
    var(--wall);
}

/* grain sits in its own layer so it never scales with the gradients */
.wall::after{
  content:"";position:absolute;inset:0;
  background-image:
    /* coarse mottle — the unevenness of plaster */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23m)' opacity='.5'/%3E%3C/svg%3E"),
    /* fine tooth */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E");
  background-size:520px 520px,180px 180px;
  mix-blend-mode:multiply;
  opacity:.16;
}

/* ambient video slot — drop video/background.mp4 in and it appears here */
/* sits ABOVE .wall so the blend has the plaster to work against */
.ambient{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  overflow:hidden;opacity:0;transition:opacity 1.6s linear;
}
.ambient.on{opacity:1}
/* iOS (and that means Firefox on iPhone too — it runs Safari's engine)
   paints its own player chrome over a <video>: a play badge, a pause
   button, skip arrows, an AirPlay button. None of this site's videos
   are players, so every one of those parts is stripped off, site-wide. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-fullscreen-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
  pointer-events:none !important;
}
.ambient video{
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  /* graded so it reads as light moving on the wall, not a video playing */
  filter:saturate(.6) contrast(.95) brightness(1.02);
  mix-blend-mode:var(--ambient-blend);
  opacity:var(--ambient);
}
.ambient::after{
  content:"";position:absolute;inset:0;
  /* feathers the clip into the wall at the edges, open in the middle */
  background:
    linear-gradient(0deg,
      rgba(233,234,228,var(--ambient-veil)),
      rgba(233,234,228,var(--ambient-veil))),
    radial-gradient(135% 105% at 40% 45%,
      rgba(233,234,228,0) 0%, rgba(233,234,228,.1) 62%, rgba(233,234,228,.5) 100%);
}

/* ============================================================
   A FRAMED PIECE
   .frame   outer object — bevel + cast shadow
   .mat     recessed mount board
   .art     the work, sitting under the mat
   .glass   specular; its highlight follows the cursor
   ============================================================ */

.frame{
  position:relative;
  display:block;
  margin:0;
  background:
    linear-gradient(150deg,#FFFFFF 0%, #F6F7F2 40%, #E8EAE1 100%);
  padding:clamp(.5rem,1.1vw,.85rem);
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow:
    /* --- the bevel: light catches top and left, shade on bottom and right --- */
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.7),
    inset -1px 0 0 rgba(20,28,6,.13),
    inset 0 -1px 0 rgba(20,28,6,.17),
    /* --- contact shadow: tight, dark, directly beneath --- */
    0 1px 1px rgba(20,28,6,.16),
    0 3px 5px -1px rgba(20,28,6,.18),
    /* --- ambient shadow: wide, soft, thrown down and right --- */
    2px 16px 26px -14px rgba(20,28,6,.42),
    4px 34px 56px -28px rgba(20,28,6,.4);
}

/* the outer lip of the frame, caught in section */
.frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 1px rgba(20,28,6,.16);
}

.mat{
  position:relative;
  background:var(--mat);
  padding:clamp(.7rem,1.9vw,1.5rem);
  /* the mat is recessed: a shadow falls from the frame lip onto it */
  box-shadow:
    inset 0 2px 3px -1px rgba(20,28,6,.13),
    inset 0 1px 0 rgba(20,28,6,.07),
    inset -1px 0 2px -1px rgba(20,28,6,.05);
}

.art{
  position:relative;
  /* the work sits below the mat surface — thin dark line where it drops */
  box-shadow:
    0 0 0 1px rgba(20,28,6,.22),
    0 1px 3px rgba(20,28,6,.3),
    0 -1px 2px rgba(20,28,6,.12);
}
.art img,.art video{width:100%;display:block}

/* --- the glass ------------------------------------------------ */
.glass{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    /* 1. specular blob — JS moves --mx/--my with the cursor */
    radial-gradient(55% 45% at var(--mx,26%) var(--my,12%),
      rgba(255,255,255,.4) 0%,
      rgba(255,255,255,.12) 38%,
      rgba(255,255,255,0) 72%),
    /* 2. the window, reflected: a fixed diagonal streak */
    linear-gradient(116deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.26) 34%,
      rgba(255,255,255,.05) 41%,
      rgba(255,255,255,0) 48%),
    /* 3. light pooling along the top edge of the pane */
    linear-gradient(177deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 14%);
  transition:opacity .5s var(--ease);
}

/* lifted off the wall on hover: tilt toward the cursor, shadow lengthens */
@media (hover:hover){
  .frame.tilt{cursor:zoom-in}
  .frame.tilt:hover,.frame.tilt:focus-visible{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 1px 0 0 rgba(255,255,255,.7),
      inset -1px 0 0 rgba(20,28,6,.13),
      inset 0 -1px 0 rgba(20,28,6,.17),
      0 2px 2px rgba(20,28,6,.14),
      0 5px 8px -2px rgba(20,28,6,.16),
      6px 30px 40px -18px rgba(20,28,6,.46),
      10px 56px 84px -34px rgba(20,28,6,.44);
  }
  .frame.tilt:hover .glass{opacity:1}
}

.stage{perspective:1400px}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead{
  position:sticky;top:0;z-index:40;
  background:rgba(243,244,239,.9);
  transition:transform .4s var(--ease);
}
.masthead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,28,6,.16) 16%,
    rgba(20,28,6,.16) 84%,transparent);
}
.masthead::before{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(20,28,6,.07),transparent);
}
.masthead.hide{transform:translateY(-100%)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.7rem 0}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{
  width:2.5rem;
  box-shadow:0 0 0 1px rgba(20,28,6,.18), 0 2px 5px -2px rgba(20,28,6,.5);
}
.brand span{font-weight:700;font-size:1.18rem;letter-spacing:.12em}

nav{display:flex;gap:.2rem}
nav a{
  position:relative;text-decoration:none;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:.5rem .8rem;
  transition:color .3s var(--ease);
}
nav a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:3px;
  background:var(--acid);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
nav a:hover,nav a:focus-visible{color:var(--ink)}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* ============================================================
   HERO
   ============================================================ */

.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}

h1{
  margin:0;
  font-size:clamp(2.1rem,1.2rem + 4vw,4.3rem);
  line-height:1.03;font-weight:700;letter-spacing:-.015em;
  text-transform:lowercase;text-wrap:balance;
}
h1 .hl{
  background:linear-gradient(var(--acid),var(--acid)) 0 84%/100% .34em no-repeat;
  padding-inline:.06em;
}
.hero p{margin:1.7rem 0 0;max-width:27rem;color:var(--ink-soft);font-size:1.08rem}

/* ============================================================
   WALL PLAQUE — the section label, screwed to the wall
   ============================================================ */

section{padding-block:clamp(2.5rem,6vw,4.5rem)}

.plaque{
  display:inline-block;margin:0 0 1.5rem;
  background:linear-gradient(150deg,#FAFBF6,#E7E9DF);
  padding:.5rem 1.1rem;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(20,28,6,.13),
    0 0 0 1px rgba(20,28,6,.14),
    0 1px 1px rgba(20,28,6,.14),
    1px 5px 9px -5px rgba(20,28,6,.5);
}
.note{margin:0 0 2rem;color:var(--ink-soft);font-size:1rem;max-width:44rem}
.note strong{font-weight:700;color:var(--ink)}
.note a{color:var(--ink);text-decoration:none;
  background:linear-gradient(var(--acid),var(--acid)) 0 90%/100% .32em no-repeat}

/* ============================================================
   GRIDS — nothing may exceed its column
   ============================================================ */

.row{display:grid;gap:clamp(1.4rem,3.4vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.row-tight{display:grid;gap:clamp(1.1rem,2.6vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.row>*,.row-tight>*{min-width:0;max-width:100%}

/* nights: every tile the same shape so the row lines up */
.row-tight .uniform .art img,
.row-tight .uniform .art video{aspect-ratio:4/5;object-fit:cover;height:100%}

/* ============================================================
   SERVICES — small cards mounted on the wall
   ============================================================ */

.cards{display:grid;gap:clamp(.9rem,2.2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr))}
.card{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  background:linear-gradient(152deg,#FFFFFF,#F1F3EB);
  padding:1.5rem 1.35rem 1.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(20,28,6,.1),
    0 0 0 1px rgba(20,28,6,.13),
    0 1px 1px rgba(20,28,6,.13),
    1px 12px 20px -12px rgba(20,28,6,.45);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--acid);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.card>*{position:relative;z-index:1}
.card:hover,.card:focus-visible{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(20,28,6,.1),
    0 0 0 1px rgba(20,28,6,.2),
    0 2px 2px rgba(20,28,6,.14),
    2px 20px 30px -14px rgba(20,28,6,.5);
}
.card:hover::before,.card:focus-visible::before{transform:translateY(0)}
.card h3{margin:0;font-size:1.2rem;font-weight:700;text-transform:lowercase}
.card p{margin:.6rem 0 0;font-size:.93rem;line-height:1.55;color:var(--ink-soft);
  transition:color .4s var(--ease)}
.card .go{
  display:block;margin-top:1.2rem;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s var(--ease);
}
.card:hover p,.card:focus-visible p,
.card:hover .go,.card:focus-visible .go{color:var(--ink)}
.card:hover .go,.card:focus-visible .go{opacity:1;transform:none}

/* ============================================================
   COMMISSION — a sheet of paper pinned to the wall
   ============================================================ */

#commission .sheet{
  background:linear-gradient(170deg,#FFFFFF,#F7F8F2);
  padding:clamp(1.5rem,3.4vw,2.6rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(20,28,6,.13),
    0 1px 1px rgba(20,28,6,.13),
    2px 18px 34px -18px rgba(20,28,6,.5);
}
.form-title{margin:0;font-size:clamp(1.7rem,1.1rem + 2.2vw,2.6rem);
  font-weight:700;line-height:1.1;text-transform:lowercase}
#commission .lede{margin:.9rem 0 0;color:var(--ink-soft);max-width:34rem}

.field{margin-top:1.5rem}
.field label{display:block;margin-bottom:.45rem;font-weight:700;font-size:.98rem}
.opt{font-weight:400;color:var(--ink-soft);font-size:.9rem}

input[type=text],input[type=email],textarea{
  display:block;width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:#FDFDFA;border:0;border-radius:0;padding:.85rem 1rem;
  /* pressed into the paper rather than drawn on it */
  box-shadow:
    inset 0 2px 3px -1px rgba(20,28,6,.14),
    inset 0 0 0 1px rgba(20,28,6,.15);
  transition:box-shadow .35s var(--ease);
}
textarea{min-height:11rem;resize:vertical}
input:focus,textarea:focus{
  outline:none;
  box-shadow:
    inset 0 2px 3px -1px rgba(20,28,6,.1),
    inset 0 0 0 2px var(--acid-deep);
}
.hp{position:absolute;left:-9999px}

button[type=submit]{
  margin-top:1.8rem;font:inherit;font-weight:700;font-size:1rem;
  letter-spacing:.04em;cursor:pointer;border:0;
  background:var(--ink);color:#F7F8F2;padding:1rem 2.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 1px rgba(20,28,6,.3),
    1px 12px 22px -12px rgba(20,28,6,.9);
  transition:background-color .4s var(--ease),color .4s var(--ease),
             transform .3s var(--ease);
}
button[type=submit]:hover:not(:disabled){
  background:var(--acid);color:var(--ink);transform:translateY(-2px)}
button[type=submit]:disabled{opacity:.6;cursor:default}

.sent{font-size:1.1rem;font-weight:600;
  border-left:4px solid var(--acid);padding-left:1rem;margin:0}

.lines{display:grid;gap:.75rem;justify-items:start;margin-top:1.6rem}
.lines a{
  text-decoration:none;font-weight:700;font-size:1rem;
  padding:.65rem 1.2rem;background:#FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(20,28,6,.14),
    0 1px 1px rgba(20,28,6,.12),
    1px 8px 14px -8px rgba(20,28,6,.45);
  transition:background-color .4s var(--ease),transform .3s var(--ease);
}
.lines a:hover,.lines a:focus-visible{background:var(--acid);transform:translateY(-2px)}

footer{
  padding:2rem 0 3rem;margin-top:1.5rem;position:relative;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(20,28,6,.14) 16%,
    rgba(20,28,6,.14) 84%,transparent)}

/* ============================================================
   LIGHTBOX — the piece taken down and held under a lamp
   ============================================================ */

.lb{
  position:fixed;inset:0;z-index:100;display:none;
  background:
    radial-gradient(90% 70% at 50% 0%, #FDFEFA 0%, #ECEDE7 55%, #DEE0D7 100%);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb.open{display:flex;flex-direction:column}
.lb.shown{opacity:1}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,4vw,2rem)}
.lb-tag{font-family:"Space Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.lb-close,.lb-nav{
  background:#FFFFFF;border:0;cursor:pointer;font:inherit;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(20,28,6,.15),0 1px 1px rgba(20,28,6,.12),
    1px 8px 14px -8px rgba(20,28,6,.5);
  transition:background-color .35s var(--ease),transform .3s var(--ease);
}
.lb-close{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.2rem}
.lb-nav{width:3rem;height:3rem;flex:none;font-size:1.1rem;line-height:1}
.lb-close:hover,.lb-nav:hover{background:var(--acid);transform:translateY(-2px)}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:.7rem;padding:0 clamp(1rem,3vw,2rem)}
.lb-stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  background:#fff;padding:clamp(.4rem,1vw,.7rem);
  box-shadow:
    0 0 0 1px rgba(20,28,6,.2),
    0 2px 3px rgba(20,28,6,.2),
    0 30px 60px -28px rgba(20,28,6,.75);
  opacity:0;transform:scale(.985);
  transition:opacity .45s var(--ease),transform .45s var(--ease-out);
}
.lb-stage img.ready{opacity:1;transform:none}
.lb-foot{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;padding:1.2rem clamp(1rem,4vw,2rem) 1.7rem}
.lb-foot p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:36rem}
.lb-foot p.is-note{
  background:rgba(255,255,255,.75);padding:.75rem 1.1rem;
  border-left:3px solid var(--acid);
  box-shadow:0 0 0 1px rgba(20,28,6,.1)}
.lb-cta{
  text-decoration:none;font-weight:700;font-size:.98rem;
  background:var(--ink);color:#F7F8F2;padding:.85rem 1.7rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
    1px 12px 22px -12px rgba(20,28,6,.9);
  transition:background-color .4s var(--ease),color .4s var(--ease),transform .3s var(--ease);
}
.lb-cta:hover{background:var(--acid);color:var(--ink);transform:translateY(-2px)}
body.lb-lock{overflow:hidden}

/* ============================================================
   PLAYER — open on arrival, folds to a disc once you browse
   ============================================================ */

.player{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  /* stays out of the way until the widget actually reports ready,
     so a blocked or failed soundcloud never leaves a dead control */
  visibility:hidden;opacity:0;
  transition:opacity .6s var(--ease),padding .45s var(--ease),
             background-color .45s var(--ease),box-shadow .45s var(--ease);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(252,253,248,.9);
  padding:.4rem .95rem .4rem .4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(20,28,6,.15),0 1px 1px rgba(20,28,6,.14),
    2px 14px 26px -14px rgba(20,28,6,.7);
  pointer-events:none;                 /* never swallows taps meant for the page */
  transition:padding .45s var(--ease),background-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.player.live{visibility:visible;opacity:1}
.player.mini{padding:0;background:transparent;box-shadow:none}
.pbtn,#track{pointer-events:auto}
.pbtn{
  width:2.8rem;height:2.8rem;flex:none;cursor:pointer;padding:0;border-radius:50%;
  border:1.5px solid rgba(20,28,6,.4);background:rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease);
}
.pbtn:hover,.pbtn:focus-visible{background:var(--acid);border-color:var(--ink);transform:scale(1.06)}
.ico{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--ink);margin-left:3px}
.ico.pause{width:10px;height:13px;border:0;margin-left:0;
  border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.skip{position:relative;width:11px;height:12px;display:block}
.skip::before{content:"";position:absolute;left:0;top:0;width:0;height:0;
  border-style:solid;border-width:6px 0 6px 8px;
  border-color:transparent transparent transparent var(--ink)}
.skip::after{content:"";position:absolute;right:0;top:0;width:2.5px;height:12px;background:var(--ink)}
.meta{display:flex;align-items:center;gap:.5rem;overflow:hidden;white-space:nowrap;
  max-width:15rem;opacity:1;transition:max-width .45s var(--ease),opacity .3s var(--ease)}
.player.mini .meta,.player.mini .pbtn.next{max-width:0;opacity:0;overflow:hidden;border-width:0}
.pbtn.next{max-width:3rem;transition:max-width .4s var(--ease),opacity .3s var(--ease),
  background-color .3s var(--ease),transform .3s var(--ease)}
#track{font-family:"Space Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease)}
#track:hover{color:var(--ink);border-bottom-color:var(--acid)}
.eq{display:flex;align-items:flex-end;gap:2px;height:11px;flex:none}
.eq i{width:2px;height:3px;background:var(--ink);display:block}
.player.on .eq i{animation:eq .9s ease-in-out infinite}
.player.on .eq i:nth-child(2){animation-delay:.18s}
.player.on .eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}

/* ============================================================
   REVEAL
   ============================================================ */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rise.in{opacity:1;transform:none}

:focus-visible{outline:3px solid var(--acid-deep);outline-offset:4px}

/* anchors clear the sticky masthead */
section[id],#top{scroll-margin-top:5.5rem}

/* ============================================================
   RESPONSIVE + TOUCH GUARDS
   iOS desyncs hit areas when a sticky bar is blurred or a
   background is attachment:fixed. Neither is used; blur and
   3D tilt are switched off on touch as well.
   ============================================================ */

@media (max-width:52rem){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .row-tight .uniform .art img,
  .row-tight .uniform .art video{aspect-ratio:1/1}
}
@media (max-width:46rem){
  .masthead .wrap{flex-direction:column;align-items:center;gap:.4rem;padding:.6rem 0 .5rem}
  .brand img{width:2rem}
  .brand span{font-size:1.05rem}
  nav{width:100%;justify-content:center;gap:0;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none}
  nav::-webkit-scrollbar{display:none}
  /* six items now (motion was added) — tightened so contact is not
     clipped off the right edge on a narrow phone */
  nav a{font-size:.62rem;letter-spacing:.06em;padding:.45rem .36rem;white-space:nowrap}
  section[id]{scroll-margin-top:7rem}
  #commission{padding-bottom:5.5rem}
}
@media (max-width:52rem){
  /* no live background on phones. the motion section still plays —
     that one is a piece on the wall, not wallpaper. */
  .ambient{display:none}
}
@media (hover:none),(max-width:52rem){
  .frame{transform:none !important}
  .player{left:.8rem;bottom:.8rem}
  .player .meta{max-width:0;opacity:0}
  .player:not(.mini) .meta{max-width:8.5rem;opacity:1}
}
@media (max-width:22rem){
  /* smallest phones (iPhone SE and friends) — last squeeze so the six
     nav items still land inside the screen */
  nav a{font-size:.57rem;letter-spacing:.03em;padding:.45rem .28rem}
}
@media (max-width:34rem){
  .lb-nav{width:2.4rem;height:2.4rem}
  .lb-foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .frame{transform:none !important}
  .ambient{display:none}
}

/* nothing may break its column */
img,video{max-width:100%}
.art img,.art video{width:100%;height:auto}

/* clip play badge */
.frame.clip{cursor:pointer}
.badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;width:3.4rem;height:3.4rem;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(20,28,6,.5);background:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px -4px rgba(20,28,6,.7);
  transition:opacity .35s var(--ease);
}
.badge::before{
  content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--ink);margin-left:4px;
}
.frame.clip.playing .badge{opacity:0}

/* ============================================================
   HANG THE ROWS SO NOTHING IS ORPHANED
   auto-fit leaves a single tile stranded at the end of a row.
   Explicit counts keep every row full at the widths that matter.
   ============================================================ */

@media (min-width:64rem){
  .row{grid-template-columns:repeat(4,minmax(0,1fr))}       /* 4 pieces, one row */
  .row-tight{grid-template-columns:repeat(5,minmax(0,1fr))} /* nights: 5, one row */
}
@media (min-width:44rem) and (max-width:63.99rem){
  .row,.row-tight{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:43.99rem){
  .row,.row-tight{grid-template-columns:1fr}
}

/* player moves to the right — the left edge belongs to the plaques */
.player{left:auto;right:clamp(1rem,3vw,2rem)}
@media (hover:none),(max-width:52rem){ .player{left:auto;right:.8rem} }

/* ============================================================
   COMMISSION — sheet and contact side by side
   ============================================================ */
.commission-grid{
  display:grid;gap:clamp(1.5rem,3vw,2.6rem);align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
}
@media (max-width:56rem){ .commission-grid{grid-template-columns:1fr} }
.aside h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:700;text-transform:lowercase}
.aside p{margin:0 0 1.4rem;color:var(--ink-soft);font-size:.96rem}
.aside .lines{margin-top:0}
.aside .lines a{width:auto}

.send-failed{
  margin:1.1rem 0 0;font-size:.95rem;color:var(--ink);
  border-left:4px solid #BB1C04;padding-left:.9rem;
}

/* one line under the send button saying what happens to their details.
   delete the <p class="privacy"> in index.html if you don't want it. */
.privacy{
  margin:.85rem 0 0;font-size:.78rem;line-height:1.5;
  color:var(--ink-soft);max-width:34rem;
}

/* ---------- a section holding one piece on its own ----------
   no grid to fill, so it is sized like a single hung poster rather
   than stretched across the wall. */
.row-solo{width:min(27rem,100%);margin-inline:auto}
.row-solo .frame{margin:0}

/* ---------- how it was made: two portrait process clips ----------
   phone footage shot over the shoulder, so it stays small and sits
   under the poster row rather than competing with the work itself. */
.plaque.sub{margin-top:clamp(2.6rem,5vw,4rem)}
.row-make{
  display:grid;gap:clamp(1.1rem,2.6vw,1.9rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(34rem,100%);margin-inline:auto;
}
.row-make>*{min-width:0;max-width:100%}
.row-make .art video{aspect-ratio:9/16;object-fit:cover;width:100%;height:100%;display:block}

/* ---------- motion piece: the identity loop ---------- */
.motion-piece{width:min(60rem,100%);margin-inline:auto}
.motion-piece video{width:100%;display:block}