/* Compliance terms: IntersectionObserver with `threshold: 0.15` and `rootMargin: '0px 0px -60px 0px'`. Source Serif 4" (Google Fonts */
/* -60px */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --aged-parchment: #f0e6d3;
  --toasted-linen: #e8dbc4;
  --kiln-shadow: #d4c4aa;
  --dark-umber: #4a3728;
  --warm-brown: #5e4d3b;
  --clay-dust: #9a8672;
  --kintsugi-gold: #c4a265;
  --fired-earth: #7a5c3a;
  --scroll-y: 0px;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--toasted-linen);
  color: var(--warm-brown);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 350;
  letter-spacing: 0.005em;
  line-height: 1.75;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: 0.58;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='9'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.04' fill='%234a3728'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.svg-defs { position: absolute; }

.page-container {
  position: relative;
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 100vh;
  background: linear-gradient(90deg, var(--aged-parchment) 0 38%, var(--toasted-linen) 38% 100%);
}

.left-panel {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow: clip;
  background:
    radial-gradient(circle at 22% 14%, rgba(196, 162, 101, 0.14), transparent 22rem),
    linear-gradient(180deg, var(--aged-parchment), #e8dbc4 130%);
}

.left-content {
  min-height: 170vh;
  padding: clamp(5.8rem, 8vw, 8rem) clamp(1.5rem, 4vw, 4rem) 18vh;
  transform: translateY(calc(var(--scroll-y) * -0.4));
  will-change: transform;
}

.anchor-section {
  position: relative;
  margin-bottom: 25vh;
}

.anchor-section:nth-child(2n) { margin-left: 12%; }
.anchor-section:nth-child(3n) { transform: rotate(0.55deg); }
.anchor-section:last-child { margin-bottom: 6vh; }

h1, h2, h3, .headline, .anchor-text {
  color: var(--dark-umber);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.headline {
  max-width: 11ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  transform: rotate(-0.5deg);
}

.anchor-text {
  max-width: 8ch;
  font-size: clamp(2.2rem, 5.1vw, 4.4rem);
  transform: rotate(-0.65deg);
}

.anchor-text.smaller { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }

p { max-width: 38ch; }

em, strong {
  color: var(--dark-umber);
  font-style: normal;
  font-weight: 400;
}

.mono-label, .anchor-caption, .anchor-note {
  color: var(--clay-dust);
  font-family: "DM Mono", "SFMono-Regular", monospace;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.mono-label { margin-bottom: 1.25rem; }
.anchor-note { max-width: 22ch; margin-top: 1.2rem; }
.anchor-caption { margin-top: 1rem; }

.gold-pin {
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 2rem;
  border-radius: 50%;
  background: var(--kintsugi-gold);
  opacity: 0.34;
  box-shadow: 0 0 18px rgba(196, 162, 101, 0.38);
}

.floating-thumbnail, .collage-panel {
  position: relative;
  isolation: isolate;
  filter: sepia(0.3) saturate(0.7) contrast(0.9);
}

.floating-thumbnail {
  width: min(46%, 180px);
  min-width: 122px;
  aspect-ratio: 0.76;
  transform: rotate(-2.2deg);
}

.floating-thumbnail.second { transform: rotate(2.1deg); }

.torn-card::before,
.torn-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kintsugi-gold);
  clip-path: polygon(5% 4%, 94% 0, 98% 18%, 93% 43%, 99% 76%, 88% 97%, 48% 92%, 12% 100%, 0 74%, 4% 35%);
}

.torn-card::after {
  inset: 3px -2px -3px 2px;
  z-index: 0;
  background: var(--kiln-shadow);
  clip-path: polygon(8% 0, 90% 5%, 96% 21%, 91% 52%, 97% 83%, 83% 94%, 54% 100%, 15% 94%, 3% 82%, 6% 39%, 1% 10%);
}

.generated-image {
  position: absolute;
  inset: 8px;
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(9% 3%, 91% 8%, 96% 25%, 89% 50%, 94% 82%, 80% 95%, 51% 90%, 17% 98%, 5% 78%, 8% 38%, 3% 12%);
  background-color: var(--kiln-shadow);
}

.generated-image::before {
  content: "";
  position: absolute;
  inset: -20%;
  filter: url(#paper-grain);
  opacity: 0.95;
}

.image-bowl::before {
  background:
    radial-gradient(ellipse at 52% 58%, transparent 0 18%, var(--dark-umber) 19% 20%, transparent 21%),
    radial-gradient(ellipse at 52% 62%, rgba(122, 92, 58, 0.42) 0 30%, transparent 31%),
    linear-gradient(125deg, var(--aged-parchment), var(--kiln-shadow));
}

.image-paper::before {
  background:
    linear-gradient(78deg, transparent 47%, rgba(196, 162, 101, 0.62) 48% 50%, transparent 51%),
    repeating-linear-gradient(96deg, rgba(74, 55, 40, 0.1) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, var(--toasted-linen), var(--kiln-shadow));
}

.image-concrete::before {
  background:
    radial-gradient(circle at 20% 28%, rgba(196, 162, 101, 0.35) 0 9%, transparent 10%),
    linear-gradient(104deg, transparent 0 42%, rgba(196, 162, 101, 0.74) 43% 44%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(74, 55, 40, 0.08) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, var(--kiln-shadow), var(--aged-parchment));
}

.image-film::before {
  background:
    radial-gradient(ellipse at 46% 44%, rgba(74, 55, 40, 0.32) 0 23%, transparent 24%),
    linear-gradient(160deg, rgba(196, 162, 101, 0.42), transparent 42%),
    repeating-linear-gradient(90deg, rgba(74, 55, 40, 0.12) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--aged-parchment), var(--kiln-shadow));
}

.brush-mark {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.brush-mark path {
  fill: none;
  stroke: var(--kintsugi-gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
  opacity: 0.42;
}

.brush-mark.large path { stroke-width: 7; }

.kintsugi-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38%;
  z-index: 10;
  width: 64px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateX(calc(-32px + var(--seam-shift, 0px)));
  will-change: transform;
}

.kintsugi-seam path {
  fill: none;
  stroke: var(--kintsugi-gold);
  stroke-linecap: round;
  stroke-width: 4;
  filter: url(#seam-glow);
}

.kintsugi-seam .seam-branch { stroke-width: 2.25; opacity: 0.78; }

.right-panel {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 74% 8%, rgba(196, 162, 101, 0.11), transparent 24rem),
    var(--toasted-linen);
}

.right-content {
  position: relative;
  padding: clamp(5.6rem, 8vw, 8.5rem) 3vw 10vh;
}

.content-block {
  position: relative;
  max-width: min(760px, 88%);
  margin-bottom: 4rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  opacity: 0;
  background: rgba(212, 196, 170, 0.36);
  border-left: 3px solid var(--kintsugi-gold);
  box-shadow: 4px 6px 20px rgba(139, 115, 78, 0.15);
  transform: translateY(20px) rotate(0deg);
  transform-origin: 45% 50%;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-block::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(122, 92, 58, 0.12);
  clip-path: polygon(0 2%, 99% 0, 100% 96%, 2% 100%);
}

.content-block.visible { opacity: 1; transform: translateY(0) rotate(-0.7deg); }
.content-block:nth-of-type(4n + 1) { margin-left: 3vw; }
.content-block:nth-of-type(4n + 3) { margin-left: 7vw; transform-origin: 55% 50%; }
.content-block:nth-of-type(4n + 3).visible { transform: translateY(0) rotate(0.85deg); }

.block-hero { margin-left: 4vw; padding-top: clamp(2rem, 4vw, 4rem); }
.quote-block { background: rgba(240, 230, 211, 0.5); }
.final-block { margin-bottom: 10vh; border-color: var(--fired-earth); }

.collage-block {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) 1fr;
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  max-width: min(920px, 92%);
}

.collage-block.reversed { grid-template-columns: 1fr minmax(160px, 0.55fr); }

.collage-panel {
  min-height: 210px;
  transform: rotate(1.2deg);
}

.collage-panel.tall { min-height: 330px; transform: rotate(-1.3deg); }

.collage-panel .generated-image { inset: 9px; }

.breath-space {
  position: relative;
  height: 20vh;
  margin: 5vh 0;
  overflow: visible;
}

.floating-element, .ink-cluster, .paper-fragment {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.float-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kintsugi-gold);
  opacity: 0.3;
  box-shadow: 0 0 20px rgba(196, 162, 101, 0.28);
}

.float-circle.one { top: 18%; left: 17%; width: 24px; height: 24px; animation: drift-one 76s ease-in-out infinite; }
.float-circle.two { right: 19%; bottom: 18%; width: 16px; height: 16px; animation: drift-two 84s ease-in-out infinite; }
.float-circle.three { left: 7%; bottom: 5%; width: 22px; height: 22px; animation: drift-three 68s ease-in-out infinite; }
.float-circle.four { right: 12%; top: 20%; width: 20px; height: 20px; animation: drift-four 90s ease-in-out infinite; }
.float-circle.five { left: 50%; top: 30%; animation: drift-five 72s ease-in-out infinite; }

.float-stroke {
  width: 78px;
  height: 9px;
  opacity: 0.38;
  background: var(--kintsugi-gold);
  clip-path: polygon(0 45%, 13% 15%, 38% 37%, 68% 0, 100% 48%, 76% 75%, 42% 65%, 12% 100%);
}

.float-stroke.one { top: 28%; right: 16%; animation: rotate-one 64s linear infinite; }
.float-stroke.two { bottom: 22%; left: 10%; width: 64px; animation: rotate-two 73s linear infinite; }
.float-stroke.three { top: 16%; right: 8%; width: 84px; animation: rotate-three 61s linear infinite; }

.ink-cluster {
  width: 80px;
  height: 50px;
  right: 22%;
  top: 18%;
  opacity: 0.3;
  background: radial-gradient(circle at 10% 45%, var(--fired-earth) 0 2px, transparent 3px), radial-gradient(circle at 38% 18%, var(--dark-umber) 0 1px, transparent 2px), radial-gradient(circle at 64% 68%, var(--fired-earth) 0 2px, transparent 3px), radial-gradient(circle at 82% 34%, var(--dark-umber) 0 1px, transparent 2px);
  animation: drift-two 88s ease-in-out infinite;
}

.ink-cluster.second { left: 18%; right: auto; top: 42%; }

.paper-fragment {
  width: 54px;
  height: 38px;
  left: 28%;
  top: 36%;
  opacity: 0.42;
  background: var(--aged-parchment);
  border-bottom: 2px solid var(--kintsugi-gold);
  clip-path: polygon(4% 12%, 86% 0, 100% 68%, 58% 100%, 0 82%);
  animation: drift-three 86s ease-in-out infinite;
}

.paper-fragment.second { left: auto; right: 24%; transform: rotate(16deg); }

.progress-arc {
  position: fixed;
  top: 1.7rem;
  left: 1.35rem;
  z-index: 80;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 6px rgba(196, 162, 101, 0.4));
  transform-origin: center;
}

.progress-arc.complete { animation: pulse-arc 400ms ease; }

@keyframes drift-one { 0%,100%{ transform: translate3d(0,0,0); } 35%{ transform: translate3d(24px,-48px,0); } 70%{ transform: translate3d(-12px,-82px,0); } }
@keyframes drift-two { 0%,100%{ transform: translate3d(0,0,0); } 42%{ transform: translate3d(-28px,-62px,0); } 76%{ transform: translate3d(18px,-96px,0); } }
@keyframes drift-three { 0%,100%{ transform: translate3d(0,0,0) rotate(-8deg); } 50%{ transform: translate3d(35px,-88px,0) rotate(13deg); } }
@keyframes drift-four { 0%,100%{ transform: translate3d(0,0,0); } 30%{ transform: translate3d(-24px,-42px,0); } 66%{ transform: translate3d(26px,-86px,0); } }
@keyframes drift-five { 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(16px,-76px,0); } }
@keyframes rotate-one { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes rotate-two { from{ transform: rotate(42deg); } to{ transform: rotate(402deg); } }
@keyframes rotate-three { from{ transform: rotate(-36deg); } to{ transform: rotate(324deg); } }
@keyframes pulse-arc { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.15); } }

@media (max-width: 768px) {
  .page-container { display: block; background: var(--toasted-linen); }
  .left-panel { min-height: auto; overflow: visible; }
  .left-content { min-height: auto; padding: 6rem 1.6rem 2rem; transform: none !important; }
  .anchor-section { margin-bottom: 3.5rem; }
  .anchor-section:nth-child(2n) { margin-left: 0; }
  .anchor-text { max-width: 11ch; }
  .kintsugi-seam {
    position: relative;
    left: auto;
    display: block;
    width: 100%;
    height: 58px;
    transform: rotate(90deg) scaleY(0.14) translateX(0);
    transform-origin: 50% 50%;
    margin: -13px 0;
  }
  .right-content { padding: 3rem 1.5rem 6rem; }
  .content-block, .content-block:nth-of-type(4n + 1), .content-block:nth-of-type(4n + 3) { max-width: 100%; margin-left: 0; }
  .collage-block, .collage-block.reversed { grid-template-columns: 1fr; }
  .collage-panel { min-height: 230px; }
  .breath-space { height: 16vh; }
}

@media (hover: none) {
  .left-content { transform: none !important; }
  .kintsugi-seam { --seam-shift: 0px !important; }
}

@media (max-width: 480px) {
  .progress-arc { top: 1rem; left: 1rem; }
  .content-block { padding: 1.35rem; }
  .headline { font-size: clamp(2.25rem, 14vw, 3.35rem); }
}