/* ------------------------------------------------------------------
   aart100 — Work pages (shared: /w3630, /w3634-samp)
   Faithful rebuild of the sqa100.com work-page layout, made responsive.
   Header follows categories.css / login.css (aart100 wordmark), which
   replaces the source page's own "SQA-List.com" masthead.
   Source geometry measured at a 1024px viewport.
   ------------------------------------------------------------------ */
@font-face{
  font-family:"Fascinate";
  src:url("../fonts/Fascinate-Regular.ttf") format("truetype");
  font-display:block;
}

:root{
  --band:#f2f2f2;        /* header band                      */
  --ground:#cdcdcd;      /* grey page ground                 */
  --rail:#b0b0b0;        /* darker rails either side of stage*/
  --card:#ffffff;
  --rule:#333333;        /* 15px divider rules               */
  --bar:#050505;         /* copyright bar                    */
  --mark-grey:#999999;   /* wordmark                         */
  --mark-red:#e42020;
  --link:#004670;
  --ink-2:#594d4d;       /* secondary text                   */
  --ink-3:#808080;       /* labels, notes                    */
  --hairline:#cccccc;    /* spec row rules on white          */
  --on-grey-mute:#4a4a4a;/* secondary text on the grey ground*/
  --on-grey-soft:#545454;/* muted title suffix on the ground */
  --on-grey-rule:#a6a6a6;/* hairlines on the grey ground     */
  --ink:#000000;
  --sans:Arial, Helvetica, sans-serif;
  --display:"Questrial", Arial, sans-serif;
  --body:"Open Sans", Arial, sans-serif;
  --page:1024px;
  --content:957px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:15px/1.45 var(--sans);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:calc(var(--content) + 32px);margin:0 auto;padding:0 16px}

/* ---------- OBI texture strips ---------- */
.strip{background:url("../img/obi.jpg") center/cover no-repeat}
.strip--top{height:107px}
.strip--mid{height:66px}
.strip--foot{height:124px;background-image:url("../img/w3630/footer-bg.jpg")}

/* ---------- header band (shared with /categories and /login) ---------- */
.band{background:var(--band);text-align:center;padding:38px 16px 26px}

.wordmark{
  font-family:"Fascinate", Impact, var(--sans);
  line-height:1.2;letter-spacing:0;
  text-shadow:1px 1px 0 #000;
  white-space:nowrap;margin:0;
}
.wordmark .g{font-size:72px;color:var(--mark-grey)}
.wordmark .red{font-size:72px;color:var(--mark-red)}
.wordmark .t{font-size:60px;color:var(--mark-grey)}
.wordmark .num{font-family:var(--sans);font-size:48px;color:var(--ink)}

.tagline{margin:2px 0 0;font-size:14px;color:var(--ink)}

.search{
  display:flex;align-items:center;gap:10px;
  width:465px;max-width:100%;height:49px;
  margin:22px auto 0;padding:0 22px;
  background:#fff;border:1.5px solid #3a3a3a;border-radius:999px;
  color:#999;font-size:15px;text-decoration:none;
}
.search span{flex:1;text-align:left}
.search svg{flex:none;color:#555}
.search:hover{border-color:#000}

.nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 26px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;
}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .todo{color:var(--ink);cursor:default}

/* ---------- grey ground ---------- */
.ground{padding:49px 0 41px}

.work-id{
  margin:0;text-align:center;
  font-family:var(--display);font-size:30px;font-weight:normal;line-height:1.2;
}
.artist-id{
  margin:6px 0 0;text-align:center;
  font-family:var(--display);font-size:22px;line-height:1.2;
}

/* ---------- viewer ---------- */
.viewer{
  display:flex;align-items:stretch;gap:0;
  margin:30px 0 0;
}

.rail{background:var(--rail);flex:none}
.rail--thumbs{width:171px;padding:16px 22px;display:flex;flex-direction:column;gap:16px}
.rail--thumbs--six{gap:10px}
.rail--info{width:266px;padding:19px 21px}

/* thumbnail slots — text placeholders where the source has no views yet,
   real switchable views where it does (see .thumb button variant below) */
.thumb{
  flex:1 1 0;min-height:0;   /* slots divide the rail height, 5 or 6 of them */
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:18px;color:var(--ink);
}
button.thumb{
  border:0;padding:4px;margin:0;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:outline-color .1s ease;
}
.thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
button.thumb:hover{outline:2px solid #777;outline-offset:-2px}
button.thumb[aria-pressed="true"]{outline:3px solid var(--link);outline-offset:-3px}
button.thumb:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* view name, laid over the stage matting so it costs no layout height */
.stage-caption{
  position:absolute;left:12px;bottom:10px;margin:0;
  font-size:12px;line-height:1.3;color:#666;
}

.stage{position:relative;flex:1 1 auto;min-width:0;margin:0;align-self:flex-start}
.stage img{width:100%}
.next{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:"PT Sans Narrow", Arial Narrow, var(--sans);
  font-size:42px;line-height:1;color:#666;
  background:none;border:0;padding:0 6px;cursor:pointer;
}
.next:hover{color:#222}

/* spec card */
.spec{background:var(--card);padding:15px 12px;margin:0}
.spec dl{margin:0;font-size:14px;line-height:18px}
.spec dt,.spec dd{display:inline;margin:0}
.spec dt{font-weight:bold}
.spec div{margin:0}
.spec .plain{margin:0;font-size:14px;line-height:18px;font-weight:bold}

/* ---------- expanded details panel (/w3634-samp) -------------------
   Same structure as the house design, but wearing this page's clothes:
   no white card (it sits straight on the grey rail) and the page's own
   Questrial/Arial rather than the house type stack. Secondary text is
   #3d3d3d, not #808080 — on #b0b0b0 that grey drops to ~1.8:1.
   ------------------------------------------------------------------ */
.viewer--details .rail--info{
  width:380px;
  background:transparent;   /* sits on the page ground, not the darker rail */
  padding:0 0 0 22px;
}
/* the details panel is taller than the artwork, so centre the stage in its
   column and keep the view slots at their normal size instead of stretching */
/* the artwork box matches the details panel beside it, artwork centred in it */
.viewer--details .stage{
  align-self:stretch;
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
}
.viewer--details .stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
}
/* slot height is chosen so the six slots never out-grow the description
   column; the description is what sets the viewer height, and the white
   artwork box stretches to match it */
.viewer--details .thumb{flex:0 0 auto;height:72px}

.details{background:transparent;padding:0;margin:0}
.details .eyebrow{
  margin:0 0 8px;font-family:var(--sans);font-size:12px;line-height:18px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-grey-mute);
}
.details .title{
  margin:0;font-family:var(--display);font-size:21px;line-height:26px;
  font-weight:400;text-wrap:balance;
}
.details .title em{font-style:normal;color:var(--on-grey-soft)}
.details .artist-line{
  margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:2px 10px;font-family:var(--display);font-size:16px;
}
.details .artist-line .note{
  font-family:var(--sans);font-size:12px;line-height:18px;color:var(--on-grey-mute);
}

.details .spec-list{margin:18px 0 0;border-top:1px solid var(--ink)}
.details .spec-list > div{
  display:grid;grid-template-columns:88px 1fr;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--on-grey-rule);
}
.details .spec-list dt{margin:0;color:var(--on-grey-mute);font-size:13px;line-height:20px}
.details .spec-list dd{margin:0;min-width:0;font-size:14px;line-height:20px}
.details .spec-list code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.02em;
}

.details .price-block{
  margin:18px 0 0;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;gap:4px 12px;
}
.details .price{margin:0;font-family:var(--display);font-size:24px;line-height:1.35}
.details .price span{font-family:var(--sans);font-size:13px;color:var(--ink);margin-left:6px}
.details .price-note{font-size:13px;color:var(--on-grey-mute)}

.details .availability{
  margin:14px 0 0;padding:0;list-style:none;
  display:grid;gap:6px;font-size:13px;line-height:19px;
}
.details .availability li{display:flex;align-items:flex-start;gap:10px}
.details .dot{width:8px;height:8px;flex:none;margin-top:5px;background:var(--ink)}
.details .dot.available{background:var(--mark-red)}
.details .dot.off{background:transparent;border:1px solid var(--on-grey-mute)}
.details .off-text{color:var(--on-grey-mute)}

/* enquiry call to action, replacing the old fixed-width green JPEG */
.btn-enquiry{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;margin:18px 0 0;padding:0 16px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .12s linear;
}
.btn-enquiry:hover,.btn-enquiry:focus-visible{background:var(--mark-red)}

.order-btn{display:block;width:182px;max-width:100%;margin:14px 0 0}
.about-artist{display:block;width:100%;margin:61px 0 0;background:var(--card)}
.about-artist img{width:139px;margin:0 auto}

/* ---------- about this work ---------- */
.section-title{
  margin:43px 0 0;text-align:center;
  font-family:var(--display);font-size:24px;font-weight:normal;line-height:1.2;
}
.about-text{
  margin:14px auto 0;max-width:642px;text-align:center;
  font-family:var(--body);font-size:18px;line-height:1.5;
}

/* ---------- divider rules ---------- */
/* ---------- about the artist ---------- */
.artist-section{margin:34px auto 0;max-width:760px}
.artist-section .section-title{margin:0}

/* expandable: native <details>, so it works with no JS */
.artist-section > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.artist-section > summary::-webkit-details-marker{display:none}
.artist-section > summary:focus-visible{outline:2px solid var(--link);outline-offset:6px}
.artist-section .chev{
  width:10px;height:10px;flex:none;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);margin-top:-7px;
  transition:transform .15s ease, margin-top .15s ease;
}
.artist-section[open] .chev{transform:rotate(-135deg);margin-top:4px}
.artist-section > summary:hover .chev{border-color:var(--link)}
.artist-id-line{
  margin:12px 0 0;text-align:center;font-family:var(--display);font-size:18px;
}
.artist-id-line .note{
  display:block;margin-top:2px;font-family:var(--sans);font-size:12px;color:#4a4a4a;
}
.artist-bio{margin:16px 0 0;font-family:var(--body);font-size:15px;line-height:1.6}
.artist-bio p{margin:0}
.artist-bio p + p{margin-top:12px}

.rule{border:0;border-top:15px solid var(--rule);margin:33px 0 0}

.band-title{
  background:var(--card);margin:0;padding:6px 16px;
  text-align:center;
  font-family:var(--display);font-size:24px;font-weight:normal;line-height:1.2;
}

/* ---------- other works grid ---------- */
.works{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:21px 30px;margin:56px 0 0;padding:0;list-style:none;
}
.works li{display:flex;flex-direction:column}
.work-tile{
  aspect-ratio:1/1;background:var(--card);
  box-shadow:0 0 5px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  padding:6px;text-decoration:none;overflow:hidden;
}
/* portrait works (W3640) must letterbox inside the square, not stretch it */
.work-tile img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;min-width:0;min-height:0;
  object-fit:contain;
}
.work-label{margin:9px 0 0;text-align:center;font-size:14px}
.work-label b{font-weight:bold}

.return{
  margin:25px 0 0;text-align:center;
  font-size:14px;font-weight:bold;color:var(--link);
}

/* ---------- copyright ---------- */
.copyright{
  background:var(--bar);color:#fff;margin:0;
  text-align:center;font-size:15px;padding:22px 16px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* stack the viewer: artwork, then its details, then the view slots */
  .viewer{flex-direction:column;gap:14px}
  .rail{width:auto;flex:none}

  .stage{order:1;align-self:stretch}
  .stage img{margin:0 auto;max-width:535px}

  .rail--info{order:2;padding:16px}
  .viewer--details .rail--info{width:auto;padding:0}
  .spec{padding:12px 16px}
  .order-btn{margin:16px auto 0}
  .about-artist{margin:16px auto 0;width:224px;max-width:100%}

  .rail--thumbs{
    order:3;flex-direction:row;padding:14px;gap:10px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .thumb{flex:0 0 120px;min-height:70px}

  .works{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .strip--top{height:64px}.strip--mid{height:34px}.strip--foot{height:70px}
  .band{padding:26px 16px 20px}
  .wordmark .g,.wordmark .red{font-size:52px}
  .wordmark .t{font-size:43px}
  .wordmark .num{font-size:35px}
  .nav{gap:6px 16px}
  .ground{padding:32px 0 34px}
  .work-id{font-size:24px}
  .artist-id{font-size:18px}
  .section-title{margin-top:30px;font-size:20px}
  .about-text{font-size:16px}
  .rule{margin-top:34px;border-top-width:10px}
  .band-title{font-size:20px}
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin-top:34px}
}