/* ============================================================
   SamuelJon Media  ·  site.css
   One stylesheet for every page. Tokens first, then components.
   Ground: light cool grey. Photographs: monochrome. One accent.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

:root{
  /* colour */
  --g:#E9E7E2;          /* page ground        */
  --surf:#FFFFFF;       /* raised surface     */
  --ink:#121317;        /* type and dark band */
  --dim:#62656C;        /* secondary type     */
  --rule:#D2CEC6;       /* hairline           */
  --hot:#A83E17;        /* the only accent    */
  --gold:#9A7326;       /* figures on dark    */
  --onDark:#EFEFEC;
  --onDarkDim:#8B8E94;

  /* type */
  --serif:"Libre Bodoni",Didot,"Times New Roman",Georgia,serif;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* measure */
  --measure:1080px;
  --gutter:clamp(18px,4.4vw,40px);
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--g);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

.m{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.micro{font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* photographs are monochrome, everywhere */
.ph{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#141414;
  filter:grayscale(1) contrast(1.04)}
.ph.keep-colour{filter:none}
.shot{position:relative;overflow:hidden;margin:0;background:#141414;aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)}
.shot.fill{aspect-ratio:auto;height:100%}
.shot.keep-colour img{filter:none}
.wide{aspect-ratio:16/9}.sq{aspect-ratio:1/1}.tall{aspect-ratio:4/5}.four3{aspect-ratio:4/3}.three2{aspect-ratio:3/2}
.shot.wide{aspect-ratio:16/9}.shot.sq{aspect-ratio:1/1}.shot.tall{aspect-ratio:4/5}.shot.four3{aspect-ratio:4/3}.shot.three2{aspect-ratio:3/2}

/* ---------- form controls, shared with the inquiry form ---------- */
.field{display:grid;gap:7px}
.field > span,.lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.inp,.sel,.txt{font:inherit;font-size:14.5px;padding:11px 12px;border:1px solid var(--rule);background:var(--surf);
  color:var(--ink);border-radius:0;width:100%}
.inp:focus,.sel:focus,.txt:focus{border-color:var(--ink);outline:none;box-shadow:inset 0 -2px 0 var(--hot)}
.txt{line-height:1.6;resize:vertical;min-height:90px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px}
.row.tight{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.btn{font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;cursor:pointer;
  padding:11px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--g);transition:opacity .15s}
.btn:hover{opacity:.85}
.btn.q{background:transparent;color:var(--ink)}
.btn.hot{background:var(--hot);border-color:var(--hot);color:#FFF6F0}
.btn.sm{padding:7px 12px;font-size:9.5px}
.btn.link{background:none;border:0;color:var(--hot);padding:4px 0;letter-spacing:.14em}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- masthead ---------- */
.bar{border-bottom:1px solid var(--rule);background:var(--g);position:sticky;top:0;z-index:30}
.bar .m{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-block:18px;transition:padding .22s ease}
.bar.tight .m{padding-block:10px}
.bar.tight .mark img{height:20px}
.mark img{transition:height .22s ease}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark img{height:26px;width:auto}
.mark b{color:var(--hot)}
.bar nav{display:flex;gap:clamp(11px,2.1vw,24px);flex-wrap:wrap}
.bar nav a{text-decoration:none;color:var(--dim);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--ink)}

/* ---------- reel ---------- */
.front{padding-block:clamp(16px,2.2vw,24px) 0}
.screen{background:#000;overflow:hidden;border:1px solid var(--rule);aspect-ratio:var(--ar,16/9);position:relative}
.screen video,.screen img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.screen .expand{position:absolute;right:12px;bottom:12px;background:rgba(18,19,23,.72);color:#fff;border:0;
  padding:9px 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.screen .expand:hover{background:var(--hot)}
.runner{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:nowrap;white-space:nowrap;padding-top:9px;color:var(--dim)}
.runner span{white-space:nowrap}

/* ---------- page title ---------- */
.title{padding-block:clamp(18px,2.4vw,30px) clamp(10px,1.2vw,16px)}
h1{font-family:var(--serif);font-weight:400;margin:0;font-size:clamp(40px,7.6vw,86px);line-height:.98;
  letter-spacing:-.018em;text-wrap:balance}
h1 i{font-style:italic;color:var(--hot)}
h1 b{color:inherit;font-weight:400}
h1.small{font-size:clamp(34px,5.6vw,66px)}
@media(min-width:900px){h1,h1.small{white-space:nowrap;text-wrap:nowrap}}
.stand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px clamp(24px,5vw,70px);
  align-items:start;margin-top:clamp(18px,2.6vw,30px);border-top:1px solid var(--ink);padding-top:15px}
.stand p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.7;color:var(--dim)}
/* both columns sit on the same first baseline */
.stand .set{padding-top:4px;line-height:1.7}
.stand .set{display:flex;gap:clamp(12px,1.8vw,22px);flex-wrap:nowrap;white-space:nowrap;color:var(--dim)}
.stand .set span{white-space:nowrap}
@media(max-width:680px){.stand{grid-template-columns:1fr;align-items:start}}

/* ---------- section label ---------- */
.sect{padding-block:clamp(20px,2.6vw,34px)}
.slab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:nowrap;white-space:nowrap;
  border-top:1px solid var(--ink);padding-top:13px;margin:0 0 clamp(18px,2.6vw,30px);color:var(--gold)}
.slab em{white-space:normal}
.slab em{font-style:normal;color:var(--dim)}

/* ---------- frame blocks: picture plus a short story ---------- */
.frames{display:grid;gap:clamp(30px,4.4vw,58px)}
.frame{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(18px,3.4vw,44px);align-items:center}
.frame.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.frame.flip .art{order:2}
/* Depth comes from scale, bleed and offset, never from covering a
   photograph or right justifying a paragraph. */
.shot{box-shadow:0 22px 44px -34px rgba(18,19,23,.7)}
@media(min-width:900px){
  /* the opening frame is the biggest, but it still starts on the same
     left edge as the masthead, the headline and every rule on the page. */
  .frames > .frame:first-child{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  /* alternating frames sit lower, so the rhythm is not a flat grid */
  .frames > .frame:nth-child(even) .art{transform:translateY(26px)}
  .frames > .frame:nth-child(even){align-items:start}
  .frames > .frame:nth-child(even) .story{padding-top:clamp(10px,2.4vw,34px)}
}
.frame.stack{grid-template-columns:1fr}
@media(max-width:800px){
  .frame,.frame.flip{grid-template-columns:1fr}
  .frame.flip .art{order:0}
}

/* the art side: one picture, or a small collage */
.art{position:relative}
.art .open{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;cursor:pointer;padding:0}
.hint{position:absolute;right:10px;bottom:10px;background:rgba(18,19,23,.74);color:#fff;padding:8px 13px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;transition:background .2s,transform .2s}
.art .open:hover .hint,.art .open:focus-visible .hint{background:var(--hot);transform:translateY(-2px)}
.art:hover .shot img{filter:grayscale(1) contrast(1.12) brightness(1.04)}
.art:hover .shot.keep-colour img,.cell:hover .shot.keep-colour img{filter:saturate(1.06) contrast(1.04)}
.shot img{transition:filter .3s ease,transform .5s cubic-bezier(.2,.6,.2,1)}
.art:hover .shot img{transform:scale(1.015)}
.collage{display:grid;gap:8px}
.collage.c2{grid-template-columns:1fr 1fr}
.collage.c3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.collage.c3 > :first-child{grid-row:span 2}
.collage .ph{width:100%;height:100%;min-height:0}
.collage.c3 .ph{aspect-ratio:auto}
.collage.c3{aspect-ratio:16/10}

/* the story side */
.story h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.2vw,38px);line-height:1.06;
  margin:0 0 14px;letter-spacing:-.018em;text-wrap:balance}
.story p{margin:0 0 14px;color:var(--dim);font-size:15.5px;line-height:1.74;max-width:44ch}
.story .verse{margin:0 0 16px;padding-left:16px;border-left:2px solid var(--hot);
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,21px);line-height:1.4;color:var(--ink);max-width:36ch}
.story .verse cite{display:block;margin-top:8px;font-family:var(--sans);font-style:normal;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.story .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--dim);padding-top:12px;border-top:1px solid var(--rule)}
.story .meta b{color:var(--ink);font-weight:600}

figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--rule);color:var(--dim)}
figcaption b{color:var(--ink);font-weight:600;letter-spacing:.16em}
figure{margin:0}

/* ---------- commission list ---------- */
.lanes{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.lane{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:10px clamp(16px,3vw,40px);
  align-items:baseline;padding-block:clamp(15px,2.2vw,22px);border-bottom:1px solid var(--rule);text-decoration:none}
.lane h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);margin:0;line-height:1.04;letter-spacing:-.015em}
.lane p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.7;max-width:58ch}
.lane .arrow{color:var(--rule);font-size:16px}
.lane:hover h3,.lane:hover .arrow{color:var(--hot)}
@media(max-width:640px){.lane{grid-template-columns:1fr;gap:6px}.lane .arrow{display:none}}

/* ---------- dark bands ---------- */
.band{background:var(--ink);color:var(--onDark)}
.band .m{padding-block:clamp(40px,7vw,96px)}
.band a{color:var(--onDark)}
.say p{font-family:var(--serif);font-style:italic;font-weight:400;margin:0 auto;max-width:21ch;text-align:center;
  font-size:clamp(27px,4.4vw,54px);line-height:1.16;letter-spacing:-.012em}
.say span{display:block;text-align:center;margin-top:24px;color:var(--onDarkDim)}
.split .m{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(22px,3.6vw,50px);align-items:center}
.split h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.8vw,44px);line-height:1.08;margin:0 0 16px;letter-spacing:-.015em}
.split p{margin:0 0 24px;color:#B3B6BB;font-size:15px;line-height:1.74;max-width:42ch}
.figs{display:flex;gap:clamp(18px,3.4vw,42px);flex-wrap:wrap;margin:0 0 26px}
.figs div b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,42px);line-height:1;
  color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.figs div span{display:block;margin-top:7px;color:var(--onDarkDim)}

/* ---------- cards of words ---------- */
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2.6vw,32px)}
.word{border-top:1px solid var(--ink);padding-top:15px}
.word h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,27px);margin:0 0 8px;line-height:1.12}
.word p{margin:0 0 14px;color:var(--dim);font-size:14.5px;line-height:1.7}
.word a{color:var(--hot);text-decoration:none}
.word a:hover{border-bottom:1px solid currentColor}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3.6vw,46px);align-items:start}
.about .ph{width:100%;aspect-ratio:2/3}
.about blockquote{margin:0 0 18px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.7vw,31px);
  line-height:1.26;letter-spacing:-.01em}
.about p{margin:0 0 14px;color:var(--dim);font-size:15px;line-height:1.76;max-width:58ch}
.orgs{display:flex;gap:clamp(12px,2.2vw,26px);flex-wrap:nowrap;white-space:nowrap;margin-top:20px;color:var(--dim);overflow-x:auto}
.orgs a{text-decoration:none;border-bottom:1px solid var(--rule)}
.orgs a:hover{color:var(--hot);border-color:var(--hot)}
@media(max-width:720px){.about{grid-template-columns:1fr}.about .ph{max-width:240px}}

/* ---------- close and footer ---------- */
.close{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);
  align-items:end;border-top:1px solid var(--ink);padding-top:clamp(20px,3vw,32px)}
@media(max-width:760px){.close{grid-template-columns:1fr}}
.close .lede{margin:0;font-size:15.5px;line-height:1.7;color:var(--dim);max-width:46ch}
.close h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,50px);line-height:1.06;margin:0;
  letter-spacing:-.018em;text-wrap:balance}
.go{display:flex;gap:10px;flex-wrap:wrap}
.cta{display:inline-block;text-decoration:none;background:var(--hot);color:#FFF6F0;padding:15px 26px;font-weight:600;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--hot);cursor:pointer}
.cta.q{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta:hover{opacity:.88}
.foot{border-top:1px solid var(--ink);margin-top:clamp(40px,6vw,80px);background:var(--g)}
.footgrid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,48px);padding-block:clamp(30px,4vw,52px) clamp(22px,3vw,34px)}
@media(max-width:860px){.footgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.footcol{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.footcol .lab{margin:0 0 4px;color:var(--gold)}
.footcol a{text-decoration:none;font-size:14px;color:var(--dim);border-bottom:1px solid transparent;line-height:1.4}
.footcol a:hover{color:var(--ink);border-bottom-color:var(--hot)}
.footcol.wide p{margin:0;font-size:14px;line-height:1.7;color:var(--dim);max-width:40ch}
.footcol.wide .footline{margin-top:4px}
.footcol.wide .footline a{border-bottom:1px solid var(--rule)}
.footmark{height:26px;width:auto;margin-bottom:4px}
.footrule{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-block:16px 34px;color:var(--dim)}

/* ---------- index grid (work page) ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(16px,2.4vw,26px)}
.chip{background:transparent;border:1px solid var(--rule);color:var(--dim);cursor:pointer;padding:9px 15px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:color .18s,border-color .18s,background .18s}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--g)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(14px,2.4vw,26px)}
.cell[hidden]{display:none}
.cell{position:relative;border:0;padding:0;background:none;cursor:pointer;text-align:left}
.cell figcaption{border-top-color:var(--rule)}
.cell:hover .shot img{filter:grayscale(1) contrast(1.12) brightness(1.06);transform:scale(1.02)}

/* ---------- the pop up ----------
   A panel that floats above the page, takes the shape of the picture
   inside it, and never fills the screen. The page stays visible and
   dimmed behind it, which is where the depth comes from. */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:clamp(12px,2.6vw,44px);background:rgba(16,17,21,.58);
  backdrop-filter:blur(8px) saturate(.85);-webkit-backdrop-filter:blur(8px) saturate(.85)}
/* The panel is as wide as the picture's own pixels allow, as wide as the
   window allows, and as wide as the remaining height allows once the bar and
   the strip are accounted for. The smallest of the three wins, so the picture
   fills the panel exactly and is never blown up past its own resolution. */
.lb-panel{
  /* 84vh is the ceiling, less about 140px for the bar and the strip.
     The panel never touches the top or bottom of the window. */
  --cap:calc((84vh - 140px) * var(--lbr, 1.5));
  background:var(--surf);
  width:min(var(--lbw,900px), 100%, var(--cap));
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8), 0 18px 44px -26px rgba(0,0,0,.55);
}
.lb-media{background:#0D0E11;aspect-ratio:var(--lbr,1.5);min-height:0}
.lb-media img,.lb-media video{display:block;width:100%;height:100%;
  object-fit:contain;filter:none;transition:opacity .26s ease}
.lb-holder{display:contents}

.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 18px;flex-wrap:wrap;
  padding:12px clamp(12px,1.6vw,18px);border-top:1px solid var(--rule);background:var(--surf)}
.lb-title{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-title b{color:var(--ink);font-weight:600;letter-spacing:.18em}
.lb-title span{margin-left:10px}
.lb-tools{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.lb-count{color:var(--dim);padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-btn{font:inherit;font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  background:transparent;border:1px solid var(--rule);color:var(--ink);padding:8px 12px;white-space:nowrap}
.lb-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--g)}
.lb-btn[hidden]{display:none}
.lb-prev,.lb-next{padding:6px 12px;font-size:15px;line-height:1;letter-spacing:0}

.lb-strip{display:flex;gap:6px;overflow-x:auto;padding:10px clamp(12px,1.6vw,18px) 12px;
  border-top:1px solid var(--rule);background:var(--surf);scrollbar-width:thin}
.lb-strip[hidden]{display:none}
.lb-thumb{flex:0 0 auto;width:74px;height:50px;border:1px solid transparent;background-size:cover;
  background-position:center;cursor:pointer;filter:grayscale(1);opacity:.5;padding:0}
.lb-thumb[aria-current="true"]{opacity:1;border-color:var(--hot);filter:none}
.lb-thumb:hover{opacity:1}

@media(max-width:720px){
  .lb{padding:10px;align-items:end}
  .lb-panel{width:100%}
  .lb-panel{--cap:calc((80vh - 190px) * var(--lbr, 1.5))}
  .lb-bar{padding:10px 12px}
  .lb-title{flex:1 1 100%;order:2}
  .lb-tools{order:1;width:100%;justify-content:space-between}
  .lb-btn.lb-shoot{display:none}
  .lb-thumb{width:60px;height:42px}
}

.rise{transform:translateY(10px);transition:transform .55s cubic-bezier(.22,.7,.25,1)}
.rise.in{transform:none}
body.locked{overflow:hidden}

@media(max-width:760px){
  .stand{grid-template-columns:1fr;align-items:start}
  .stand .set,.runner,.orgs{flex-wrap:wrap;white-space:normal;overflow:visible}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media print{.bar,.lb,.cta{display:none}}