/* =====================================================================
   projects.css — four project WORLDS + case-study overlay.
   Each world owns a palette, artwork, and motion language.
   World themes: --wa (accent) and --wb (world background tint).
   ===================================================================== */

.works { position: relative; }
.works__intro { padding-block: var(--sec) clamp(2rem, 5vw, 4rem); }

/* ------------------------------- world -------------------------------- */
.world { position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-block: clamp(4.5rem, 9vw, 7.5rem); background: var(--wb);
  border-top: 1px solid var(--line-soft); overflow: hidden; }
.world[data-world="p1"] { --wa: var(--w1); --wb: var(--w1-ink); }
.world[data-world="p2"] { --wa: var(--w2); --wb: var(--w2-ink); }
.world[data-world="p3"] { --wa: var(--w3); --wb: var(--w3-ink); }
.world[data-world="p4"] { --wa: var(--w4); --wb: var(--w4-ink); }
/* soft atmosphere feathering between chapters */
.world::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 18vh;
  background: linear-gradient(to bottom, var(--ink), transparent); pointer-events: none; }
.world::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18vh;
  background: linear-gradient(to top, var(--ink), transparent); pointer-events: none;
  opacity: 0.65; }

/* giant chapter numeral bleeding off the edge */
.world__no { position: absolute; top: 50%; z-index: 0; transform: translateY(-50%);
  font-family: var(--f-display); font-weight: 800; line-height: 0.8;
  font-size: clamp(10rem, 30vw, 28rem); letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--wa) 14%, transparent);
  pointer-events: none; user-select: none; }
.world:nth-of-type(odd) .world__no { right: -0.08em; }
.world:nth-of-type(even) .world__no { left: -0.08em; }

.world__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; width: 100%; }
.world:nth-of-type(even) .world__inner { direction: rtl; }
.world:nth-of-type(even) .world__inner > * { direction: ltr; }

.world__copy { min-width: 0; }
.world__copy .idx { color: var(--wa); }
.world__cat { margin-top: 1rem; font-family: var(--f-mono); font-size: 0.64rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-dim); }
.world__title { margin-top: 0.7rem; font-family: var(--f-display); font-weight: 800;
  letter-spacing: -0.025em; line-height: 0.95; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem); }
.world__title em { font-style: normal; color: var(--wa); }
.world__pair { margin-top: 1.6rem; display: grid; gap: 1rem; max-width: 54ch; }
.world__pair p { color: var(--paper-dim); font-size: 0.94rem; }
.world__pair b { display: block; font-family: var(--f-mono); font-weight: 400;
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wa); margin-bottom: 0.3rem; }
.world__tech { margin-top: 1.4rem; font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-ghost); }
.world__tech b { color: var(--paper-dim); font-weight: 400; }
.world__open { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--paper); padding: 0.95rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--wa) 55%, transparent);
  transition: background 0.35s var(--ease), color 0.35s; position: relative; overflow: hidden; }
.world__open::before { content: ""; position: absolute; inset: 0; background: var(--wa);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease); }
.world__open span { position: relative; z-index: 1; }
.world__open:hover { color: var(--ink); }
.world__open:hover::before { transform: scaleY(1); }

/* ----------------------------- artwork base --------------------------- */
.world__art { position: relative; min-height: clamp(320px, 46vw, 560px); }
.art-label { position: absolute; left: 0; bottom: -1.6rem; font-family: var(--f-mono);
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper-ghost); }

/* ---- P1 · data system: animated record table + relation lines -------- */
.sys { position: relative; border: 1px solid color-mix(in srgb, var(--wa) 30%, transparent);
  background: color-mix(in srgb, var(--wa) 4%, transparent); padding: 1rem;
  font-family: var(--f-mono); }
.sys__bar { display: flex; justify-content: space-between; font-size: 0.58rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-ghost);
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--line-soft); }
.sys__bar b { color: var(--wa); font-weight: 400; }
.sys__rows { display: flex; flex-direction: column; }
.sys__row { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) 5.4rem 5.6rem;
  gap: 0.8rem; align-items: center; padding: 0.72rem 0.2rem; font-size: 0.68rem;
  border-bottom: 1px solid var(--line-soft); color: var(--paper-dim);
  letter-spacing: 0.06em; }
.sys__row i { font-style: normal; color: var(--paper-ghost); }
.sys__row em { font-style: normal; color: var(--paper); }
.sys__st { justify-self: end; font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.2rem 0.55rem; border: 1px solid; }
.sys__st--paid { color: var(--wa); border-color: color-mix(in srgb, var(--wa) 60%, transparent); }
.sys__st--due { color: #ffb02e; border-color: rgba(255,176,46,0.5); }
.sys__map { display: block; width: 58%; margin: 1.2rem 0 0.2rem auto; opacity: 0.9; }
.sys__map path { stroke: var(--wa); stroke-width: 1; fill: none; }
.sys__map circle { fill: var(--ink); stroke: var(--wa); stroke-width: 1; }
.sys__map text { font-size: 7.5px; letter-spacing: 0.14em; fill: var(--paper-ghost);
  text-transform: uppercase; }

/* ---- P2 · transaction: printing receipt + count-up balance ----------- */
.rcpt { position: relative; width: min(340px, 88%); margin-inline: auto;
  background: color-mix(in srgb, var(--wa) 5%, #14100b); font-family: var(--f-mono);
  border: 1px solid color-mix(in srgb, var(--wa) 30%, transparent);
  padding: 1.3rem 1.2rem 1.6rem;
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(circle at 8px 100%, transparent 5px, #000 5.5px);
  clip-path: inset(0 0 0 0); }
.rcpt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 10px;
  background: repeating-linear-gradient(90deg, var(--wb) 0 9px, transparent 9px 18px);
}
.rcpt__hd { text-align: center; letter-spacing: 0.3em; font-size: 0.6rem;
  text-transform: uppercase; color: var(--paper-dim); padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--line); }
.rcpt__ln { display: flex; justify-content: space-between; padding: 0.5rem 0;
  font-size: 0.66rem; letter-spacing: 0.08em; color: var(--paper-dim);
  border-bottom: 1px dashed var(--line-soft); }
.rcpt__ln em { font-style: normal; color: var(--paper); }
.rcpt__total { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 1rem; }
.rcpt__total span { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-ghost); }
.rcpt__total strong { font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--wa); letter-spacing: -0.01em; }
.rcpt__ok { margin-top: 0.9rem; text-align: center; font-size: 0.56rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--wa); }
/* scanline shimmer over the receipt */
.rcpt::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px,
  transparent 1px 3px); }

/* ---- P3 · environmental: topographic contours + nodes ---------------- */
.topo { position: relative; height: 100%; min-height: inherit; }
.topo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo path { fill: none; stroke: var(--wa); stroke-width: 1; opacity: 0.55; }
.topo__node { position: absolute; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-dim); }
.topo__node i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--wa);
  position: relative; }
.topo__node i::after { content: ""; position: absolute; inset: 2px; border-radius: 50%;
  background: var(--wa); animation: livePulse 2.6s ease-in-out infinite; }
.topo__node--a { top: 18%; left: 12%; }
.topo__node--b { top: 52%; right: 8%; }
.topo__node--c { bottom: 12%; left: 30%; }

/* ---- P4 · ordering: menu items flowing into an order ticket ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1.2rem; align-items: start; font-family: var(--f-mono); }
.order__menu { border-top: 1px solid color-mix(in srgb, var(--wa) 40%, transparent); }
.order__menu li { display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0.1rem; border-bottom: 1px solid var(--line-soft);
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--paper-dim); }
.order__menu em { font-style: normal; color: var(--paper); }
.order__menu li.is-picked { color: var(--wa); }
.order__menu li.is-picked em { color: var(--wa); }
.order__ticket { border: 1px solid color-mix(in srgb, var(--wa) 40%, transparent);
  background: color-mix(in srgb, var(--wa) 5%, transparent); padding: 1.1rem 1rem; }
.order__ticket h4 { font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-ghost); font-weight: 400; padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--line); }
.order__ticket ul { min-height: 5.4rem; }
.order__ticket li { display: flex; justify-content: space-between; padding: 0.5rem 0;
  font-size: 0.66rem; color: var(--paper-dim); border-bottom: 1px dashed var(--line-soft);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease),
  transform 0.5s var(--ease); }
.order__ticket li.in { opacity: 1; transform: none; }
.order__sum { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.8rem; }
.order__sum span { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-ghost); }
.order__sum strong { font-family: var(--f-display); font-size: 1.5rem; color: var(--wa); }

/* Case-study details now live on dedicated pages (projects/<slug>/) —
   styled by css/case.css. The old overlay styles were removed. */

/* the whole artwork is now a link into the case study */
a.world__art { display: block; }
a.world__art:hover .art-label { color: var(--wa); }
a.world__art:focus-visible { outline: 2px solid var(--wa); outline-offset: 6px; }
.art-label { transition: color 0.3s var(--ease); }

@media (max-width: 900px) {
  .world__inner { grid-template-columns: minmax(0, 1fr); }
  .world:nth-of-type(even) .world__inner { direction: ltr; }
  .world__art { min-height: 0; margin-top: 0.6rem; }
  .sys__map { display: none; }
  .world__no { font-size: clamp(8rem, 34vw, 14rem); top: 12%; }
}