/* Hallmark · shape: poster wall with a talking bubble · genre: atmospheric · theme: custom · job: hire · idea: "NOMAD talks in its own spray-painted speech bubble while the posters cover the wall" · vibe: "street wall, spray paint, psychedelic gig posters"
 * paper: oklch(15.5% 0.006 60) · accent: oklch(79% 0.18 125) · display: Saira Extra Condensed · body: Archivo · hero: the headline beside his own drawing, a plague doctor mask among potions labelled Illustrate, Vector and PNG · nav: logo left, three drawn icons right · footer: logo, studio line, a skull doodle · imagery: the client's own posters, drawn UI from the logo · signature: the wall of 49 real posters under drawn spray icons
 * axes: dark/display-condensed/chromatic-lime · posture: dark ground carrying the brand's lime and pink · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the clients list is type only; kept to real names from the posters, no logos */
/* waive 80 (drawn illustration): the client is an illustrator and asked for drawn UI in his own logo's style; the drawings are the material, not ornament */
/* waive craft 5 (transform/opacity only): the See the wall underline and The wall arrow animate stroke-dashoffset on small SVGs so they draw along its own path like a marker */
/* waive 38iii (accented word in a heading): the client asked for "posters" in the hero to carry a pink paint stroke; it appears once, in the hero only */
/* waive spent near-black+neon: the palette is the client's existing logo (black, acid lime, hot pink), not a pick */
@import url("./tokens.css?v=2");
@import url("./base.css");

body { font-size: var(--text-md); }
a { text-decoration: none; }

/* drawn shapes are alpha masks, coloured by tokens */
.ico, .doodle {
  display: inline-block;
  background-color: var(--color-accent);
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico-work { --m: url("assets/ui/ico-work.png?v=2"); }
.ico-about { --m: url("assets/ui/ico-about.png?v=2"); }
.ico-contact { --m: url("assets/ui/ico-contact.png?v=2"); }
.d-arrow { --m: url("assets/ui/d-arrow.png"); }
.d-sparkle { --m: url("assets/ui/d-sparkle.png"); }
.d-splat { --m: url("assets/ui/d-splat.png"); }
.d-skull { --m: url("assets/ui/d-skull.png"); }
.d-flame { --m: url("assets/ui/d-flame.png?v=3"); }
.d-bolt { --m: url("assets/ui/d-bolt.png"); }
.doodle { position: absolute; pointer-events: none; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); }
.nav-logo { display: block; width: 88px; flex: none; }
.nav-logo img { width: 100%; }
.nav-links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav-links a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2xs); border-radius: var(--radius-card); transition: color var(--dur-short) var(--ease-out); }
.nav-links .ico { width: 52px; height: 52px; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:hover .ico { background-color: var(--color-hot); transform: rotate(-8deg) scale(1.08); }
.nav-links a:active .ico { transform: rotate(-8deg) scale(0.96); }
/* Ochiul care urmărește mouse-ul pe postere și clipește. Îl creează main.js; fără JS rămâne cursorul static. */
.eye-cursor { position: fixed; left: 0; top: 0; width: 48px; height: 48px; margin: calc(-1 * var(--space-lg)) 0 0 calc(-1 * var(--space-lg)); pointer-events: none; z-index: 50; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.eye-cursor.on { opacity: 1; }
.eye-cursor i { position: relative; display: block; width: 100%; height: 100%; background: url("assets/ui/eye-ball-96.png") center / contain no-repeat; animation: eye-blink 3600ms infinite; }
/* irisul e desenat puțin spre stânga; --base îl aduce la mijloc, --lx/--ly îl mută după mouse */
.eye-cursor b { position: absolute; inset: 0; background: url("assets/ui/eye-iris-96.png") center / contain no-repeat; transform: translate(calc(9% + var(--lx, 0px)), calc(1% + var(--ly, 0px))); }
@keyframes eye-blink { 0%, 88%, 100% { transform: scaleY(1); } 91% { transform: scaleY(0.08); } 94% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } 98% { transform: scaleY(1); } }
.has-eye .tile { cursor: none; }
/* Animație scurtă la clic, pusă din main.js cu clasa .is-anim. */
.nav-links .ico-work.is-anim { animation: ico-scribble 560ms var(--ease-out); }
.nav-links .ico-about.is-anim { animation: ico-blink 560ms var(--ease-out); }
.nav-links .ico-contact.is-anim { animation: ico-fly 620ms var(--ease-out); }
@keyframes ico-scribble { 0% { transform: rotate(0); } 20% { transform: translate(-4px, 3px) rotate(-14deg); } 40% { transform: translate(4px, -2px) rotate(6deg); } 60% { transform: translate(-3px, 3px) rotate(-12deg); } 80% { transform: translate(2px, -1px) rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes ico-blink { 0% { transform: scale(1); } 25% { transform: scale(1.12, 0.12); } 50% { transform: scale(1.1); } 75% { transform: rotate(-6deg) scale(1.04); } 100% { transform: scale(1); } }
@keyframes ico-fly { 0% { transform: none; opacity: 1; } 45% { transform: translate(34px, -30px) rotate(-12deg) scale(0.7); opacity: 0; } 46% { transform: translate(-30px, 26px) scale(0.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* hero */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding-block: var(--space-lg) var(--section-gap-s); }
.hero-text { grid-area: 1 / 1 / 2 / span 6; align-self: start; display: grid; gap: var(--space-lg); position: relative; z-index: var(--z-raised); padding-top: var(--space-xl); }
.hero h1 { text-shadow: 0 0 18px var(--color-paper), 0 0 6px var(--color-paper); font-size: clamp(3.25rem, 5.4vw + 0.5rem, 7rem); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); }
/* „posters” din titlu: o trăsătură roz de pensulă în spate, pictată o dată la încărcare */
.hero h1 .hl { position: relative; z-index: 0; display: inline-block; color: var(--color-accent-ink); text-shadow: none; }
.hl-stroke { position: absolute; z-index: -1; left: -0.28em; right: -0.32em; top: -0.1em; bottom: -0.16em; background-color: var(--color-hot); -webkit-mask: url("assets/ui/stroke-posters.png") center / 100% 100% no-repeat; mask: url("assets/ui/stroke-posters.png") center / 100% 100% no-repeat; transform-origin: 0 50%; transform: rotate(-1.5deg); animation: hl-paint 700ms var(--ease-out) 350ms backwards; }
@keyframes hl-paint { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
.hero-lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 24ch; text-shadow: 0 0 12px var(--color-paper), 0 0 4px var(--color-paper); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-xs); }
/* "See the wall": o tușă de vopsea roz care se pictează singură și picură */
.link-paint { position: relative; display: inline-block; margin-left: var(--space-lg); padding-bottom: var(--space-2xs); color: var(--color-ink); font-weight: 600; text-shadow: 0 0 10px var(--color-paper); border-radius: var(--radius-card); transition: color var(--dur-short) var(--ease-out); }
.link-paint:hover { color: var(--color-accent); }
/* sublinierea: trasă de mână cu markerul, o linie și o întoarcere mai subțire, apoi se reia */
.scribble { position: absolute; left: -6px; bottom: -14px; width: calc(100% + 14px); height: 22px; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--color-hot); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.scribble-a { stroke-width: 3.6; animation: scribble-a 4200ms var(--ease-out) 500ms infinite backwards; }
.scribble-b { stroke-width: 2.2; animation: scribble-b 4200ms var(--ease-out) 500ms infinite backwards; }
.scribble-mail { left: -4px; bottom: -10px; width: calc(100% + 10px); height: 26px; }
.scribble-mail path { vector-effect: non-scaling-stroke; }
.scribble-mail .scribble-a { stroke-width: 5; }
.scribble-mail .scribble-b { stroke-width: 3; }
@keyframes scribble-a { 0% { stroke-dashoffset: 1; opacity: 1; } 12% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes scribble-b { 0%, 13% { stroke-dashoffset: 1; opacity: 1; } 22% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
/* desenul e în formă de L: textul stă în golul din stânga sus, desenul vine până la el */
.hero-art { grid-area: 1 / 2 / 2 / -1; align-self: end; position: relative; margin-right: calc(-1 * var(--gutter)); margin-left: calc(-1 * var(--gap-columns)); margin-top: -5%; }
.hero-art img { width: 100%; }

/* the one primary button: the logo's speech bubble */
.btn-bubble { position: relative; display: inline-grid; place-items: center; min-width: 260px; min-height: 104px; padding: var(--space-md) var(--space-xl) var(--space-xl); color: var(--color-accent-ink); font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); text-transform: uppercase; line-height: 1; isolation: isolate; border-radius: var(--radius-card); }
.btn-bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-accent); -webkit-mask: url("assets/ui/bubble.png") center / 100% 100% no-repeat; mask: url("assets/ui/bubble.png") center / 100% 100% no-repeat; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn-bubble span { transform: translateY(-6px); }
.btn-bubble:hover::before { background-color: var(--color-hot); transform: rotate(-2deg) scale(1.03); }
.btn-bubble:active::before { transform: scale(0.97); }
.btn-bubble:focus-visible { outline-offset: 6px; }
.link-plain { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-hot); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: color var(--dur-short) var(--ease-out); }
.link-plain:hover { color: var(--color-accent); }

/* work wall */
.work { padding-block: var(--space-2xl) var(--section-gap); }
.work-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-xl); }
.work-head h2, .about h2, .contact h2 { font-size: var(--text-section); font-weight: 800; line-height: 1; text-transform: uppercase; }
.hand-note { position: relative; font-family: var(--font-outlier); font-size: var(--text-hand); color: var(--color-accent); line-height: 1; padding-bottom: var(--space-xs); justify-self: start; }
.note-arrow { position: absolute; left: calc(100% + 6px); top: -2px; width: 92px; height: 120px; overflow: visible; fill: none; stroke: var(--color-accent); stroke-linecap: round; stroke-linejoin: round; }
.note-arrow-a { stroke-width: 3.4; }
.note-arrow-b { stroke-width: 3.8; }
/* săgeata se desenează o dată, când ajungi la perete (main.js pune .drawn); fără JS e desenată deja */
.js .note-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .note-arrow.drawn .note-arrow-a { animation: arrow-draw 900ms var(--ease-out) forwards; }
.js .note-arrow.drawn .note-arrow-b { animation: arrow-draw 260ms var(--ease-out) 860ms forwards; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-2xl); }
.chip { appearance: none; border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.chip:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

.wall { list-style: none; margin: 0; padding: 0; columns: 4 260px; column-gap: var(--gap-columns); }
.wall li { break-inside: avoid; margin-bottom: var(--gap-columns); }
.wall li[hidden] { display: none; }
/* cu JS, peretele se așază pe rânduri (în ordinea de pe Instagram), cu înălțimi diferite: main.js calculează câte rânduri de 4px ocupă fiecare poster */
.js .wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 4px; column-gap: var(--gap-columns); columns: auto; }
.js .wall li { margin-bottom: 0; padding-bottom: var(--gap-columns); }
.js .wall li.wide { grid-column: span 2; }
.tile { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; border-radius: var(--radius-card); }
.tile { transition: transform var(--dur-short) var(--ease-out); }
.tile img { width: 100%; height: auto; background: var(--color-paper-2); border-radius: var(--radius-card); }
.tile:hover { transform: translateY(-4px) rotate(-0.6deg); }
.tile:active { transform: scale(0.99); }
/* Pe postere cursorul devine ochiul din iconița About. */
.tile { cursor: url("assets/ui/cursor-eye-48.png?v=4") 24 24, zoom-in; cursor: -webkit-image-set(url("assets/ui/cursor-eye-48.png?v=4") 1x, url("assets/ui/cursor-eye-96.png?v=4") 2x) 24 24, zoom-in; cursor: image-set(url("assets/ui/cursor-eye-48.png?v=4") 1x, url("assets/ui/cursor-eye-96.png?v=4") 2x) 24 24, zoom-in; }
.tile-cap { display: block; padding-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.35; }
.tile-cap b { display: block; font-weight: 600; color: var(--color-ink); }
.tile-cap span { color: var(--color-muted); }

/* clients */
.clients { position: relative; padding-block: var(--section-gap-s); border-block: var(--rule-hair) solid var(--color-rule); }
.clients-head { font-family: var(--font-outlier); font-weight: 400; font-size: var(--text-hand); color: var(--color-hot); margin-bottom: var(--space-lg); }
.clients-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xl); font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1; text-transform: uppercase; color: var(--color-ink); }
.clients-list li:nth-child(3n+2) { color: var(--color-accent); }
.clients-bolt { width: 96px; height: 96px; right: var(--gutter); top: var(--space-xl); background-color: var(--color-hot); }

/* about */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding-block: var(--section-gap-s); }
.about-art { grid-column: 1 / span 5; position: relative; display: grid; justify-items: center; }
.me { width: auto; max-height: min(78vh, 820px); }
.about-text { grid-column: 7 / span 6; display: grid; gap: var(--space-md); scroll-margin-top: calc(-1 * var(--space-3xl)); }
.about-lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.about-sub { font-family: var(--font-outlier); font-weight: 400; font-size: var(--text-hand); color: var(--color-accent); margin-top: var(--space-xs); }
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.services li { padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-md); }

/* contact: the big bubble */
.contact { --crowd: clamp(300px, 38vw, 520px); scroll-margin-top: calc(-1 * (var(--space-3xl) * 2 - var(--space-xs))); position: relative; overflow-x: clip; padding-block: var(--space-2xl) calc(var(--crowd) * 0.66); }
.contact-bubble { position: relative; z-index: 1; isolation: isolate; display: grid; justify-items: start; gap: var(--space-md); max-width: 1100px; margin-inline: auto; padding: clamp(48px, 7vw, 112px) clamp(32px, 8vw, 140px) clamp(120px, 14vw, 220px); color: var(--color-accent-ink); }
.contact-bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-accent); -webkit-mask: url("assets/ui/bubble.png") center / 100% 100% no-repeat; mask: url("assets/ui/bubble.png") center / 100% 100% no-repeat; }
.contact-bubble h2 { color: var(--color-accent-ink); }
.contact-bubble p { font-size: var(--text-lead); font-weight: 500; }
.contact-mail { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1; overflow-wrap: anywhere; position: relative; display: inline-block; padding-bottom: var(--space-xs); text-decoration: none; border-radius: var(--radius-card); transition: color var(--dur-short) var(--ease-out); }
.contact-mail:hover { color: var(--color-hot); }
.contact-bubble :focus-visible { outline-color: var(--color-accent-ink); }

/* mulțimea de sub balon: brațe care se leagănă, se întorc spre cursor și sar când ești pe e-mail.
   Fiecare braț are două măști: --fill (silueta, umplută cu hârtie) și --line (conturul, în ink). */
.crowd { position: absolute; z-index: 2; inset: auto var(--gutter) 0; height: var(--crowd); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.arm { flex: none; height: calc(var(--crowd) * var(--h)); aspect-ratio: var(--r); margin-inline: -2%; transform-origin: 50% 100%; transform: rotate(var(--a, 0deg)); transition: transform 500ms var(--ease-out); }
.arm-sway { display: block; height: 100%; transform-origin: 50% 100%; animation: arm-sway 2400ms ease-in-out infinite alternate; }
.arm:nth-child(2n) .arm-sway { animation-duration: 2000ms; animation-delay: -700ms; }
.arm:nth-child(3n) .arm-sway { animation-duration: 2800ms; animation-delay: -1300ms; }
.arm-art { position: relative; display: block; height: 100%; transform: scaleX(var(--flip)); }
.arm-art::before, .arm-art::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center bottom / contain no-repeat; mask: var(--m) center bottom / contain no-repeat; }
.arm-art::before { --m: var(--fill); background-color: var(--color-paper-2); }
.arm-art::after { --m: var(--line); background-color: var(--color-ink); }
@keyframes arm-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-6px); } }
.contact.cheer .arm-sway { animation: arm-cheer 360ms var(--ease-out) infinite alternate; }
.contact.cheer .arm:nth-child(2n) .arm-sway { animation-delay: -180ms; }
@keyframes arm-cheer { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-14%) rotate(2deg); } }

/* creionul de tabletă în locul cursorului: apasă peste butoane și lasă un strop roz la clic */
.pen-cursor, .ink-splat { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; }
.pen-cursor { width: 44px; height: 48px; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.pen-cursor.on { opacity: 1; }
.pen-cursor i { display: block; width: 100%; height: 100%; background-color: var(--color-ink); -webkit-mask: url("assets/ui/pen-cursor.png") center / contain no-repeat; mask: url("assets/ui/pen-cursor.png") center / contain no-repeat; transform-origin: 0 100%; transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.pen-cursor.press i { transform: translate(3px, 4px) rotate(8deg) scale(0.92); }
.pen-cursor.dark i { background-color: var(--color-accent-ink); }
.ink-splat.dark { background-color: var(--color-accent-ink); }
.ink-splat { width: 32px; height: 32px; margin: calc(-1 * var(--space-md)) 0 0 calc(-1 * var(--space-md)); background-color: var(--color-hot); -webkit-mask: url("assets/ui/d-splat.png") center / contain no-repeat; mask: url("assets/ui/d-splat.png") center / contain no-repeat; animation: ink-splat 700ms var(--ease-out) forwards; }
@keyframes ink-splat { 0% { opacity: 1; scale: 0.2; } 40% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.1; translate: 0 10px; } }
.has-pen, .has-pen * { cursor: none; }
.has-pen dialog[open], .has-pen dialog[open] * { cursor: auto; }


/* pagina de comandă: un pas pe ecran, ca un balon de vorbă care te întreabă pe rând */
.order { display: grid; justify-items: start; gap: var(--space-xl); padding-block: var(--space-xl) var(--section-gap); }
.order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-xl); }
.order-head h1 { font-size: var(--text-section); font-weight: 800; line-height: 1; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.order-form, .order-sent { width: 100%; max-width: 760px; }
.order-form { display: grid; gap: var(--space-xl); }
.order-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.order-progress { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; color: var(--color-muted); font-size: var(--text-sm); }
.order-progress li { padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.order-progress li.now { border-color: var(--color-accent); color: var(--color-ink); }
.order-progress li.done { background: var(--color-paper-3); color: var(--color-ink-2); }
html:not(.js) .order-progress { display: none; }
.order-step { display: grid; gap: var(--space-lg); margin: 0; padding: 0; border: 0; min-width: 0; }
.order-step legend { padding: 0; margin-bottom: var(--space-lg); font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-s); line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; }
.field { display: grid; gap: var(--space-xs); }
.field > span { color: var(--color-ink-2); font-size: var(--text-md); }
.field input:not([type="radio"]):not([type="file"]), .field textarea { width: 100%; padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { resize: vertical; min-height: 6.5em; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklch, var(--color-muted) 45%, transparent); }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--color-accent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-hot); }
.field input:disabled, .field textarea:disabled { background: var(--color-paper); color: var(--color-muted); cursor: not-allowed; }
.order-choices { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span { display: inline-block; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.choice:hover span { border-color: var(--color-ink-2); color: var(--color-ink); }
.choice input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.order-other { margin-top: var(--space-xs); }
.order-file input { color: var(--color-ink-2); font-size: var(--text-sm); }
.order-file input::file-selector-button { margin-right: var(--space-md); padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: inherit; }
.order-file-list { color: var(--color-muted); font-size: var(--text-sm); }
.order-error { color: var(--color-hot); font-weight: 600; }
.order-error:empty { display: none; }
.order-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.order-nav .btn-bubble { border: 0; background: none; }
.order-nav .btn-bubble:disabled { color: var(--color-ink-2); cursor: progress; }
.order-nav .btn-bubble:disabled::before { background-color: var(--color-paper-3); }
html:not(.js) #order-next, html:not(.js) #order-back { display: none; }
.order-sent { display: grid; justify-items: start; gap: var(--space-md); }
.order-sent h2 { font-size: var(--text-section); font-weight: 800; line-height: 1; text-transform: uppercase; }
.order-sent p { font-size: var(--text-lead); max-width: 40ch; }

/* rândul de butoane din balon: WhatsApp, Instagram, formularul de comandă */
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.contact-pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent-ink); color: var(--color-accent); font-weight: 600; font-size: var(--text-md); white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.contact-pill:hover { color: var(--color-hot); transform: rotate(-2deg); }
.contact-pill:active { transform: scale(0.96); }
.contact-pill:focus-visible { outline-color: var(--color-accent-ink); outline-offset: 3px; }
.pill-ico { width: 24px; height: 24px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-ico .fill { fill: currentColor; stroke: none; }

.about-body { color: var(--color-ink-2); max-width: 46ch; }
.specs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.specs li::before { content: "✦"; margin-right: var(--space-xs); color: var(--color-hot); }

/* benzi de șantier sub mulțime: recenzii reale (Fiverr) și cifrele lui, care curg continuu */
.tapes { position: relative; z-index: 3; margin-top: var(--space-2xl); padding-block: var(--space-2xl); overflow-x: clip; }
.tape { position: relative; width: calc(100% + 120px); margin-left: -60px; overflow: hidden; padding-block: var(--space-md); }
.tape::before, .tape::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--color-accent-ink) 0 12px, transparent 12px 24px); }
.tape::before { top: 0; }
.tape::after { bottom: 0; }
.tape-a { background: var(--color-accent); color: var(--color-accent-ink); transform: rotate(-2deg); margin-top: calc(-1 * var(--space-md)); }
.tape-b { background: var(--color-hot); color: var(--color-accent-ink); transform: rotate(2.2deg); }
.tape-track { display: flex; width: max-content; animation: tape-run 300s linear infinite; }
.tape-b .tape-track { animation-duration: 70s; animation-direction: reverse; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-run { display: flex; list-style: none; margin: 0; padding: 0; }
.tape-run li { display: flex; align-items: baseline; gap: var(--space-sm); padding-inline: var(--space-lg); white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.2; text-transform: uppercase; }
.tape-run li::after { content: "✦"; margin-left: var(--space-lg); }
.tape-run q { quotes: "“" "”" "‘" "’"; }
.tape-by { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); text-transform: none; }
@keyframes tape-run { to { transform: translateX(-50%); } }

/* „Behind the ink”: două time-lapse-uri în polaroide lipite pe perete cu scotch */
.process { padding-block: var(--section-gap-s); }
.process h2 { font-size: var(--text-section); font-weight: 800; line-height: 1; text-transform: uppercase; margin-bottom: var(--space-2xl); }
.process-wall { position: relative; max-width: 960px; min-height: 640px; }
.process > h2, .process-wall { margin-inline: auto; max-width: 960px; }
.polaroid { position: relative; margin: 0; padding: 14px 14px 0; background: var(--color-ink); box-shadow: 0 18px 40px var(--polaroid-shadow); }
.polaroid video { display: block; width: 100%; height: auto; background: var(--color-paper-2); }
.polaroid figcaption { padding: var(--space-sm) var(--space-2xs) var(--space-md); font-family: var(--font-outlier); font-size: var(--text-xl); line-height: 1.1; color: var(--color-accent-ink); }
.scotch { position: absolute; z-index: 2; width: 120px; height: 34px; background: var(--tape); clip-path: polygon(2% 0, 98% 0, 100% 22%, 96% 42%, 100% 63%, 97% 84%, 99% 100%, 1% 100%, 4% 80%, 0 60%, 3% 40%, 0 20%); }
.scotch.hot { background: var(--tape-hot); }
.process-wall .p1 { width: min(720px, 78%); transform: rotate(-1.5deg); }
.process-wall .p2 { position: absolute; left: calc(min(720px, 78%) - 110px); top: 12%; width: min(320px, 34%); transform: rotate(5deg); }
.process-wall .p1 .scotch { top: -14px; left: -26px; rotate: -32deg; }
.process-wall .p1 .scotch.b { left: auto; right: -26px; rotate: 30deg; }
.process-wall .p2 .scotch { top: -16px; left: 50%; translate: -50% 0; rotate: 3deg; }
.process-note { position: absolute; left: 4%; bottom: 0; font-family: var(--font-outlier); font-size: var(--text-2xl); color: var(--color-accent); rotate: -4deg; }

/* ochii de pe fundal: linie subțire, aproape invizibili, plutesc și se uită după cursor */
.bg-eyes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-eye { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0.08; animation: eye-float var(--d) ease-in-out var(--delay) infinite; }
.bg-eye i, .bg-eye b { position: absolute; inset: 0; background-color: var(--color-ink); }
.bg-eye i { -webkit-mask: url("assets/ui/eye-ball-line.png") center / contain no-repeat; mask: url("assets/ui/eye-ball-line.png") center / contain no-repeat; }
.bg-eye b { -webkit-mask: url("assets/ui/eye-iris-line.png") center / contain no-repeat; mask: url("assets/ui/eye-iris-line.png") center / contain no-repeat; transform: translate(calc(9% + var(--lx, 0px)), calc(1% + var(--ly, 0px))); transition: transform 1600ms cubic-bezier(0.25, 0.8, 0.35, 1); }
@keyframes eye-float { 0%, 100% { transform: translate(0, 0) rotate(-5deg) scale(1); } 20% { transform: translate(18px, -22px) rotate(4deg) scale(1.03); } 45% { transform: translate(-6px, -40px) rotate(9deg) scale(0.98); } 70% { transform: translate(-22px, -16px) rotate(-2deg) scale(1.02); } 85% { transform: translate(-10px, 6px) rotate(-8deg) scale(1); } }

/* footer */
.footer { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-xs) var(--space-xl); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.footer-logo { grid-row: span 2; width: 72px; }
.footer-small { color: var(--color-muted); }
.footer-skull { width: 64px; height: 64px; right: var(--gutter); top: calc(-1 * var(--space-xl)); background-color: var(--color-accent); }

/* eticheta „5 images” pe posterele cu carusel */
.tile { position: relative; }
.tile-more { position: absolute; top: var(--space-xs); right: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; }
.viewer-count { margin-left: var(--space-xs); color: var(--color-accent); font-weight: 600; }

/* viewer */
.viewer { width: min(96vw, 1200px); max-height: 94vh; padding: var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); }
.viewer::backdrop { background: color-mix(in oklab, var(--color-paper) 88%, transparent); }
.viewer figure { margin: 0; display: grid; gap: var(--space-sm); }
.viewer img { max-height: 76vh; width: auto; margin-inline: auto; }
#viewer-frame { display: grid; justify-items: center; }
.viewer figcaption { font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.viewer figcaption strong { color: var(--color-ink); font-weight: 600; }
.viewer-nav { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-md); }

/* phone and tablet */
@media (max-width: 60rem) {
  .hero-text, .hero-art, .about-art, .about-text { grid-column: 1 / -1; }
  .hero-art { grid-area: 1 / 1 / 2 / -1; margin-right: 0; margin-left: 0; margin-top: 0; }
  .hero-text { grid-area: 2 / 1 / 3 / -1; padding-top: 0; }
  .hero-lead { max-width: 34ch; }
  .hero-art img { max-height: none; }
  .me { max-height: 70vh; }
  .work-head { grid-template-columns: minmax(0, 1fr); }
  .clients-bolt { display: none; }
}
@media (max-width: 40rem) {
  .nav-logo { width: 64px; }
  .nav-links { gap: var(--space-md); }
  .nav-links .ico { width: 40px; height: 40px; }
  .note-arrow { display: none; }
  .wall { columns: 2; column-gap: var(--space-sm); }
  .wall li { margin-bottom: var(--space-md); }
  .js .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-sm); }
  .js .wall li { margin-bottom: 0; padding-bottom: var(--space-md); }
  .btn-bubble { min-width: 220px; min-height: 92px; font-size: var(--text-xl); }
  .footer-skull { width: 64px; height: 64px; }
    .contact-bubble { padding: 56px 44px 112px 48px; }
  .contact { --crowd: 260px; }
  .tapes { margin-top: var(--space-xs); padding-block: var(--space-xl); }
  .contact-pill { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .contact-pill .pill-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .contact-mail { font-size: 1.625rem; overflow-wrap: normal; }
    .arm:nth-child(n+7) { display: none; }
  .arm { margin-inline: -4%; }
  .crowd { inset-inline: 0; }
  .hero-actions { gap: var(--space-lg); }
  .footer { grid-template-columns: minmax(0, 1fr); }
  .footer-logo { grid-row: auto; }
}
/* pe laptopuri cu ecran mai scund, About se strânge ca să încapă întreg când dai click în meniu */
@media (min-width: 60.01rem) and (max-height: 900px) {
  .about h2 { font-size: var(--text-3xl); }
  .about-lead { font-size: var(--text-lg); }
  .about-body, .specs { font-size: var(--text-sm); }
  .about-text { gap: var(--space-sm); }
  .services li { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
  .me { max-height: 74vh; }
}
@media (max-width: 60rem) {
  .process-wall { min-height: 0; display: grid; gap: var(--space-2xl); }
  .process-wall .p1 { width: 100%; }
  .process-wall .p2 { position: relative; left: auto; top: auto; width: 64%; justify-self: end; margin-right: var(--space-md); margin-top: calc(-1 * var(--space-2xl)); }
  .process-wall .p1 { transform: rotate(-1deg); }
  .process-wall .p1 .scotch { width: 84px; height: 26px; left: -6px; rotate: -24deg; }
  .process-wall .p1 .scotch.b { left: auto; right: -6px; rotate: 22deg; }
  .process-wall .p2 .scotch { width: 84px; height: 26px; }
  .process-note { justify-self: start; }
  .process-note { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .tile:hover, .nav-links a:hover .ico, .btn-bubble:hover::before { transform: none; }
}