/* Large country names sit beside a fitted monochrome relief on desktop Home. */
#country-list { touch-action:none; }
@media(min-width:761px) {
  body[data-stage="countries"] #country-list {
    width:max(62%,510px); overflow:hidden;
    /* The adjacent unselected name retains its existing 9px arc offset. */
    transform:translateX(calc(6vw - 25px));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 83%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 83%,transparent 100%);
  }
  body[data-stage="countries"] .country-name {
    left:34px; font-size:clamp(125.8px,min(12.58vw,21.25vh),190.4px);
    transition:transform .6s cubic-bezier(.22,.7,.2,1),opacity .5s,color .4s;
  }
  body[data-stage="countries"] .country-name.focused { font-size:clamp(144.5px,min(14.62vw,25.5vh),221px); }
  body[data-stage="countries"] #geography {
    inset:0; opacity:1; overflow:hidden;
    -webkit-mask-image:none;
    mask-image:none;
  }
  body[data-stage="countries"] #map {
    left:max(45%,510px); top:17%; right:auto; bottom:auto; width:calc(100% - max(45%,510px)); height:66%;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);
  }
  body[data-stage="countries"] .map-fade { display:none; }
  body[data-stage="countries"] .preview-label { display:none; }
  body[data-stage="countries"] #about-button { font:clamp(28px,2.5vw,40px)/1 Instrument,serif; letter-spacing:-.025em; }
  dialog#about { width:min(720px,calc(100vw - 80px)); max-width:720px; padding:32px 48px 42px; }
  #about h1 { font-size:clamp(60px,6vw,80px); }
  #about p { font-size:14px; max-width:560px; }
  #about .about-note { font-size:12px; }
  .about-credits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
  .about-credits>.small-label { grid-column:1/-1; }
  #about .about-credits p { font-size:11px; }
  .about-credits p span { font-size:10px; }
}
/* The finite archive is arranged on a wrapping plane, with one tile per image. */
#grid { padding:0; overflow:hidden; }
.grid-heading { position:absolute; top:90px; left:38px; right:38px; align-items:center; margin:0; z-index:2; }
#grid-overview { font-size:9px; }
#canvas-viewport { position:absolute; inset:142px 25px 85px; overflow:hidden; touch-action:none; cursor:grab; }
#canvas-viewport.is-dragging { cursor:grabbing; user-select:none; }
#photo-grid { position:absolute; inset:0; display:block; }
#photo-grid .canvas-photo { position:absolute; top:0; left:0; min-height:0; padding:0; gap:0; display:flex; flex-direction:column; justify-content:flex-start; will-change:transform; }
#photo-grid .canvas-photo img { width:100%; height:calc(100% - 25px); object-fit:contain; flex-shrink:0; display:block; }
#photo-grid .canvas-photo>span { display:block; height:25px; padding-top:10px; font-size:8px; color:var(--muted); }
#photo-grid .canvas-photo[aria-current="true"]>span:before { content:'•'; color:var(--petrol); margin-right:7px; }
.canvas-controls { position:absolute; right:36px; bottom:22px; display:flex; align-items:center; gap:22px; }
.canvas-controls button { width:44px; }
.canvas-controls>span { font-size:9px; color:var(--muted); min-width:48px; text-align:center; }
#enter-spatial { font-size:9px; color:var(--petrol); }
/* A real, opt-in sample capture replaces the rejected photographic plane. */
#scene { z-index:40; background:#10242a; color:var(--paper); }
#stage { position:absolute; inset:0; }
#stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.scene-toolbar { position:absolute; z-index:2; top:24px; left:35px; right:35px; display:flex; align-items:center; justify-content:space-between; gap:25px; pointer-events:none; }
.scene-toolbar button { pointer-events:auto; }
.scene-toolbar span { font-size:8px; letter-spacing:.07em; opacity:.7; text-align:center; }
.scene-caption { position:absolute; left:38px; bottom:38px; pointer-events:none; }
.scene-caption h1 { font:70px/.95 Instrument,serif; letter-spacing:-.03em; margin:0 0 16px; }
.scene-caption span { font-size:9px; opacity:.7; }
#scene-status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:460px; width:calc(100% - 60px); font-size:11px; line-height:1.8; text-align:center; }
#scene-status a { display:block; margin-top:18px; color:inherit; }
body[data-stage="scene"] .product-header { display:none; }
@media(max-width:760px) {
  .grid-heading { top:75px; left:23px; right:23px; font-size:8px; }
  #canvas-viewport { inset:132px 10px 95px; }
  .canvas-controls { left:17px; right:auto; bottom:19px; gap:2px; }
  .canvas-controls>span { min-width:44px; font-size:8px; }
  .scene-toolbar { top:14px; left:22px; right:22px; flex-wrap:wrap; gap:10px; }
  .scene-toolbar span { position:absolute; top:58px; left:0; text-align:left; font-size:7px; }
  .scene-caption { left:25px; bottom:30px; }
  .scene-caption h1 { font-size:52px; }
  .scene-caption span { font-size:8px; }
}