/* Designer revision, October 2026: monochrome palette on white paper, the project grid and the globe.
   Loaded after style.css and before motion.css. */
:root { --accent: #ffffff; --paper: #ffffff; }
/* Light surfaces use a near-black accent, so focus rings and highlights stay visible. */
.paper, .contact-section { --accent: #111111; }
::selection { background: #d9d9d9; color: #111111; }

/* Contact: white instead of copper, separated from the white section above by a hairline. */
.contact-section { background: #ffffff; color: #111111; border-top: 1px solid #e2e2e2; }
.contact-arrow:hover { background: #111111; color: #ffffff; }

/* Optical centring of arrows (measured): link arrows sat 0.06–0.125em below the middle of the
   capitals, the contact arrow 0.12em below the centre of its circle. */
:is(.nav-contact, .side-link, .text-link, .hero-bottom > a) > span[aria-hidden="true"]:last-child { translate: 0 -.1em; }
.nav-contact > span[aria-hidden="true"] { display: inline-block; } /* inline boxes ignore translate */
.contact-arrow > span { translate: 0 -.12em; }

/* Selected work, after the 247studio grid: large images in a staggered twelve-column rhythm. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 64px;
  align-items: start;
  margin-top: clamp(56px, 6vw, 96px);
}
.case-card { min-width: 0; }
.case-card:nth-child(7n+1) { grid-column: 1 / 7; margin-top: clamp(60px, 12.5vw, 180px); }
.case-card:nth-child(7n+2) { grid-column: 7 / 13; }
.case-card:nth-child(7n+3) { grid-column: 1 / 5; }
.case-card:nth-child(7n+4) { grid-column: 5 / 13; margin-top: clamp(24px, 5.6vw, 80px); }
.case-card:nth-child(7n+5) { grid-column: 1 / 7; }
.case-card:nth-child(7n+6) { grid-column: 7 / 13; margin-top: clamp(60px, 12.5vw, 180px); }
.case-card:nth-child(7n) { grid-column: 1 / 9; }
.case-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 25 / 18;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f1f1f1;
  cursor: pointer;
}
.case-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.case-card-media:hover img, .case-card-media:focus-visible img { transform: scale(1.03); }
.case-card-media:focus-visible { outline: 2px solid #111111; outline-offset: 4px; }
.case-card-open {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 9px 13px;
  background: #111111;
  color: #ffffff;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.case-card-open > span { font-size: 1rem; line-height: 1; }
.case-card-media:hover .case-card-open, .case-card-media:focus-visible .case-card-open { opacity: 1; transform: none; }
.case-card-caption { margin-top: 16px; font-size: .9375rem; line-height: 1.45; color: #6b6b6b; }
.case-card-caption h3, .case-card-caption p { display: inline; margin: 0; font: inherit; letter-spacing: 0; }
.case-card-caption h3 { color: #111111; }
.case-card-dash { color: #111111; }
.case-card-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: .625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7a7a7a;
  transition: opacity .35s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.case-card-scope li + li::before { content: '+'; margin: 0 10px; }
@media (hover: hover) and (pointer: fine) {
  .case-card-scope { opacity: 0; transform: translateY(-4px); }
  .case-card:hover .case-card-scope, .case-card:focus-within .case-card-scope { opacity: 1; transform: none; }
}

/* End of the grid: a wide bar instead of a "see all projects" link. */
.work-more {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: clamp(72px, 8vw, 120px);
  padding: 28px 0 32px;
  border-bottom: 1px solid #dcdcdc;
  color: #111111;
}
.work-more-plus { font-size: 2.5rem; font-weight: 300; line-height: 1; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.work-more-note { max-width: 420px; font-size: .875rem; line-height: 1.6; color: #6b6b6b; }
.work-more-title { font-size: clamp(28px, 3.1vw, 46px); letter-spacing: -.045em; line-height: 1.1; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.work-more:hover .work-more-plus, .work-more:focus-visible .work-more-plus { transform: rotate(90deg); }
.work-more:hover .work-more-title, .work-more:focus-visible .work-more-title { transform: translateX(-8px); }

@media (max-width: 1100px) {
  .case-grid { column-gap: 16px; row-gap: 52px; }
}
@media (max-width: 800px) {
  .case-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .case-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .case-card-open { opacity: 1; transform: none; right: 12px; bottom: 12px; }
  .work-more { grid-template-columns: auto minmax(0, 1fr); gap: 14px 20px; }
  .work-more-note { grid-column: 1 / -1; grid-row: 2; }
}

/* The rotating globe replaces the static orbit once it is drawn; the orbit stays as a fallback. */
.world-globe { display: none; }
.world-orbit.has-globe .world-globe { display: block; position: absolute; inset: -12%; width: 124%; height: 124%; }
.world-orbit.has-globe .orbit-disc { display: none; }