/* ==========================================================================
   LUCID SKETCHER — BOLD DIRECTION
   An art-directed layer on top of styles.css. Nothing here removes or hides
   content: it rescales, re-times and re-textures what is already there.
   All rules are additive/overriding — the base stylesheet still governs
   layout structure, forms, WhatsApp flow, book/viewer logic, etc.
   ========================================================================== */

:root {
  --annotation-red: #a5402e;
  --annotation-blue: #2f4d72;
  --annotation-font: "Caveat", "Segoe Script", cursive;
  --marker-font: "Permanent Marker", var(--annotation-font);
  --kinetic-ease: cubic-bezier(.16, 1, .2, 1);
  --grain-opacity: .05;
}

/* --------------------------------------------------------------------
   0. Paper grain — a constant tactile surface over the whole site
   -------------------------------------------------------------------- */
body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body.viewer-open::before { display: none; }

/* --------------------------------------------------------------------
   1. Custom ink cursor (desktop / fine pointer only)
   -------------------------------------------------------------------- */
.ink-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 400;
  pointer-events: none;
  will-change: transform;
}
.ink-cursor-blot {
  position: absolute;
  top: -14px; left: -14px;
  width: 28px; height: 28px;
  border-radius: 42% 58% 61% 39% / 47% 42% 58% 53%;
  background: var(--ink);
  opacity: .82;
  transform: scale(1);
  transition: transform 260ms var(--kinetic-ease), opacity 260ms ease, border-radius 600ms ease;
}
.ink-cursor-dot {
  position: absolute;
  top: -2px; left: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--paper);
}
.ink-cursor.is-hover .ink-cursor-blot { transform: scale(2.1); opacity: .14; }
.ink-cursor.is-view .ink-cursor-blot { transform: scale(1.5); opacity: .1; border-radius: 50%; }
.ink-cursor.is-down .ink-cursor-blot { transform: scale(.72); }
@media (hover: hover) and (pointer: fine) {
  html.has-ink-cursor, html.has-ink-cursor a, html.has-ink-cursor button { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
  .ink-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-cursor { display: none !important; }
  html.has-ink-cursor { cursor: auto; }
}

/* --------------------------------------------------------------------
   2. Kinetic type — split lines/words animate in on reveal
   -------------------------------------------------------------------- */
.kinetic-line {
  display: block;
  overflow: hidden;
}
.kinetic-word {
  display: inline-block;
  will-change: transform, filter;
  transform: translate3d(0, 108%, 0) rotate(4deg) skewY(6deg);
  filter: blur(6px);
  transition: transform 900ms var(--kinetic-ease), filter 700ms ease;
  transition-delay: calc(var(--i, 0) * 42ms);
}
.kinetic-ready .kinetic-word,
.is-visible .kinetic-word,
.kinetic-in .kinetic-word {
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .kinetic-word { transform: none !important; filter: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------
   3. Marker / handwritten annotation device
   -------------------------------------------------------------------- */
.annotation {
  position: relative;
  display: inline-block;
  font-family: var(--annotation-font);
  font-weight: 600;
  line-height: 1.1;
  color: var(--annotation-red);
  white-space: nowrap;
}
.annotation--blue { color: var(--annotation-blue); }
.annotation--floating {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.annotation-tag {
  font-size: clamp(1.05rem, 1.6vw, 1.55rem);
  transform: rotate(-4deg);
}
.annotation-arrow {
  display: inline-block;
  margin: 0 6px;
  transform: rotate(4deg) scaleX(-1);
}
.annotation-circle {
  position: relative;
  display: inline-block;
}
.annotation-circle::after {
  content: "";
  position: absolute;
  inset: -10% -14%;
  border: 2px solid var(--annotation-red);
  border-radius: 50% 48% 52% 46% / 55% 45% 58% 42%;
  opacity: .75;
  pointer-events: none;
}
.annotation-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M2 8 C 20 2, 40 12, 60 7 S 100 3, 118 9' fill='none' stroke='%23a5402e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom 2px;
  background-size: 90px 12px;
  padding-bottom: 8px;
}

/* --------------------------------------------------------------------
   4. Marquee — scrolling place names, real content, real links
   -------------------------------------------------------------------- */
.ink-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(18px, 2.6vw, 32px) 0;
  background: var(--paper);
}
.ink-marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(28px, 4vw, 64px);
  animation: ink-marquee-scroll 34s linear infinite;
}
.ink-marquee:hover .ink-marquee-track { animation-play-state: paused; }
.ink-marquee a {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 64px);
  font: 400 clamp(2.2rem, 5.2vw, 4.6rem)/1 var(--serif);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ink-marquee a span.marquee-sep {
  font-family: var(--annotation-font);
  font-size: .5em;
  color: var(--graphite);
  transform: rotate(-8deg);
  display: inline-block;
}
.ink-marquee a:hover { color: var(--annotation-red); }
@keyframes ink-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ink-marquee { overflow-x: auto; }
  .ink-marquee-track { animation: none; }
}

/* --------------------------------------------------------------------
   5. Ink/watercolor divider between sections (decorative, aria-hidden)
   -------------------------------------------------------------------- */
.ink-divider {
  position: relative;
  height: clamp(60px, 9vw, 140px);
  margin: 0 auto;
  max-width: var(--content-max);
}
.ink-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ink-divider path { fill: var(--paper-light); }
.shop + .ink-divider path,
.ink-divider--light path { fill: var(--paper); }

/* --------------------------------------------------------------------
   6. Homepage: oversized wordmark crashing behind the hero artwork
   -------------------------------------------------------------------- */
.hero { position: relative; }
.hero-giant {
  position: absolute;
  z-index: 0;
  top: clamp(-2vw, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: none;
  text-align: center;
  font: 800 clamp(4.5rem, 17vw, 15rem)/.78 var(--serif);
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(32,33,30,.16);
  text-stroke: 1px rgba(32,33,30,.16);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.hero-media { position: relative; z-index: 1; }
.hero-identity, .hero-copy, .scroll-cue { position: relative; z-index: 2; }
@media (max-width: 767px) {
  .hero-giant { font-size: clamp(3.4rem, 22vw, 6rem); top: -2vw; -webkit-text-stroke: .6px rgba(32,33,30,.18); }
}

/* Diagonal margin note pinned to the hero artwork, using its own real alt/caption text */
.hero-note {
  position: absolute;
  z-index: 3;
  bottom: clamp(14px, 2.4vw, 30px);
  left: clamp(12px, 2vw, 28px);
  transform: rotate(-3.5deg);
  font-family: var(--annotation-font);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--annotation-red);
  background: var(--paper);
  padding: 4px 12px 6px;
  line-height: 1.15;
  box-shadow: 2px 3px 0 rgba(32,33,30,.05);
}
.hero-note svg { display: inline-block; width: 22px; height: 14px; margin-right: 4px; vertical-align: -3px; }
@media (max-width: 767px) {
  .hero-note { left: 10px; bottom: 10px; font-size: .95rem; padding: 3px 9px 5px; }
}

/* --------------------------------------------------------------------
   7. Section headers — oversized structural numerals as design material
   -------------------------------------------------------------------- */
.movement { position: relative; }
.section-header { position: relative; }
.big-index {
  position: absolute;
  top: clamp(-30px, -4vw, -10px);
  right: 0;
  font: 400 clamp(4rem, 11vw, 11rem)/1 var(--serif);
  letter-spacing: -.04em;
  color: rgba(32,33,30,.055);
  pointer-events: none;
  z-index: -1;
}

/* Break the grid: "Selected Places" becomes an asymmetric, rotated composition */
.places .square-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 32px);
  align-items: start;
}
.places .square-grid figure:nth-child(1) { grid-column: 1 / 8; aspect-ratio: 4/3; transform: rotate(-.6deg); z-index: 2; }
.places .square-grid figure:nth-child(2) { grid-column: 8 / 13; aspect-ratio: 3/4; margin-top: clamp(50px, 7vw, 120px); transform: rotate(.9deg); }
.places .square-grid figure:nth-child(3) { grid-column: 2 / 6; aspect-ratio: 1/1; margin-top: clamp(-30px, -3vw, -10px); transform: rotate(.4deg); }
.places .square-grid .grid-cta { grid-column: 6 / 12; aspect-ratio: auto; min-height: clamp(220px, 22vw, 340px); margin-top: clamp(10px, 2vw, 30px); }
@media (max-width: 1023px) {
  .places .square-grid figure,
  .places .square-grid .grid-cta { grid-column: 1 / -1 !important; margin-top: 0 !important; transform: none !important; aspect-ratio: 4/3 !important; }
}

/* --------------------------------------------------------------------
   8. Sketcher / commission section headlines pushed to full kinetic scale
   -------------------------------------------------------------------- */
.sketcher-copy h2,
.commission-copy h2,
.closing h2,
.work-opening h1,
.prints-opening h1,
.tools-opening h1,
.about-main h1,
.commission-page > header h1 {
  overflow: visible;
}

.price-line { position: relative; }
.price-line::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background: var(--annotation-red);
  opacity: .55;
  border-radius: 2px;
}
@media (max-width: 640px) { .price-line::before { left: -12px; } }

/* Handwritten step numerals in the commission "how it works" list */
.commission-page ol {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
.commission-page ol li {
  position: relative;
  counter-increment: step;
  padding-left: 56px;
}
.commission-page ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -.1em;
  font: 600 1.05rem/1 var(--annotation-font);
  color: var(--annotation-blue);
  transform: rotate(-6deg);
}

/* --------------------------------------------------------------------
   9. Work page: marker index tags on sketchbook pages + horizontal
      scroll set-piece gallery
   -------------------------------------------------------------------- */
.sketch-page { position: relative; }
.sketch-beat .sketch-tag {
  position: absolute;
  top: clamp(-26px, -2.6vw, -14px);
  font-family: var(--annotation-font);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--annotation-blue);
  transform: rotate(-5deg);
  pointer-events: none;
  z-index: 4;
}
.sketch-page--left .sketch-tag { left: 6%; }
.sketch-page--right .sketch-tag { right: 6%; }

.h-gallery {
  margin: clamp(120px, 15vw, 240px) auto;
  max-width: var(--content-max);
}
.h-gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.h-gallery-head h2 { font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--serif); letter-spacing: -.02em; }
.h-gallery-hint { font-family: var(--annotation-font); font-weight: 600; font-size: 1.2rem; color: var(--annotation-red); transform: rotate(-3deg); white-space: nowrap; }
.h-gallery-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
  overflow-x: auto;
  padding: 10px var(--page-pad) 40px;
  margin: 0 calc(var(--page-pad) * -1);
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: thin;
}
.h-gallery-track:active { cursor: grabbing; }
.h-gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 30vw, 380px);
  scroll-snap-align: start;
  background: var(--paper-light);
  padding: clamp(10px, 1.2vw, 18px);
  transition: transform 400ms var(--ease);
}
.h-gallery-item:nth-child(even) { transform: translateY(clamp(14px, 2vw, 30px)); }
.h-gallery-item img { display: block; width: 100%; height: auto; }
.h-gallery-item .sketch-tag { position: static; display: block; margin-top: 10px; transform: rotate(-2deg); }
@media (max-width: 767px) {
  .h-gallery-item { width: 72vw; }
}

/* --------------------------------------------------------------------
   10. Prints: collection numerals + annotation accents on meta labels
   -------------------------------------------------------------------- */
.print-collection-header p {
  font: 400 clamp(2.4rem, 5vw, 4.2rem)/1 var(--serif) !important;
  color: rgba(32,33,30,.16) !important;
  letter-spacing: -.02em !important;
}
.meta-label + p {
  position: relative;
  padding-left: 14px;
}
.meta-label + p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 3px;
  border-radius: 2px;
  background: var(--annotation-blue);
  opacity: .5;
}
.print-collection:nth-child(odd) .print-work:nth-child(1) { transform: rotate(-.5deg); }
.print-collection:nth-child(even) .print-work:nth-child(2) { transform: rotate(.6deg); }

.collection-nav a {
  font: 400 clamp(1.4rem, 2.6vw, 2.1rem) / 1 var(--serif) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  position: relative;
}
.collection-nav a:nth-child(odd) { transform: rotate(-1.2deg); }
.collection-nav a:nth-child(even) { transform: rotate(1deg); }
.collection-nav a:hover { color: var(--annotation-red) !important; }

/* --------------------------------------------------------------------
   11. Tools: marker category tags
   -------------------------------------------------------------------- */
.tool-category {
  font-family: var(--annotation-font) !important;
  font-weight: 600 !important;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--annotation-blue) !important;
  transform: rotate(-3deg);
  display: inline-block;
}

/* --------------------------------------------------------------------
   12. Parallax utility (JS toggles transform via --py custom property)
   -------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------
   13. About page pull-quote annotation (wraps existing sentence only)
   -------------------------------------------------------------------- */
.about-main .pull-note,
.pull-note {
  display: block;
  margin: clamp(28px, 4vw, 46px) 0;
  font-family: var(--annotation-font);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  color: var(--annotation-red);
  transform: rotate(-1deg);
}