:root {
  --tsc-cream: var(--cream, #f5f1e8);
  --tsc-sand: var(--sand, #e3d5c2);
  --tsc-brown: var(--brown, #4e443f);
  --tsc-chocolate: var(--chocolate, #2d1b19);
  --tsc-gold: var(--gold, #caa681);
  --tsc-white: var(--white, #fffaf2);
}

html {
  scroll-behavior: smooth;
}

body.tsc-polished {
  text-rendering: geometricPrecision;
}

body.tsc-polished::selection {
  background: rgba(202, 166, 129, .34);
  color: var(--tsc-chocolate);
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

html::before {
  z-index: -20;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 250, 242, .72), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(202, 166, 129, .16), transparent 30%),
    radial-gradient(circle at 58% 82%, rgba(45, 27, 25, .055), transparent 38%);
}

html::after {
  z-index: 9998;
  opacity: .105;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(78, 68, 63, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 68, 63, .055) 1px, transparent 1px);
  background-size: 74px 74px;
}

body.tsc-polished a,
body.tsc-polished button,
body.tsc-polished input,
body.tsc-polished textarea,
body.tsc-polished select {
  transition-duration: .55s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}

body.tsc-polished header {
  box-shadow: 0 18px 70px rgba(45, 27, 25, .045);
}

body.tsc-polished header nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 3vw, 38px);
}

body.tsc-polished header a:not(.logo) {
  position: relative;
}

body.tsc-polished header a:not(.logo)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.45em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  opacity: .48;
  transition: transform .65s cubic-bezier(.19, 1, .22, 1), opacity .55s ease;
}

body.tsc-polished header a:not(.logo):hover::after {
  transform: scaleX(1);
  opacity: .76;
}

body.tsc-polished .logo {
  will-change: transform, filter;
}

body.tsc-polished .logo:hover {
  filter: drop-shadow(0 14px 28px rgba(45, 27, 25, .18)) drop-shadow(0 0 18px rgba(202, 166, 129, .18));
}

body.tsc-polished :is(.button, .send-button, .contact-link, .work-link, .archive-toggle):hover {
  box-shadow: 0 18px 48px rgba(45, 27, 25, .1), 0 0 28px rgba(202, 166, 129, .1);
}

body.tsc-polished img {
  backface-visibility: hidden;
}

body.tsc-polished :is(figure, .project, .archive-photo, .detail-piece, .world-item, .instagram-card, .inspiration-card, .about-photo) {
  transition:
    transform .85s cubic-bezier(.19, 1, .22, 1),
    filter .85s ease,
    box-shadow .85s ease,
    opacity .85s ease;
}

body.tsc-polished :is(figure, .project, .archive-photo, .detail-piece, .world-item, .instagram-card, .inspiration-card, .about-photo):hover {
  filter: saturate(1.025) brightness(1.018);
}

body.tsc-polished :is(.lightbox-trigger, .tsc-lightbox-ready) {
  cursor: zoom-in;
}

.tsc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.19, 1, .22, 1);
}

.tsc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tsc-float-soft {
  animation: tscFloatSoft 10s ease-in-out infinite;
}

.tsc-float-soft:nth-of-type(2n) {
  animation-duration: 12s;
  animation-delay: -2.4s;
}

.tsc-float-soft:nth-of-type(3n) {
  animation-duration: 14s;
  animation-delay: -4.5s;
}

.tsc-parallax-soft {
  will-change: transform;
}

.tsc-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  border: 1px solid rgba(78, 68, 63, .3);
  background: radial-gradient(circle, rgba(202, 166, 129, .28), rgba(255, 250, 242, .05));
  box-shadow: 0 0 28px rgba(202, 166, 129, .2);
  transition: opacity .35s ease, width .35s ease, height .35s ease, transform .08s linear, border-color .35s ease;
}

.tsc-cursor.is-visible {
  opacity: 1;
}

.tsc-cursor.is-active {
  width: 34px;
  height: 34px;
  border-color: rgba(45, 27, 25, .42);
}

.tsc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  background:
    radial-gradient(circle at 22% 18%, rgba(202, 166, 129, .13), transparent 30%),
    rgba(45, 27, 25, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}

.tsc-lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.tsc-lightbox img {
  max-width: min(92vw, 1180px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: clamp(16px, 2vw, 32px);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .34);
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .7s cubic-bezier(.19, 1, .22, 1), opacity .65s ease;
}

.tsc-lightbox.is-visible img {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.tsc-lightbox button {
  position: absolute;
  top: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 36px);
  border: 1px solid rgba(255, 250, 242, .26);
  border-radius: 999px;
  background: rgba(255, 250, 242, .08);
  color: var(--tsc-white);
  padding: 12px 18px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  cursor: pointer;
}

.tsc-lightbox button:hover {
  background: rgba(255, 250, 242, .16);
}

@keyframes tscFloatSoft {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 760px) {
  html::after {
    opacity: .075;
    background-size: 58px 58px;
  }

  body.tsc-polished header {
    align-items: flex-start;
    gap: 18px;
  }

  body.tsc-polished header nav {
    max-width: min(62vw, 340px);
    overflow-x: auto;
    justify-content: flex-start;
    gap: 18px;
    padding: 6px 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.tsc-polished header nav::-webkit-scrollbar {
    display: none;
  }

  body.tsc-polished header nav a {
    flex: 0 0 auto;
    font-size: 11px;
    letter-spacing: .13em;
    white-space: nowrap;
  }

  .tsc-cursor {
    display: none;
  }

  .tsc-float-soft {
    animation-duration: 14s;
  }
}