/* ==========================================================================
   Fonts — monospace, in the spirit of Monument Grotesk Mono. That exact
   face is a paid font, so this stack leans on the closest free grotesque
   monospace fonts available system-wide / via Google Fonts.
   ========================================================================== */

:root {
  --font-main: 'JetBrains Mono', 'IBM Plex Mono', 'Space Mono', ui-monospace,
    'SF Mono', 'Menlo', 'Consolas', monospace;

  --bg: #faf8f2;
  --fg: #000000;
  --muted: #6b6b63;
  --line: rgba(0, 0, 0, 0.15);
  --ph-bg: #ececE4;
  --ph-border: rgba(0, 0, 0, 0.25);
  /* A single sparing pop of color — a small nod to rotborough.com's red
     accent against its otherwise black-and-white type. Used only on hover
     states, never as a resting color, so it stays a small jolt rather
     than a theme change. */
  --accent: #c33a2e;

  --col-left-width: 270px;
  --col-right-width: 320px;

  --base-size: 12px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg);
  /* Warm, fibrous paper texture baked into the page background itself
     (not the fixed grain overlay above, which sits over the photos) —
     ties the whitespace and columns together with a tactile, printed
     feel rather than a flat digital white. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.32 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--fg);
  font-family: var(--font-main);
  font-weight: 400;
  font-size: var(--base-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* A very faint vignette + scanned-paper grain over the whole viewport —
   a quiet nod to rotborough.com's soft-colored page frame and the visible
   noise baked into its title graphic. Combined into one fixed layer
   (rather than two) and forced onto its own GPU compositor layer via
   translateZ, so this static overlay is composited once and never
   repainted alongside the continuously-animating carousel underneath —
   two separate full-viewport overlay layers were adding avoidable
   per-frame compositing cost while the carousel drifts. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
  opacity: 0.5;
  box-shadow: inset 0 0 60px 8px rgba(195, 58, 46, 0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Underline reveals in on hover (grows left-to-right) instead of
   appearing instantly — a small nod to how the active nav underline
   animates in on rotborough.com. Uses a background line instead of
   text-decoration so it can be animated via background-size. */
a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size 0.25s ease, color 0.15s ease;
  padding-bottom: 1px;
}

a:hover {
  background-size: 100% 1px;
  color: var(--accent);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0;
}

em {
  font-style: italic;
}

/* ==========================================================================
   Layout — three columns, left/right fixed, center scrolls independently
   ========================================================================== */

.layout {
  display: flex;
  height: 100vh;
  width: 100%;
}

.col {
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.col::-webkit-scrollbar {
  width: 6px;
}

.col::-webkit-scrollbar-thumb {
  background: var(--line);
}

.col-inner {
  padding: 24px 28px 60px;
}

.col-left {
  width: var(--col-left-width);
  flex: 0 0 var(--col-left-width);
  border-right: 1px solid var(--line);
}

.col-right {
  width: var(--col-right-width);
  flex: 0 0 var(--col-right-width);
  border-left: 1px solid var(--line);
}

.col-center {
  flex: 1 1 auto;
  min-width: 0;
}

/* Section headings as small rotated "tags" — a nod to rotborough.com's
   ear-tag labels, reworked as a sticker-like badge instead of a literal
   copy. Inline-flex keeps it sized to its own text (a tag, not a banner). */
.col-heading {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 24px;
  padding: 4px 12px 4px 20px;
  background: #f6d94a;
  border: 1px solid var(--fg);
  border-radius: 3px;
  transform: rotate(-2deg);
  position: relative;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.14);
}

.col-heading::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--fg);
}

/* ==========================================================================
   Left column
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-mark {
  display: block;
  width: 100%;
  max-width: 190px;
  margin: 0 auto 16px;
}

.brand-gif {
  display: block;
  width: 100%;
  height: auto;
}

.credit-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* A couple of oversized letters for a handmade wobble — a restrained nod
   to rotborough.com's mixed-size product titles, applied to just two
   letters rather than the whole name. */
.lt-big {
  display: inline-block;
  font-size: 1.35em;
  line-height: 1;
  vertical-align: -0.06em;
}

/* Invisible marker+colon matching the contact rows below, so "Martin
   Kotkov" lines up with the handle/email text, not the icon. */
.credit-name-spacer {
  display: flex;
  align-items: center;
  gap: 6px;
  visibility: hidden;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 4px;
}

.contact-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

.contact-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fixed-width slot so the Instagram icon and the "e" label line up on
   the same left edge/center regardless of font vs. SVG metrics. */
.contact-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex: 0 0 14px;
}

.contact-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Work images — the vertical list (.ph-box) keeps full, uncropped photos at
   their natural aspect ratio. The carousel (.arc-item) is back to square
   crop (object-fit: cover) — that read better than natural aspect there.
   ========================================================================== */

.ph-box,
.arc-item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--muted);
}

.ph-box:empty,
.arc-item:empty {
  background: var(--ph-bg);
  border: 1px dashed var(--ph-border);
}

.ph-box img,
.ph-box video {
  width: 100%;
  height: auto;
  display: block;
}

.arc-item {
  overflow: hidden;
}

.arc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-box {
  width: 93.71%;
  margin: 0 auto 10px;
  border: 1px solid var(--fg);
}

/* A gentle tilt on hover — loose prints being picked up rather than a
   rigid grid. Carousel items are excluded: their transform is driven every
   frame by script.js, so a CSS hover transform there would just be
   overwritten and never actually show. */
.work-entry .ph-box {
  transition: transform 0.15s ease;
}

.work-entry:hover .ph-box {
  transform: rotate(-1deg);
}

/* A small "NEW" sticker on the most recently added piece — a nod to the
   ribbon badges rotborough.com tags freshly recovered archives with. */
.new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 2px;
  transform: rotate(4deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ==========================================================================
   Arc carousel — infinite auto-loop, items curve in 3D
   (rotateY + translateZ + scale) as they near the middle, receding like
   they're wrapping around a cylinder rather than just tilting in place.
   Items are positioned in JS (script.js), not via flex gap, so the
   visible gap stays equal even as scale/rotation change how wide a photo
   looks.
   ========================================================================== */

.arc-carousel {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 55px 0 20px;
}

.arc-track {
  position: relative;
  height: 175px;
  will-change: transform;
  /* One shared vanishing point for every item (instead of each photo
     carrying its own perspective() in its transform) — this is what
     makes the row read as a single curved surface rather than a set of
     independently-tilted flat cards. */
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.arc-item {
  position: absolute;
  left: 0;
  top: 50%;
  width: 175px;
  height: 175px;
  background: none;
  border: none;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
}

.arc-caption {
  margin: 16px 0 0;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
  font-size: 0.92em;
}

.section-divider {
  margin: 32px 0;
}

/* Slightly less space below the carousel caption than above it, since
   we just nudged the caption itself down to sit more centered between
   the photos and this divider. */
#arc-caption + .section-divider {
  margin-top: 24px;
}

/* ==========================================================================
   Vertical work list
   ========================================================================== */

.work-list {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.work-entry {
  position: relative;
}

.work-caption {
  width: 93.71%;
  margin: 0 auto;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-size: 0.97em;
  text-align: left;
}

.copyright-mobile {
  display: none;
}

/* ==========================================================================
   Right column
   ========================================================================== */

/* A dashed frame around the bio — echoes the dashed container around
   rotborough.com's blog posts, reading like a pinned note rather than
   plain running paragraphs. */
.bio-box {
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

.bio {
  margin: 0 0 16px;
  font-size: 0.9em;
}

.bio:last-child {
  margin-bottom: 0;
}

.info-block {
  display: flex;
  gap: 18px;
  margin-bottom: 26px;
  align-items: baseline;
  font-size: 0.9em;
}

.info-label {
  flex: 0 0 90px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Dated log-line entries — a small nod to how rotborough.com's blog stamps
   a date above each post title, rather than folding the year into the
   sentence. */
.exhibition-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exhibition-date {
  color: var(--muted);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

.exhibition-name {
  color: var(--fg);
}

/* Pinned to the bottom of the viewport, mirroring the clock on the
   opposite corner — stays put at the same level as the clock even as
   the right column's own content scrolls underneath it. */
.copyright {
  position: fixed;
  right: 28px;
  bottom: 16px;
  margin: 0;
  color: var(--muted);
  font-size: 0.85em;
  z-index: 10;
  pointer-events: none;
}

/* Hidden on desktop — this is the mobile-only duplicate living in the
   WORK column, shown instead of the original on small screens. */
.info-block-mobile {
  display: none;
}

/* ==========================================================================
   Live clock — fixed bottom-left
   ========================================================================== */

.clock {
  position: fixed;
  left: 28px;
  bottom: 16px;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--muted);
  z-index: 10;
  pointer-events: none;
}

/* ==========================================================================
   Responsive — stack columns on small screens
   ========================================================================== */

@media (max-width: 900px) {
  html, body {
    overflow: auto;
    height: auto;
  }

  .layout {
    flex-direction: column;
    height: auto;
  }

  .col {
    height: auto;
    overflow: visible;
    width: 100% !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line);
  }

  /* Stack ABOUT ME above WORK on mobile — flex order only, DOM/desktop
     layout (left / center / right) is untouched. */
  .col-left { order: 1; }
  .col-right { order: 2; }
  .col-center { order: 3; }

  /* Exhibitions moves below the last work photo on mobile — hide the
     original (still inside ABOUT ME) and show the duplicate that lives
     at the bottom of the WORK column instead. */
  .col-right .info-block {
    display: none;
  }

  .info-block-mobile {
    display: flex;
    margin-top: 30px;
  }

  /* Tighter gap between the divider under the contact info and the
     ABOUT ME heading that follows it once the columns are stacked. */
  .col-left .col-inner {
    padding-bottom: 8px;
  }

  .col-left hr {
    margin-bottom: 0;
  }

  .col-right .col-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Tighter gap between the divider under ABOUT ME and the WORK heading
     that follows it once the columns are stacked. */
  .col-right .section-divider {
    margin-bottom: 0;
  }

  .col-center .col-inner {
    padding-top: 8px;
  }

  .arc-item {
    width: 122px;
    height: 122px;
  }

  .ph-box {
    width: 100%;
  }

  .copyright-mobile {
    display: block;
    margin-top: 30px;
    color: var(--muted);
    font-size: 0.85em;
  }

  .col-right .copyright {
    display: none;
  }

  .clock {
    position: static;
    padding: 16px 28px;
  }
}