/* v1.24.0 - 2026-05-29 - Zulfa: cluster reduced to a single italic @wearezulfa link (X). Arrow + follow us removed. */

@property --sweep {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--zulfa-surface);
  color: var(--zulfa-ink);
  font-family: var(--zulfa-font-body);
  font-weight: var(--zulfa-weight-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}
a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 1px dotted var(--zulfa-ink);
  outline-offset: 4px;
}
em { font-style: italic; font-weight: inherit; }

/* ---------- Live brushstroke BG (perpetual subtle drift) ---------- */
.bg-brushes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.brush {
  position: absolute;
  width: 80vmin;
  aspect-ratio: 1 / 1;
  opacity: 0;
  will-change: transform, opacity;
}
.brush path { fill: var(--zulfa-ink); }

.brush--a {
  top: -22%;
  left: -18%;
  width: 80vmin;
  animation: brush-fade 2600ms ease 4100ms both,
             drift-a 110s linear infinite 4100ms;
}
.brush--b {
  top: 32%;
  right: -22%;
  width: 65vmin;
  animation: brush-fade 2600ms ease 4500ms both,
             drift-b 140s linear infinite 4500ms;
}
.brush--c {
  bottom: -24%;
  left: 22%;
  width: 90vmin;
  animation: brush-fade 2600ms ease 4300ms both,
             drift-c 170s linear infinite 4300ms;
}
.brush--d {
  top: 6%;
  right: 30%;
  width: 50vmin;
  animation: brush-fade 2600ms ease 4700ms both,
             drift-d 90s linear infinite 4700ms;
}
.brush--e {
  bottom: 10%;
  right: 4%;
  width: 62vmin;
  animation: brush-fade 2600ms ease 4900ms both,
             drift-e 130s linear infinite 4900ms;
}

@keyframes brush-fade { from { opacity: 0; } to { opacity: 0.05; } }
@keyframes drift-a { 0%{transform:rotate(0)translate(0,0)} 50%{transform:rotate(180deg)translate(40px,30px)} 100%{transform:rotate(360deg)translate(0,0)} }
@keyframes drift-b { 0%{transform:rotate(0)translate(0,0)} 50%{transform:rotate(-200deg)translate(-30px,50px)} 100%{transform:rotate(-360deg)translate(0,0)} }
@keyframes drift-c { 0%{transform:rotate(0)translate(0,0)} 50%{transform:rotate(140deg)translate(60px,-25px)} 100%{transform:rotate(360deg)translate(0,0)} }
@keyframes drift-d { 0%{transform:rotate(0)translate(0,0)} 50%{transform:rotate(-160deg)translate(20px,60px)} 100%{transform:rotate(-360deg)translate(0,0)} }
@keyframes drift-e { 0%{transform:rotate(0)translate(0,0)} 50%{transform:rotate(220deg)translate(-50px,20px)} 100%{transform:rotate(360deg)translate(0,0)} }

/* ---------- Intro stage (full viewport — paints mark, writes BIG "zulfa", opens like a seal) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: transparent;
  animation: intro-stage-fade 600ms ease 4900ms forwards;
}
.intro__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.2vh, 1.6rem);
  transform-origin: center;
  animation: seal-open 1100ms cubic-bezier(.55, .15, .35, 1) 4200ms forwards;
}
.mark-stack.mark-stack--intro {
  width: clamp(280px, 64vmin, 540px);
  max-width: none;
  aspect-ratio: 1 / 1;
  position: relative;
}

/* Wordmark — large, letter-by-letter brush settle (no left-to-right wipe) */
.intro__word {
  font-family: var(--zulfa-font-display);
  font-weight: var(--zulfa-weight-strong);
  font-size: clamp(2.6rem, 7.6vmin, 4.6rem);
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--zulfa-ink);
  display: flex;
}
.intro__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.28em) scale(1.35);
  filter: blur(4px);
  animation: letter-paint 760ms cubic-bezier(.18, .9, .25, 1) forwards;
  animation-delay: calc(2400ms + var(--i) * 130ms);
}

@keyframes letter-paint {
  0%   { opacity: 0; transform: translateY(0.28em) scale(1.35); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes seal-open {
  0%   { transform: scale(1)    rotate(0deg);    opacity: 1; }
  40%  { transform: scale(1.18) rotate(8deg);    opacity: 1; }
  100% { transform: scale(1.85) rotate(-14deg);  opacity: 0; }
}
@keyframes intro-stage-fade { to { opacity: 0; visibility: hidden; } }

/* ---------- Page shell ---------- */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  gap: 0;
}

/* ---------- Hero canvas ---------- */
.canvas {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(0.5rem, 2vw, 1rem) 0;
}
@media (min-width: 880px) {
  .canvas {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    min-height: calc(100vh - 7rem);
  }
}

/* ---------- Crop marks (now bound to the canvas — never overlap foot text) ---------- */
.crop-marks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.crop {
  position: absolute;
  width: clamp(22px, 2.8vw, 34px);
  height: clamp(22px, 2.8vw, 34px);
  opacity: 0;
  animation: crop-grow 1500ms cubic-bezier(.16, .9, .25, 1) 6800ms both;
}
.crop__h, .crop__v { position: absolute; background: var(--zulfa-ink); }
.crop__h { height: 1px; width: 100%; }
.crop__v { width: 1px;  height: 100%; }

.crop--tl { top: 0; left: 0;     --tx:  35vw; --ty:  30vh; }
.crop--tl .crop__h { top: 0; left: 0; }
.crop--tl .crop__v { top: 0; left: 0; }
.crop--tr { top: 0; right: 0;    --tx: -35vw; --ty:  30vh; }
.crop--tr .crop__h { top: 0; right: 0; }
.crop--tr .crop__v { top: 0; right: 0; }
.crop--bl { bottom: 0; left: 0;  --tx:  35vw; --ty: -30vh; }
.crop--bl .crop__h { bottom: 0; left: 0; }
.crop--bl .crop__v { bottom: 0; left: 0; }
.crop--br { bottom: 0; right: 0; --tx: -35vw; --ty: -30vh; }
.crop--br .crop__h { bottom: 0; right: 0; }
.crop--br .crop__v { bottom: 0; right: 0; }

@keyframes crop-grow {
  0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* ---------- Mark column (stacks mark + hero wordmark on every viewport) ---------- */
.canvas__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.6rem, 1.5vh, 1.1rem);
  padding: clamp(0.5rem, 3vw, 1.5rem);
}
.mark-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.mark-stack--hero {
  max-width: clamp(220px, 65vw, 460px);
}
@media (min-width: 880px) {
  .mark-stack--hero { max-width: min(62%, 460px); }
}
.hero__wordmark {
  margin-top: clamp(-2.5rem, -3vw, -1.5rem);
}
.mark-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mark-layer path { fill: var(--zulfa-ink); }

.hero__wordmark {
  font-family: var(--zulfa-font-display);
  font-weight: var(--zulfa-weight-strong);
  font-size: clamp(6rem, 11vw, 8.2rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--zulfa-ink);
}

/* Simple @wearezulfa link (X), positioned bottom-right of the hero canvas. */
.hero__handle {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 3;
  font-family: var(--zulfa-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--zulfa-ink);
  text-decoration: none;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
}
.hero__handle:hover, .hero__handle:focus-visible {
  transform: translateX(3px);
  opacity: 0.82;
}

@media (max-width: 879px) {
  .hero__handle {
    position: static;
    display: block;
    margin: 1.25rem auto 0.5rem auto;
    text-align: center;
    font-size: 1.1rem;
  }
}

/* ---------- Intro mark draw (gap-anchored; dot fades during ring draw so the mark "fills in" rather than snaps) ---------- */
.intro-arc {
  --sweep: 0deg;
  -webkit-mask: conic-gradient(from 315deg, transparent calc(360deg - var(--sweep)), #000 0);
          mask: conic-gradient(from 315deg, transparent calc(360deg - var(--sweep)), #000 0);
  animation: draw-ccw 2400ms cubic-bezier(.55, .05, .25, 1) 400ms both;
}
.intro-ring {
  --sweep: 0deg;
  -webkit-mask: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
          mask: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
  animation: draw-cw 1800ms cubic-bezier(.55, .05, .25, 1) 900ms both;
}
.intro-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-paint 900ms cubic-bezier(.4, .1, .25, 1) 2050ms both;
}

/* ---------- Hero mark draw (delayed — after the seal opens) ---------- */
.hero-arc {
  --sweep: 0deg;
  -webkit-mask: conic-gradient(from 315deg, transparent calc(360deg - var(--sweep)), #000 0);
          mask: conic-gradient(from 315deg, transparent calc(360deg - var(--sweep)), #000 0);
  animation: draw-ccw 2400ms cubic-bezier(.55, .05, .25, 1) 4700ms both;
}
.hero-ring {
  --sweep: 0deg;
  -webkit-mask: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
          mask: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
  animation: draw-cw 1900ms cubic-bezier(.55, .05, .25, 1) 5200ms both;
}
.hero-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-paint 900ms cubic-bezier(.4, .1, .25, 1) 6400ms both;
}

@keyframes draw-cw  { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes draw-ccw { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes dot-paint {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Type column ---------- */
.canvas__type {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2rem);
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
}
@media (min-width: 880px) {
  .canvas__type {
    margin: 0;
    max-width: 34rem;
    padding: 0;
  }
}

.statement {
  margin: 0;
  font-family: var(--zulfa-font-display);
  font-weight: var(--zulfa-weight-strong);
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.statement__line { display: block; }
.statement__line--alt {
  font-style: italic;
  font-weight: var(--zulfa-weight-body);
  color: color-mix(in srgb, var(--zulfa-ink) 78%, transparent);
}

/* ---------- Ventures (list with descriptors — no label) ---------- */
.ventures {
  display: flex;
  flex-direction: column;
}
.ventures__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.venture {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  width: fit-content;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--zulfa-ink) 22%, transparent);
  font-size: 1rem;
  transition: border-color 220ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
}
.venture__name {
  font-weight: var(--zulfa-weight-strong);
  letter-spacing: var(--zulfa-tracking-snug);
  color: var(--zulfa-ink);
}
.venture__what {
  font-style: italic;
  color: color-mix(in srgb, var(--zulfa-ink) 65%, transparent);
}
.venture__arrow {
  margin-left: 0.25rem;
  color: color-mix(in srgb, var(--zulfa-ink) 50%, transparent);
  font-size: 0.92em;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), color 220ms ease;
}
.venture:hover, .venture:focus-visible {
  border-bottom-color: var(--zulfa-ink);
  transform: translateX(2px);
}
.venture:hover .venture__arrow,
.venture:focus-visible .venture__arrow {
  transform: translateX(3px);
  color: var(--zulfa-ink);
}

/* ---------- Foot (no more "From zero ·" cringe — just a clean copyright) ---------- */
.page__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.2rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--zulfa-ink) 60%, transparent);
  padding: 1.25rem 0 0.5rem;
  border-top: 1px solid var(--zulfa-divider);
  margin-top: 1.5rem;
}
.page__foot-mark {
  font-weight: var(--zulfa-weight-strong);
  letter-spacing: -0.018em;
  color: var(--zulfa-ink);
  font-size: 0.92rem;
}
.page__foot a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.page__foot a:hover, .page__foot a:focus-visible {
  color: var(--zulfa-ink);
  border-bottom-color: var(--zulfa-ink);
}
.page__foot-spacer { flex: 1 1 1rem; min-width: 0.5rem; }
.page__foot-meta { color: color-mix(in srgb, var(--zulfa-ink) 48%, transparent); }

/* ---------- Chaos-to-settle fly-ins ---------- */
.fly {
  --fx: 0;
  --fy: 0;
  --fr: 0deg;
  --fs: 0.85;
  opacity: 0;
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(var(--fs));
}
.fly--mark {
  --fx: -45vw;
  --fy: 35vh;
  --fr: -22deg;
  --fs: 0.7;
  animation: fly-in 1900ms cubic-bezier(.18, .85, .25, 1) 4600ms both;
}
.fly--word {
  --fx: 30vw;
  --fy: 40vh;
  --fr: 16deg;
  --fs: 0.85;
  animation: fly-in 1700ms cubic-bezier(.18, .85, .25, 1) 4800ms both;
}
.fly--l1 {
  --fx: 55vw;
  --fy: -22vh;
  --fr: 14deg;
  --fs: 0.9;
  animation: fly-in 1700ms cubic-bezier(.18, .85, .25, 1) 4900ms both;
}
.fly--l2 {
  --fx: -50vw;
  --fy: -15vh;
  --fr: -10deg;
  --fs: 0.9;
  animation: fly-in 1700ms cubic-bezier(.18, .85, .25, 1) 5000ms both;
}
.fly--vent {
  --fx: 30vw;
  --fy: 60vh;
  --fr: 10deg;
  --fs: 0.9;
  animation: fly-in 1600ms cubic-bezier(.18, .85, .25, 1) 5100ms both;
}
.fly--handle {
  --fx: 35vw;
  --fy: 30vh;
  --fr: 8deg;
  --fs: 0.9;
  animation: fly-in 1500ms cubic-bezier(.18, .85, .25, 1) 5500ms both;
}
.fly--foot {
  --fx: -25vw;
  --fy: 55vh;
  --fr: -6deg;
  --fs: 0.95;
  animation: fly-in 1700ms cubic-bezier(.18, .85, .25, 1) 5300ms both;
}

@keyframes fly-in {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(var(--fs)); }
  35%  { opacity: 0.55; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

/* ---------- Subpages (preserved from v1.9.0) ---------- */
.page--sub {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  gap: clamp(2.25rem, 5vh, 3.25rem);
}
.sub__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sub__lockup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.sub__seal {
  display: block;
  width: 32px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.sub__seal img, .sub__seal svg { width: 100%; height: 100%; display: block; }
.wordmark--sm {
  font-family: var(--zulfa-font-display);
  font-weight: var(--zulfa-weight-strong);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--zulfa-ink);
}
.sub__label {
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--zulfa-ink) 60%, transparent);
  font-style: italic;
}
.sub__handle {
  font-size: 0.85rem;
  font-style: italic;
  color: color-mix(in srgb, var(--zulfa-ink) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--zulfa-ink) 22%, transparent);
  padding-bottom: 2px;
  transition: color 220ms ease, border-color 220ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
}
.sub__handle:hover, .sub__handle:focus-visible {
  color: var(--zulfa-ink);
  border-bottom-color: var(--zulfa-ink);
  transform: translateX(2px);
}
.sub__body { display: grid; gap: clamp(1.25rem, 3vh, 2rem); }
.sub__title {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.3rem);
  font-weight: var(--zulfa-weight-strong);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}
.sub__title em {
  font-weight: var(--zulfa-weight-body);
  color: color-mix(in srgb, var(--zulfa-ink) 78%, transparent);
}
.sub__lede {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--zulfa-ink) 78%, transparent);
  max-width: 36ch;
}
.manifesto {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  counter-reset: m;
  border-top: 1px solid var(--zulfa-divider);
}
.manifesto li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--zulfa-divider);
  counter-increment: m;
  font-size: 1rem;
  line-height: 1.5;
}
.manifesto li::before {
  content: counter(m, decimal-leading-zero);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--zulfa-ink) 45%, transparent);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.prose { display: grid; gap: 1.2rem; }
.prose p { margin: 0; font-size: 0.96rem; line-height: 1.6; }
.prose__aside {
  margin-top: 0.5rem !important;
  font-size: 0.82rem !important;
  color: color-mix(in srgb, var(--zulfa-ink) 50%, transparent);
}
.page--sub .sub__head        { animation: sub-fade 700ms ease 80ms both; }
.page--sub .sub__body        { animation: sub-up 800ms cubic-bezier(.16, 1, .3, 1) 200ms both; }
.page--sub .page__foot       { animation: sub-fade 700ms ease 500ms both; }
@keyframes sub-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sub-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro                  { display: none !important; }
  .brush,
  .crop,
  .canvas__mark,
  .hero__wordmark,
  .statement,
  .ventures,
  .page__foot,
  .hero-arc, .hero-ring, .hero-dot,
  .intro__word span,
  .page--sub .sub__head, .page--sub .sub__body, .page--sub .page__foot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .brush          { opacity: 0.05 !important; }
  .hero-ring      { --sweep: 360deg; -webkit-mask: none; mask: none; }
  .hero-arc       { --sweep: 360deg; -webkit-mask: none; mask: none; }
  .venture { transition: none; }
}