/* ── layanan ──────────────────────────────── */
/* Five compact cards in a grid. Each carries only text at rest — copy, the capability
   list, a cue — and opens into the shared detail panel (css/pop.css), where the
   same service gets its photo, its illustrated capabilities and the scan line
   between services. No artwork ever lives inside a card. */

/* A grid of separate, compact cards: three across then two wider ones on a
   desktop (a six-column track, so five cards fill two full rows), two across
   on tablets with the odd one out at full width, stacked on phones. At rest a
   card names its capabilities only; their one-line descriptions, the photo
   and the drawings wait in the detail panel, which is a copy made outside
   this grid, so nothing hidden here is hidden there. */
.svc{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(12px,1.4vw,18px); }
@media (min-width:640px){
  .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc article:last-of-type:nth-of-type(odd){ grid-column:1 / -1; }
}
@media (min-width:1000px){
  .svc{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .svc article{ grid-column:span 2; }
  .svc article:nth-of-type(n+4),
  .svc article:last-of-type:nth-of-type(odd){ grid-column:span 3; }
}
.svc article{ border:1px solid var(--line); }
.svc .svc-caps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; }
.svc .svc-caps li span{ display:none; }
.svc .svc-caps li{ font-size:13.5px; line-height:1.4; }
.svc .svc-caps li::before{ margin-top:6px; }
.svc .svc-caps li b{ font-weight:500; color:var(--txt); }
@media (max-width:420px){ .svc .svc-caps{ grid-template-columns:minmax(0,1fr); } }
.svc article{
  position:relative; z-index:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start;
  background-color:rgba(28,36,41,.96);
  background-image:var(--notch-tl),var(--notch-br);
  background-repeat:no-repeat; background-position:left top, right bottom;
  padding:clamp(22px,2.4vw,32px);
  transition:background-color .4s ease, box-shadow .35s ease;
}
.svc-body{ display:flex; flex-direction:column; gap:14px; flex:1 1 auto; }
.svc-copy{ display:flex; flex-direction:column; gap:14px; }
/* Corner mark. The card is notched, not clipped, so these two strokes flank the
   corner instead of sitting on its point. */
.svc article::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0;
  /* the mark strikes first and travels after: it fades in over .16s so the push
     outward is still ahead of the eye when it starts */
  transition:opacity .16s ease, background-size .5s cubic-bezier(.22,.68,.24,1) .06s;
  background-image:var(--brk-tl),var(--brk-br);
  background-repeat:no-repeat;
  background-size:22px 22px;
  background-position:left top, right bottom;
}
.svc h3{ font-size:clamp(19px,1.7vw,23px); font-variation-settings:"wdth" 108,"wght" 700; max-width:18ch; }
.svc article p{ font-size:14.5px; color:var(--txt-2); line-height:1.6; }
.svc ul{ display:flex; flex-direction:column; gap:11px; margin-top:2px; }
.svc li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; font-size:14px; }
.svc li::before{ content:""; width:6px; height:6px; margin-top:8px; background:var(--orange); }
.svc li b{ font-weight:600; display:block; }
.svc li span{ color:var(--dim); font-size:13.5px; line-height:1.5; }

/* The whole card is the trigger: a real button, stretched over it, so Enter and
   Space come for free and the accessible name says which service opens. Without
   the script there is nothing to open, so button and cue stay hidden and the
   card reads as the full list it already is. */
.svc-open{ display:none; }
.svc-vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.svc-cue{ display:none; }
/* the controls only have somewhere to be once the panel exists */
.svc .svc-ctl{ display:none; }

.svc.is-js .svc-open{
  display:block; position:absolute; inset:0; z-index:1;
  padding:0; border:0; background:none; cursor:pointer;
}
.svc-open:focus-visible{ outline:2px solid var(--orange-br); outline-offset:-3px; }
.svc.is-js .svc-cue{
  display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:16px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange-br);
  opacity:.72; transition:opacity .25s ease;
}
.svc-cue i{ font-style:normal; transition:transform .25s cubic-bezier(.22,.68,.24,1); }
/* a rule that draws itself out toward the card edge as the cue is read */
.svc-cue::after{
  content:""; height:1px; width:0; background:currentColor; opacity:.55;
  transition:width .45s cubic-bezier(.22,.68,.24,1);
}

/* ─ the resting affordance rehearses the click ─
   Hover plays, small and in place, the move the click makes large: the corner
   mark strikes short and then pushes out toward the card's edges, and keeps
   leaning on them for as long as the pointer stays. Nothing in it touches
   layout — the pointer crosses this row on its way elsewhere. */
.svc article:has(.svc-open:hover) .svc-cue,
.svc article:has(.svc-open:focus-visible) .svc-cue{ opacity:1; }
.svc article:has(.svc-open:hover) .svc-cue i,
.svc article:has(.svc-open:focus-visible) .svc-cue i{ transform:translateX(4px); }
.svc article:has(.svc-open:hover) .svc-cue::after,
.svc article:has(.svc-open:focus-visible) .svc-cue::after{ width:30px; }
.svc article:has(.svc-open:hover)::after,
.svc article:has(.svc-open:focus-visible)::after{
  opacity:1; background-size:48px 48px;
  /* the transition throws the mark out to 48px; this then takes over and keeps
     pressing on the corners, so a held hover never settles into a still card.
     The arms thicken as they grow — the whole mark scales — which is why the
     loop stays short of 60: past that it stops being a hairline. */
  animation:svc-brk 2.6s ease-in-out .56s infinite;
}
@keyframes svc-brk{
  0%{ background-size:48px 48px; }
  45%{ background-size:60px 60px; }
  100%{ background-size:48px 48px; }
}
/* lifted clear of the divider grid: the card reads as loose already, one
   click from leaving the row */
.svc article:has(.svc-open:hover),
.svc article:has(.svc-open:focus-visible){
  z-index:1; background-color:rgba(38,48,55,.96);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.92);
}
@media (prefers-reduced-motion: reduce){
  .svc article,.svc-cue,.svc-cue i,.svc-cue::after,.svc article::after{ transition:none; }
  .svc article:has(.svc-open:hover)::after,
  .svc article:has(.svc-open:focus-visible)::after{ animation:none; background-size:40px 40px; }
}

/* ── the service, opened ───────────────────────────────────
   The panel holds the service photo as its ground, behind a scrim that is
   opaque under the copy and clears to the right where the scene has to read,
   with a second pass that closes the foot back down — so the strip of tiles
   along the bottom lands on ground that is already dark. */
.pop-svc{
  height:min(780px, calc(100dvh - 48px));
  background:var(--surface-2);
}
.pop-stage{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.pop-stage > i{
  position:absolute; inset:0; display:block;
  background-image:
    linear-gradient(94deg,rgba(18,24,28,.95) 0%,rgba(18,24,28,.92) 26%,rgba(18,24,28,.55) 52%,rgba(18,24,28,.34) 78%,rgba(18,24,28,.30) 100%),
    linear-gradient(180deg,rgba(18,24,28,.62) 0%,rgba(18,24,28,.10) 34%,rgba(18,24,28,.14) 62%,rgba(18,24,28,.68) 100%),
    var(--svc-img);
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.045);
  transition:opacity .85s ease, transform 1.1s ease;
}
.pop-stage > i:nth-child(1){ --svc-img:url("../images/services-geology.webp?v=8724940b"); }
.pop-stage > i:nth-child(2){ --svc-img:url("../images/services-geophysics.webp?v=3cfbc468"); }
.pop-stage > i:nth-child(3){ --svc-img:url("../images/services-drilling.webp?v=c8786b6f"); }
.pop-stage > i:nth-child(4){ --svc-img:url("../images/services-desk-study.webp?v=a0f8c5b5"); }
.pop-stage > i:nth-child(5){ --svc-img:url("../images/services-petrography.webp?v=f5b7d34a"); }
.pop-svc[data-at="1"] .pop-stage > i:nth-child(1),
.pop-svc[data-at="2"] .pop-stage > i:nth-child(2),
.pop-svc[data-at="3"] .pop-stage > i:nth-child(3),
.pop-svc[data-at="4"] .pop-stage > i:nth-child(4),
.pop-svc[data-at="5"] .pop-stage > i:nth-child(5){ opacity:1; transform:none; }

/* Every control in one cluster at the top right: step back, the count, step
   on, close. The foot belongs to the capability strip, so this is the one
   corner a control can hold without standing on the tiles. */
.pop .svc-ctl{
  position:absolute; z-index:5; display:flex; align-items:center;
  /* wider than the gap inside the stepper: stepping and leaving are not the
     same kind of action, and at an even spacing the close reads as a fourth step */
  gap:18px;
  top:clamp(16px,2.2vw,30px); right:clamp(16px,2.2vw,30px);
}
.svc-nav{ display:flex; align-items:center; gap:10px; }
.svc-step,.svc-close{
  width:40px; height:40px; display:grid; place-items:center; padding:0;
  background:rgba(18,24,28,.62); border:1px solid var(--line-2);
  color:var(--txt); cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.svc-step svg,.svc-close svg{ width:16px; height:16px; display:block; }
.svc-step:hover,.svc-close:hover{ background:var(--orange); border-color:var(--orange); color:#FCFCFC; }
.svc-step:focus-visible,.svc-close:focus-visible{ outline:2px solid var(--orange-br); outline-offset:2px; }
.svc-count{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.1em;
  color:var(--dim); min-width:5.5ch; text-align:center;
}
.svc-count b{ color:var(--orange-br); font-weight:500; }
@media (prefers-reduced-motion: reduce){
  .svc-step,.svc-close,.pop-stage > i{ transition:none; }
  .pop-stage > i{ transform:none; }
  .pop-svc .svc-caps li{ animation:none; }
}

.pop-svc article{
  display:flex; flex-direction:column;
  padding:clamp(76px,7vw,96px) clamp(24px,3.4vw,52px) clamp(24px,3vw,40px);
}
.pop-svc .svc-body{
  flex:1 1 auto; display:grid; grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(22px,2.4vw,32px);
}
.pop-svc .svc-copy{ align-self:center; width:min(100%, 560px); gap:16px; }
.pop-svc h3{
  font-size:clamp(28px,3.4vw,48px); line-height:1.08; max-width:15ch;
  font-variation-settings:"wdth" 110,"wght" 800;
}
.pop-svc .svc-copy p{ font-size:clamp(15px,1.2vw,16.5px); color:var(--txt-2); line-height:1.65; max-width:52ch; }
.pop-svc .svc-cue{ display:none; }

/* the way into a service's sample results: hidden on the card, where the whole
   card is already a button, and shown once the service is open */
.svc-sub{ display:none; }
.pop-svc .svc-sub{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:4px;
  padding:11px 16px; background:rgba(18,24,28,.62); border:1px solid var(--orange);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange-br); cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background-color .2s ease, color .2s ease;
}
.pop-svc .svc-sub i{ font-style:normal; font-size:14px; letter-spacing:0; transition:transform .2s ease; }
.pop-svc .svc-sub:hover{ background:var(--orange); color:#FCFCFC; }
.pop-svc .svc-sub:hover i{ transform:translateX(3px); }
.pop-svc .svc-sub:focus-visible{ outline:2px solid var(--orange-br); outline-offset:3px; }

/* The divider grid belongs to the tiles, not to a slab behind them: borders
   overlap by a pixel, so a hairline arrives only with the tile that owns it
   while the strip is being dealt. */
.pop-svc .svc-caps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; counter-reset:cap;
}
.pop-svc .svc-caps li{
  position:relative; display:flex; flex-direction:column; counter-increment:cap;
  padding:clamp(14px,1.4vw,19px);
  border:1px solid var(--line-2);
  /* dark enough that a tile over the bright end of a scene reads the same as
     its neighbours over the dim end */
  background:rgba(18,24,28,.82);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  /* dealt left to right once the panel has nearly finished growing */
  animation:svc-cap-in .4s cubic-bezier(.22,.68,.24,1) both;
}
.pop-svc .svc-caps li + li{ margin-left:-1px; }
.pop-svc .svc-caps li:nth-child(1){ animation-delay:.36s; }
.pop-svc .svc-caps li:nth-child(2){ animation-delay:.415s; }
.pop-svc .svc-caps li:nth-child(3){ animation-delay:.47s; }
.pop-svc .svc-caps li:nth-child(4){ animation-delay:.525s; }
@keyframes svc-cap-in{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
/* the deck's outlined numeral, small: a reading order across the strip */
.pop-svc .svc-caps li::after{
  content:counter(cap,decimal-leading-zero);
  position:absolute; top:clamp(12px,1.2vw,16px); right:clamp(12px,1.2vw,16px);
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em;
  color:var(--orange-br); opacity:.55;
}
.pop-svc .svc-caps li b{ display:block; font-size:13.5px; line-height:1.35; font-weight:600; }
.pop-svc .svc-caps li span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--dim); }

/* The drawing rides on a background-image behind display:none in the cards, so
   no visitor who never opens a service pays for the files. */
.svc-ill{ display:none; }
.pop-svc .svc-ill{
  display:block; height:clamp(66px,min(6.6vw,11vh),96px);
  margin-bottom:clamp(10px,1vw,14px);
  background:var(--ill) no-repeat center/contain;
}
.ill-s1-mapping { --ill:url("../images/services/s1-mapping.webp?v=1f960e6b"); }
.ill-s1-laterite{ --ill:url("../images/services/s1-laterite.webp?v=625388a9"); }
.ill-s1-model3d { --ill:url("../images/services/s1-model3d.webp?v=f7021d02"); }
.ill-s1-pit     { --ill:url("../images/services/s1-pit.webp?v=1d9cb262"); }
.ill-s2-lidar   { --ill:url("../images/services/s2-lidar.webp?v=bd86e131"); }
.ill-s2-gpr     { --ill:url("../images/services/s2-gpr.webp?v=748e2189"); }
.ill-s2-ert     { --ill:url("../images/services/s2-ert.webp?v=51c2f5b8"); }
.ill-s2-rtk     { --ill:url("../images/services/s2-rtk.webp?v=18ef3565"); }
.ill-s3-drill   { --ill:url("../images/services/s3-drill.webp?v=4955f1b1"); }
.ill-s3-wellsite{ --ill:url("../images/services/s3-wellsite.webp?v=663a3dc6"); }
.ill-s3-sampling{ --ill:url("../images/services/s3-sampling.webp?v=d3ad485f"); }
.ill-s3-gis     { --ill:url("../images/services/s3-gis.webp?v=e3f953a5"); }
.ill-s4-sentinel{ --ill:url("../images/services/s4-sentinel.webp?v=fea41791"); }
.ill-s4-pca     { --ill:url("../images/services/s4-pca.webp?v=ba091392"); }
.ill-s4-struktur{ --ill:url("../images/services/s4-struktur.webp?v=7d548985"); }
.ill-s4-target  { --ill:url("../images/services/s4-target.webp?v=b46cc1e2"); }
.ill-s5-petro      { --ill:url("../images/services/s5-petro.webp?v=266b3840"); }
.ill-s5-alterasi   { --ill:url("../images/services/s5-alterasi.webp?v=1d4f2a86"); }
.ill-s5-minera     { --ill:url("../images/services/s5-minera.webp?v=64e54b15"); }
.ill-s5-paragenesis{ --ill:url("../images/services/s5-paragenesis.webp?v=a59e7843"); }

/* narrower panels: two tiles a row, and the scrim turns to run top to bottom
   because the copy now sits above the scene rather than beside it */
@media (max-width:960px){
  .pop-svc .svc-caps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pop-svc .svc-caps li:nth-child(n+3){ margin-top:-1px; }
  .pop-svc .svc-caps li:nth-child(3){ margin-left:0; }
  .pop-svc .svc-copy{ align-self:start; }
  .pop-stage > i{
    background-image:
      linear-gradient(180deg,rgba(18,24,28,.72) 0%,rgba(18,24,28,.9) 45%,rgba(18,24,28,.96) 100%),
      var(--svc-img);
  }
}
@media (max-width:720px){ .pop-svc{ height:100dvh; } }
@media (max-width:420px){
  .pop-svc .svc-caps{ grid-template-columns:minmax(0,1fr); }
  .pop-svc .svc-caps li + li{ margin:-1px 0 0; }
}

/* ── spesialisasi komoditas (PPT s.6) ─────────────────────── */
.komo{ margin-top:clamp(20px,2.4vw,32px); border:1px solid var(--line); background:var(--surface); }
.komo-head{ padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px); border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; }
.komo-head h3{ font-size:clamp(17px,1.5vw,21px); font-variation-settings:"wdth" 106,"wght" 700; }
.komo-head p{ font-size:13px; color:var(--dim); max-width:60ch; }
.komo-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); }
.komo li{ background:var(--surface); padding:clamp(16px,1.8vw,22px); display:grid; gap:5px; align-content:start; }
/* Spesimen dipotret di atas latar transparan; tile gelap memberi mereka pijakan. */
.komo-spec{
  background:var(--surface-2); margin-bottom:clamp(12px,1.2vw,16px);
  height:clamp(104px,11vw,140px); display:flex; align-items:center; justify-content:center;
  padding:10px; overflow:hidden;
}
.komo-spec img{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.komo li:hover .komo-spec img{ transform:scale(1.06); }
.komo li b{ font-size:14.5px; font-weight:600; }
.komo li span{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-br); }
@media (prefers-reduced-motion:reduce){ .komo-spec img{ transition:none; } .komo li:hover .komo-spec img{ transform:none; } }
@media (max-width:900px){ .komo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .komo-grid{ grid-template-columns:minmax(0,1fr); } .komo-spec{ height:132px; } }

/* ── contoh hasil layanan 04 ─────────────────────────────── */
/* With the script this block lives in its own panel, opened from inside
   Layanan 04 (js/pop.js, sunariePop.sub); without it, it stays here on the page.
   The close button only has a job inside the panel. */
/* Tiga infografik klien. Terlalu padat untuk dibaca di grid, jadi tiap
   gambar adalah tautan ke versi penuhnya di tab baru. */
.pca-ex{ margin-top:clamp(28px,3.4vw,44px); border:1px solid var(--line); background:var(--surface); }
.pca-ex-head{ padding:clamp(20px,2.4vw,30px); border-bottom:1px solid var(--line); display:grid; gap:8px; }
.pca-ex-head h3{ font-size:clamp(18px,1.7vw,22px); font-variation-settings:"wdth" 108,"wght" 700; }
.pca-ex-head h3 em{ font-style:normal; color:var(--orange-br); }
.pca-ex-head p{ font-size:14px; color:var(--txt-2); max-width:72ch; line-height:1.6; }
.pca-ex-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); }
@media (max-width:900px){ .pca-ex-grid{ grid-template-columns:minmax(0,1fr); } }
.pca-ex-grid li{ background:var(--surface); }
.pca-ex-grid a{ display:flex; flex-direction:column; gap:12px; padding:clamp(14px,1.6vw,20px); height:100%; transition:background-color .15s; }
.pca-ex-grid a:hover{ background:var(--surface-2); }
.pca-ex-grid a:focus-visible{ outline:2px solid var(--orange-br); outline-offset:-3px; }
.pca-ex-grid img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; display:block; border:1px solid var(--line); background:#0F1418; }
.pca-cap{ font-size:13.5px; color:var(--txt-2); line-height:1.5; }
.pca-cap::after{ content:" \2197"; color:var(--orange-br); }
.pca-ex-head{ position:relative; }
.pca-ex-close{ display:none; }
.pop-sub{ width:min(1180px, calc(100vw - 2 * var(--shell))); }
.pop-sub .pca-ex{ margin:0; border:0; background:none; }
.pop-sub .pca-ex::before,.pop-sub .pca-ex::after{ display:none; }   /* the panel draws its own brackets */
.pop-sub .pca-ex-head{ padding-right:calc(40px + 2 * clamp(16px,2.2vw,30px)); }
.pop-sub .pca-ex-close{ display:grid; position:absolute; top:clamp(16px,2.2vw,30px); right:clamp(16px,2.2vw,30px); }

/* Uraian lengkap Layanan 05: dua bagian teks klien (A petrografi, B mineragrafi)
   yang diringkas di kartu, dibuka lewat panel yang sama dengan contoh hasil PCA. */
.svc-full-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
@media (max-width:900px){ .svc-full-grid{ grid-template-columns:minmax(0,1fr); } }
.svc-full-grid section{ background:var(--surface); padding:clamp(20px,2.4vw,30px); display:grid; gap:10px; align-content:start; }
.svc-full-grid h4{ font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-br); font-weight:500; }
.svc-full-grid p{ font-size:15px; color:var(--txt-2); line-height:1.7; max-width:62ch; }

/* ── one sample image, full size ─────────────────────────────
   The third panel (js/layanan.js): a control bar like the profiles', the image
   fitted to the panel, and its caption underneath. Clicking the image swaps to
   full resolution inside its own scroller, which is what the small print on
   these boards needs — on a phone most of all. */
.pca-view-ctl{ display:none; }
.pop-view{ width:min(1440px, calc(100vw - 2 * var(--shell))); height:calc(100dvh - 48px); background:var(--surface-2); }
.pop-view .pca-view-ctl{
  display:flex; align-items:center; gap:14px 18px; position:relative; z-index:5; flex:none;
  background:var(--surface-2); border-bottom:1px solid var(--line); padding:12px clamp(16px,2.2vw,28px);
}
.pop-view .svc-count{ text-align:left; }
.pca-view-hint{
  margin-right:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.pop-view.is-zoomed .pca-view-hint{ visibility:hidden; }
/* phones: the hint drops to its own line under the controls instead of being cut */
@media (max-width:520px){
  .pop-view .pca-view-ctl{ flex-wrap:wrap; }
  .pop-view .svc-nav{ margin-left:auto; }
  .pca-view-hint{ order:3; flex-basis:100%; margin-right:0; }
}

/* the image area takes whatever the bar and caption leave, so the board is
   always as large as the screen allows */
.pop-view .pop-body{ flex:1 1 0; min-height:0; }
.pop-view .pop-body > *{ flex:1 1 0; min-height:0; }
.pca-view{ display:flex; flex-direction:column; margin:0; }
.pca-view-img{ position:relative; flex:1 1 0; min-height:0; margin:clamp(12px,1.6vw,24px); }
.pca-view-img img{
  position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; width:auto; height:auto;
  display:block; border:1px solid var(--line); background:#0F1418; cursor:zoom-in;
}
.pca-view-img.is-zoomed{ overflow:auto; overscroll-behavior:contain; cursor:grab; margin-bottom:0; }
.pca-view-img.is-zoomed img{ position:static; max-width:none; max-height:none; margin:0; cursor:zoom-out; }
.pca-view-img.is-dragging,.pca-view-img.is-dragging img{ cursor:grabbing; }
.pca-view figcaption{ flex:none; padding:0 clamp(16px,2.2vw,28px) clamp(16px,2vw,24px); }
.pca-view h3{ font-size:clamp(15px,1.3vw,18px); font-variation-settings:"wdth" 106,"wght" 700; color:var(--txt); }
.pca-view-img.is-zoomed + figcaption{ padding-top:clamp(12px,1.6vw,20px); }
@media (max-width:720px){ .pop-view{ height:100dvh; } }