/* ───────── Home — after pamidordesign.co ───────── */

/* Preloader */
.loader {
  position: fixed; inset: 0; z-index: 950; background: var(--paper);
  display: grid; place-items: center; overflow: hidden;
}
.loader__row { display: flex; align-items: center; font: 500 clamp(20px, 6.2vw, 104px)/1 var(--f-display); letter-spacing: -.01em; }
.loader__word { display: inline-flex; overflow: hidden; padding: .06em 0; }
.loader__word i { font-style: normal; display: inline-block; transform: translateY(110%); }
.loader__frame { width: 0; height: 1.3em; margin: 0 .12em; position: relative; overflow: hidden; }
.loader__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.loader__frame img.on { opacity: 1; }
.loader__count { position: absolute; left: var(--gutter); bottom: var(--gutter); color: var(--mute); overflow: hidden; }
.loader.is-done { pointer-events: none; }
html.no-loader .loader { display: none; }

/* Header */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 810;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--gutter); pointer-events: none; mix-blend-mode: difference; color: #fff;
}
.top > * { pointer-events: auto; }
.top__right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.top__logo { font: 600 12px/1 var(--f-body); letter-spacing: .02em; }
.top__logo sup { font-size: .8em; vertical-align: .35em; }
.is-menu .top { mix-blend-mode: normal; color: var(--ink); }

/* Shared headings */
.h-xl { font: 500 clamp(52px, 7.6vw, 132px)/.95 var(--f-display); letter-spacing: -.035em; margin: 0 0 clamp(20px, 2.4vw, 36px); }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.in .line > span, .line.in > span { transform: none; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s, transform 1s var(--ease-out); }
.reveal.in, .in .reveal { opacity: 1; transform: none; }

/* Hero */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: 41% 1fr; gap: 0;
  padding: 72px var(--gutter) 0; position: relative;
}
.hero__ascii { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .17; -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 55%); mask-image: linear-gradient(90deg, transparent 22%, #000 55%); }
.hero__media { z-index: 1; }
.hero__copy { align-self: center; position: relative; z-index: 2; padding-bottom: 6vh; }
.hero__title { margin: 0 0 22px; font: 500 clamp(64px, 8.1vw, 156px)/.9 var(--f-display); letter-spacing: -.045em; white-space: nowrap; }
.hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.hero__sub { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.4; margin: 0 0 28px; transition-delay: .25s; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 430px; transition-delay: .35s; }
.tags li { border: 1px solid var(--mute-2); padding: 8px 12px; font-size: 12px; line-height: 1; transition: background .3s, color .3s; }
.tags li:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hero__media { margin: 0; position: relative; height: calc(100svh - 72px); display: flex; align-items: flex-end; justify-content: flex-end; }
.hero__media img { flex: none; max-width: none; width: min(136%, calc((100svh - 72px) * 1.1)); height: auto; object-fit: cover; will-change: transform; }

/* About */
.about { padding: clamp(100px, 14vw, 220px) var(--gutter) clamp(60px, 7vw, 110px); }
.about__text-wrap { position: relative; max-width: 1180px; }
.about__more { margin-top: clamp(28px, 3vw, 44px); }
.about__text { font: 500 clamp(21px, 2.2vw, 38px)/1.2 var(--f-display); letter-spacing: -.015em; margin: 0; max-width: 24em; }
.about__text .w { color: var(--mute-2); transition: color .25s; }
.about__text .w.on { color: var(--ink); }

.clients { display: grid; grid-template-columns: minmax(140px, 15%) 1fr; gap: clamp(20px, 3vw, 48px); margin-top: clamp(60px, 7vw, 110px); padding-top: 26px; border-top: 1px solid var(--line); }
.clients__pic { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.clients__pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s; }
.clients__pic:hover img { filter: none; }
.clients__body { min-width: 0; }
.clients__body .label { margin: 0 0 18px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 18px; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.wm { padding: 0 clamp(18px, 2.4vw, 40px); white-space: nowrap; color: var(--ink-2); opacity: .7; font-size: 22px; line-height: 1.4; transition: opacity .3s; }
.wm:hover { opacity: 1; }
.wm--a { font: 700 20px var(--f-body); letter-spacing: -.01em; }
.wm--b { font: 600 17px var(--f-display); letter-spacing: .22em; }
.wm--c { font: italic 26px var(--f-serif); }
.wm--d { font: 500 16px var(--f-mono); letter-spacing: .04em; }
.wm--e { font: 600 22px var(--f-display); letter-spacing: -.05em; text-transform: lowercase; }
.wm--f { font: 400 15px var(--f-body); letter-spacing: .3em; text-transform: uppercase; }
.wm--g { font: 800 21px var(--f-display); font-style: italic; letter-spacing: -.03em; }
.wm--h { font: 500 18px var(--f-body); }
.wm--h::before { content: 'Y'; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-right: .35em; background: var(--ink-2); color: var(--paper); font-weight: 700; font-size: .85em; }
.wm--i { font: 400 24px var(--f-serif); letter-spacing: .02em; }

/* Selected projects */
.projects { padding: clamp(60px, 8vw, 140px) var(--gutter); }
.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.prow {
  --media-w: 31%;
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0 clamp(16px, 2.5vw, 40px);
  padding: clamp(14px, 1.4vw, 22px) calc(var(--media-w) + clamp(16px, 2.5vw, 40px)) clamp(14px, 1.4vw, 22px) 0;
  border-bottom: 1px solid var(--line); cursor: pointer; min-height: 0;
  transition: min-height .7s var(--ease);
}
.prow__name { font: 500 clamp(32px, 3.6vw, 62px)/1.05 var(--f-display); letter-spacing: -.03em; color: var(--mute); margin: 0; transition: color .45s; }
.prow__btn {
  justify-self: end; align-self: start; display: inline-flex; gap: 12px; align-items: center; white-space: nowrap; margin-top: .5em;
  font-size: 12px; border: 1px solid var(--mute-2); padding: 9px 13px; color: var(--mute); transition: color .3s, border-color .3s, background .3s;
}
.prow__btn:hover { background: var(--ink); color: var(--paper) !important; }
.prow__media {
  position: absolute; right: 0; top: clamp(14px, 1.4vw, 22px); width: var(--media-w); aspect-ratio: 3 / 2; margin: 0;
  overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); background: var(--paper-2);
}
.prow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease-out); }
.prow__meta { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.prow__meta > div { overflow: hidden; }
.prow__meta dl { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 56px); margin: clamp(30px, 4vw, 64px) 0 0; opacity: 0; transition: opacity .5s; }
.prow__meta dt { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.prow__meta dd { margin: 0; font-size: 13px; }
.prow__meta p { margin: 16px 0 0; max-width: 46ch; font-size: 14px; color: var(--ink-2); opacity: 0; transition: opacity .5s; }
.prow.is-active { min-height: calc((100vw - 2 * var(--gutter)) * .31 * .6667 + 2 * clamp(14px, 1.4vw, 22px)); }
.prow.is-active .prow__name { color: var(--accent); }
.prow.is-active .prow__btn { color: var(--ink); border-color: var(--ink); }
.prow.is-active .prow__media { clip-path: inset(0 0 0 0); }
.prow.is-active .prow__media img { transform: none; }
.prow.is-active .prow__meta { grid-template-rows: 1fr; }
.prow.is-active .prow__meta dl, .prow.is-active .prow__meta p { opacity: 1; transition-delay: .2s; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--ink); padding: 12px 18px; font-size: 13px; transition: background .3s, color .3s; }
.btn i { font-style: normal; transition: transform .35s var(--ease-out); }
.btn:hover i { transform: translateX(4px); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--accent); border-color: var(--accent); }
.btn--white { background: #f0efe9; color: #0e0e0e; border-color: #f0efe9; }
.btn--white:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Lab — a turning ring of work on black, after cipher.tv (dark in both themes) */
.lab {
  position: relative; overflow: hidden; min-height: max(100svh, 760px);
  background: #050505; color: #f0efe9;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  padding: clamp(70px, 8vw, 120px) var(--gutter) clamp(40px, 5vw, 70px);
}
.lab__head, .lab__copy, .lab__now, .lab__hint { position: relative; z-index: 2; pointer-events: none; }
.lab__head .h-xl { margin: 0; color: #f0efe9; }
.lab__label { color: #8b8a85; margin: 0 0 16px; }
.lab__copy { grid-row: 3; align-self: end; max-width: 430px; }
.lab__copy p { margin: 0 0 14px; font-size: clamp(14px, 1vw, 16px); color: #bdbbb4; }
.lab__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; pointer-events: auto; }
.btn--bone { background: #f0efe9; color: #0e0e0e; border-color: #f0efe9; }
.btn--bone:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { color: #f0efe9; border-color: rgba(240, 239, 233, .35); }
.btn--ghost:hover { background: #f0efe9; color: #0e0e0e; }
.lab__now { position: absolute; left: 64%; bottom: clamp(40px, 5vw, 70px); transform: translateX(-50%); margin: 0; color: #f0efe9; font-size: 11px; white-space: nowrap; }
.lab__hint { position: absolute; right: var(--gutter); bottom: clamp(40px, 5vw, 70px); margin: 0; color: #6f6e69; font-size: 10px; }

.lab__ring { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 64% 46%; z-index: 1; }
.lab__ring-inner { position: absolute; left: 64%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; }
.rcard {
  position: absolute; left: 0; top: 0; width: var(--cw, 220px); aspect-ratio: 16 / 10; margin: calc(var(--cw, 220px) * -.31) 0 0 calc(var(--cw, 220px) * -.5);
  overflow: hidden; background: #121212; cursor: none; will-change: transform; backface-visibility: hidden;
  transition: opacity .45s, filter .45s;
}
.rcard img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; transition: transform .6s var(--ease-out); }
.lab.has-focus .rcard { opacity: .38; filter: grayscale(.6); }
.lab.has-focus .rcard.is-focus { opacity: 1; filter: none; }
.rcard.is-focus img { transform: scale(1.06); }

.lab__cursor {
  position: absolute; left: 0; top: 0; z-index: 3; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  border: 1px solid rgba(240, 239, 233, .85); color: #f0efe9; font-size: 10px; letter-spacing: .12em;
  transform: translate(-50%, -50%) scale(0); transition: transform .35s var(--ease-out);
  backdrop-filter: blur(6px); background: rgba(5, 5, 5, .25);
}
.lab__cursor.on { transform: translate(-50%, -50%) scale(1); }

/* Skillset */
.skills { padding: clamp(60px, 8vw, 140px) var(--gutter) clamp(80px, 10vw, 160px); }
.slist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.slist li { display: grid; grid-template-columns: 70px 1fr 1fr 150px; gap: 20px; align-items: baseline; border-bottom: 1px solid var(--line); padding: clamp(22px, 2.4vw, 40px) 0; transition: padding .5s var(--ease-out); }
.slist li:hover { padding-left: 14px; }
.slist .mono { color: var(--mute); }
.slist h3 { margin: 0; font: 500 clamp(26px, 2.8vw, 48px)/1.05 var(--f-display); letter-spacing: -.025em; transition: color .3s; }
.slist li:hover h3 { color: var(--accent); }
.slist p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.skills__foot { margin-top: clamp(60px, 7vw, 110px); }
.arrowbox { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--ink-2); font-size: 14px; margin-bottom: 22px; }
.skills__foot p { max-width: 24ch; font-size: 15px; margin: 0; }

/* ASCII touches */
.ascii-lens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.slist__ascii {
  margin: 0; justify-self: end; align-self: center; font: 400 10px/1.15 var(--f-mono); color: var(--mute-2);
  clip-path: inset(0 0 0 0); transition: color .3s;
}
.slist li:hover .slist__ascii { color: var(--accent); animation: ascii-type .7s steps(7) both; }
@keyframes ascii-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.loader__count { font-size: 11px; letter-spacing: .04em; }

/* Speaking */
.talks { padding: clamp(40px, 6vw, 100px) var(--gutter) clamp(80px, 10vw, 160px); }
.talks__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; margin-bottom: clamp(30px, 4vw, 60px); }
.talks__intro p { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.15vw, 18px); color: var(--ink-2); }
.talks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.talk { padding: clamp(22px, 2.4vw, 36px) clamp(0px, 2vw, 32px) clamp(22px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--line); }
.talk:nth-child(odd) { border-right: 1px solid var(--line); }
.talk:nth-child(even) { padding-left: clamp(16px, 2vw, 32px); }
.talk .mono { color: var(--accent); }
.talk h3 { margin: 10px 0 10px; font: 500 clamp(22px, 2vw, 34px)/1.1 var(--f-display); letter-spacing: -.02em; }
.talk p { margin: 0; color: var(--ink-2); max-width: 46ch; }

/* FAQ */
.faq { padding: clamp(40px, 6vw, 100px) var(--gutter) clamp(80px, 10vw, 160px); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: clamp(18px, 2vw, 28px) 0; font: 500 clamp(20px, 2vw, 32px)/1.15 var(--f-display); letter-spacing: -.02em; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '[+]'; font: 400 12px var(--f-mono); color: var(--mute); }
.faq details[open] summary::after { content: '[–]'; color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 0 0 clamp(20px, 2vw, 30px); max-width: 68ch; color: var(--ink-2); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; }
.faq__pl { margin-top: clamp(50px, 6vw, 90px); }
.faq__pl .label { margin: 0 0 16px; }
.faq__pl summary { font-size: clamp(18px, 1.6vw, 26px); }

/* Contact */
.contact { position: relative; padding: clamp(60px, 8vw, 140px) var(--gutter); overflow: hidden; background: var(--night); }
.contact__bg { position: absolute; inset: -10% 0; }
.contact__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.7); will-change: transform; }
.contact__card { position: relative; max-width: 760px; margin: 0 auto; background: #0d0d0d; color: var(--bone); padding: clamp(26px, 4vw, 56px); }
.contact__card .label { color: #8d8c86; }
.contact__title { font: 500 clamp(42px, 5.6vw, 88px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin: 14px 0 14px; }
.contact__alt { font-size: 14px; color: #9a9993; margin: 0 0 34px; }
.contact__alt a { color: var(--bone); border-bottom: 1px solid #555; padding-bottom: 2px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.form label { display: grid; gap: 8px; }
.form input, .form select, .form textarea {
  font: 15px var(--f-body); color: var(--bone); background: transparent; border: 0; border-bottom: 1px solid #3a3a38;
  padding: 6px 0 10px; outline: none; border-radius: 0; resize: vertical; transition: border-color .3s;
}
.form select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23999'/%3E%3C/svg%3E") no-repeat right 4px center; }
.form select option { color: var(--ink); }
.form input::placeholder, .form textarea::placeholder { color: #5f5e5a; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--bone); }
.form input.err { border-color: var(--accent); }
.form__full { grid-column: 1 / -1; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.form__note { color: #77766f; font-size: 10px; margin: 0; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.contact__socials { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contact__socials a { font: 400 11px var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: #9a9993; border-bottom: 1px solid #3a3a38; padding-bottom: 2px; }
.contact__socials a:hover { color: #f0efe9; }

/* Footer */
.foot { background: var(--foot-bg); color: var(--foot-fg); padding: clamp(50px, 7vw, 110px) var(--gutter) 28px; overflow: hidden; }
.foot__mark { display: inline-block; font: 500 10vw/.9 var(--f-display); letter-spacing: -.03em; margin: 0; white-space: nowrap; }
.foot__mark sup { font-size: .55em; vertical-align: .32em; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-top: clamp(36px, 4vw, 60px); }
.foot__claim { font: 500 clamp(22px, 2.1vw, 34px)/1.15 var(--f-display); text-transform: uppercase; margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 26px; max-width: 520px; justify-content: flex-end; align-content: start; }
.foot__links a { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; position: relative; }
.foot__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.foot__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot__copy { margin: clamp(40px, 5vw, 70px) 0 0; font-size: 13px; color: var(--foot-mute); }

/* ───────── Responsive ───────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 80px; gap: 28px; }
  .hero__copy { padding: 6vh 0 0; }
  .hero__title { font-size: clamp(56px, 16vw, 120px); }
  .hero { min-height: 100svh; padding-bottom: 0; gap: 8px; grid-template-rows: auto 1fr; }
  .hero__media { height: auto; min-height: 105vw; overflow: hidden; display: block; }
  .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% 100%; }
  .hero__ascii { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 60%); mask-image: linear-gradient(180deg, transparent 30%, #000 60%); }
    .clients { grid-template-columns: 1fr; }
  .clients__pic { display: none; }
  .prow { padding-right: 0; }
  .prow.is-active { min-height: 0; }
  .prow__media { position: relative; top: auto; grid-column: 1 / -1; width: 100%; height: 0; aspect-ratio: auto; transition: clip-path .8s var(--ease), height .7s var(--ease), margin .7s var(--ease); }
  .prow.is-active .prow__media { height: 56vw; margin-top: 18px; }
  .prow__btn { padding: 8px 10px; }
  .prow__btn span { display: none; }
  .lab { min-height: 0; grid-template-rows: auto auto auto; }
  .lab__ring { position: relative; inset: auto; grid-row: 2; height: min(110vw, 460px); margin: 10px calc(var(--gutter) * -1) 20px; perspective-origin: 50% 50%; }
  .lab__ring-inner { left: 50%; top: 50%; }
  .lab__head { grid-row: 1; }
  .lab__now { position: relative; left: auto; bottom: auto; transform: none; grid-row: 3; margin: 0 0 18px; white-space: normal; }
  .lab__copy { grid-row: 4; }
  .lab__hint { display: none; }
  .slist li { grid-template-columns: 44px 1fr; }
  .slist p { grid-column: 2; }
  .slist__ascii { display: none; }
  .talks__intro { grid-template-columns: 1fr; }
  .talks__list { grid-template-columns: 1fr; }
  .talk:nth-child(odd) { border-right: 0; }
  .talk:nth-child(even) { padding-left: 0; }
  .form { grid-template-columns: 1fr; }
  .edge-tab { display: none; }
}
@media (max-width: 520px) {
  .prow__meta dl { gap: 14px 22px; }
}