/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-xl: 36rem;
  --container-5xl: 64rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;
  --leading-relaxed: 1.625;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --font-poppins: Poppins, ui-sans-serif, system-ui, sans-serif;
  --color-paper: #d4d4d0;
  --color-cream: #eeeeeb;
  --color-ink: #111111;
}
*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp, pre {
  font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  font-feature-settings: var(--default-mono-font-feature-settings, normal);
  font-variation-settings: var(--default-mono-font-variation-settings, normal);
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:-moz-focusring {
  outline: auto;
}
progress {
  vertical-align: baseline;
}
summary {
  display: list-item;
}
ol, ul, menu {
  list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video {
  max-width: 100%;
  height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}
::file-selector-button {
  margin-inline-end: 4px;
}
::placeholder {
  opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: currentcolor;
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }
}
textarea {
  resize: vertical;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}
::-webkit-datetime-edit {
  display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}
:-moz-ui-invalid {
  box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
  appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}
.pointer-events-none {
  pointer-events: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.top-3 {
  top: calc(var(--spacing) * 3);
}
.top-24 {
  top: calc(var(--spacing) * 24);
}
.top-\[10\%\] {
  top: 10%;
}
.top-\[27\%\] {
  top: 27%;
}
.top-\[104px\] {
  top: 104px;
}
.right-0 {
  right: calc(var(--spacing) * 0);
}
.right-2 {
  right: calc(var(--spacing) * 2);
}
.right-3 {
  right: calc(var(--spacing) * 3);
}
.right-5 {
  right: calc(var(--spacing) * 5);
}
.right-\[-7vw\] {
  right: -7vw;
}
.right-\[4vw\] {
  right: 4vw;
}
.right-\[clamp\(18px\,3vw\,48px\)\] {
  right: clamp(18px, 3vw, 48px);
}
.bottom-0 {
  bottom: calc(var(--spacing) * 0);
}
.bottom-5 {
  bottom: calc(var(--spacing) * 5);
}
.bottom-7 {
  bottom: calc(var(--spacing) * 7);
}
.bottom-\[118px\] {
  bottom: 118px;
}
.left-1\/2 {
  left: calc(1/2 * 100%);
}
.left-3 {
  left: calc(var(--spacing) * 3);
}
.left-\[4vw\] {
  left: 4vw;
}
.left-\[clamp\(18px\,3vw\,48px\)\] {
  left: clamp(18px, 3vw, 48px);
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[4\] {
  z-index: 4;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[210\] {
  z-index: 210;
}
.z-\[300\] {
  z-index: 300;
}
.z-\[1000\] {
  z-index: 1000;
}
.col-span-full {
  grid-column: 1 / -1;
}
.m-0 {
  margin: calc(var(--spacing) * 0);
}
.my-\[12vh\] {
  margin-block: 12vh;
}
.-mt-1 {
  margin-top: calc(var(--spacing) * -1);
}
.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}
.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}
.mt-16 {
  margin-top: calc(var(--spacing) * 16);
}
.mt-20 {
  margin-top: calc(var(--spacing) * 20);
}
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}
.mb-10 {
  margin-bottom: calc(var(--spacing) * 10);
}
.mb-12 {
  margin-bottom: calc(var(--spacing) * 12);
}
.mb-16 {
  margin-bottom: calc(var(--spacing) * 16);
}
.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}
.ml-\[5vw\] {
  margin-left: 5vw;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}
.h-7 {
  height: calc(var(--spacing) * 7);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-12 {
  height: calc(var(--spacing) * 12);
}
.h-14 {
  height: calc(var(--spacing) * 14);
}
.h-20 {
  height: calc(var(--spacing) * 20);
}
.h-\[2px\] {
  height: 2px;
}
.h-\[152px\] {
  height: 152px;
}
.h-full {
  height: 100%;
}
.max-h-\[58svh\] {
  max-height: 58svh;
}
.min-h-52 {
  min-height: calc(var(--spacing) * 52);
}
.min-h-\[720px\] {
  min-height: 720px;
}
.min-h-svh {
  min-height: 100svh;
}
.w-0 {
  width: calc(var(--spacing) * 0);
}
.w-1\.5 {
  width: calc(var(--spacing) * 1.5);
}
.w-7 {
  width: calc(var(--spacing) * 7);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-9 {
  width: calc(var(--spacing) * 9);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-\[94vw\] {
  width: 94vw;
}
.w-\[min\(78vw\,390px\)\] {
  width: min(78vw, 390px);
}
.w-\[min\(92vw\,360px\)\] {
  width: min(92vw, 360px);
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.max-w-5xl {
  max-width: var(--container-5xl);
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-xl {
  max-width: var(--container-xl);
}
.origin-top {
  transform-origin: top;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-4 {
  --tw-translate-y: calc(var(--spacing) * 4);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-y-0 {
  --tw-scale-y: 0%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.rotate-180 {
  rotate: 180deg;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}
.grid-cols-\[auto_1fr_auto\] {
  grid-template-columns: auto 1fr auto;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-5 {
  gap: calc(var(--spacing) * 5);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
.gap-8 {
  gap: calc(var(--spacing) * 8);
}
.gap-10 {
  gap: calc(var(--spacing) * 10);
}
.gap-px {
  gap: 1px;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-clip {
  overflow-x: clip;
}
.scroll-smooth {
  scroll-behavior: smooth;
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-y {
  border-block-style: var(--tw-border-style);
  border-block-width: 1px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-l-2 {
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
}
.border-black {
  border-color: var(--color-black);
}
.border-black\/10 {
  border-color: color-mix(in srgb, #000 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
}
.border-black\/15 {
  border-color: color-mix(in srgb, #000 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-black) 15%, transparent);
  }
}
.border-black\/20 {
  border-color: color-mix(in srgb, #000 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-black) 20%, transparent);
  }
}
.border-current\/25 {
  border-color: currentcolor;
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, currentcolor 25%, transparent);
  }
}
.border-white\/15 {
  border-color: color-mix(in srgb, #fff 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
  }
}
.border-white\/20 {
  border-color: color-mix(in srgb, #fff 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  }
}
.bg-\[\#171717\] {
  background-color: #171717;
}
.bg-black\/5 {
  background-color: color-mix(in srgb, #000 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
  }
}
.bg-black\/15 {
  background-color: color-mix(in srgb, #000 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 15%, transparent);
  }
}
.bg-cream {
  background-color: var(--color-cream);
}
.bg-current {
  background-color: currentcolor;
}
.bg-ink {
  background-color: var(--color-ink);
}
.bg-ink\/90 {
  background-color: color-mix(in srgb, #111111 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-ink) 90%, transparent);
  }
}
.bg-paper {
  background-color: var(--color-paper);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-white\/5 {
  background-color: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
}
.bg-white\/15 {
  background-color: color-mix(in srgb, #fff 15%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
  }
}
.bg-white\/25 {
  background-color: color-mix(in srgb, #fff 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
  }
}
.bg-white\/55 {
  background-color: color-mix(in srgb, #fff 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 55%, transparent);
  }
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-bottom {
  object-position: bottom;
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-6 {
  padding: calc(var(--spacing) * 6);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-\[clamp\(18px\,3vw\,48px\)\] {
  padding-inline: clamp(18px, 3vw, 48px);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-5 {
  padding-block: calc(var(--spacing) * 5);
}
.py-6 {
  padding-block: calc(var(--spacing) * 6);
}
.py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.pt-5 {
  padding-top: calc(var(--spacing) * 5);
}
.pt-8 {
  padding-top: calc(var(--spacing) * 8);
}
.pt-10 {
  padding-top: calc(var(--spacing) * 10);
}
.pt-28 {
  padding-top: calc(var(--spacing) * 28);
}
.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}
.pb-6 {
  padding-bottom: calc(var(--spacing) * 6);
}
.pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}
.pb-14 {
  padding-bottom: calc(var(--spacing) * 14);
}
.pb-24 {
  padding-bottom: calc(var(--spacing) * 24);
}
.pl-5 {
  padding-left: calc(var(--spacing) * 5);
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: var(--font-mono);
}
.font-poppins {
  font-family: var(--font-poppins);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[clamp\(18px\,2vw\,30px\)\] {
  font-size: clamp(18px, 2vw, 30px);
}
.text-\[clamp\(22px\,4vw\,54px\)\] {
  font-size: clamp(22px, 4vw, 54px);
}
.text-\[clamp\(24px\,3vw\,42px\)\] {
  font-size: clamp(24px, 3vw, 42px);
}
.text-\[clamp\(28px\,3vw\,46px\)\] {
  font-size: clamp(28px, 3vw, 46px);
}
.text-\[clamp\(30px\,3vw\,44px\)\] {
  font-size: clamp(30px, 3vw, 44px);
}
.text-\[clamp\(30px\,4\.8vw\,72px\)\] {
  font-size: clamp(30px, 4.8vw, 72px);
}
.text-\[clamp\(34px\,4vw\,54px\)\] {
  font-size: clamp(34px, 4vw, 54px);
}
.text-\[clamp\(34px\,5vw\,72px\)\] {
  font-size: clamp(34px, 5vw, 72px);
}
.text-\[clamp\(50px\,14vw\,82px\)\] {
  font-size: clamp(50px, 14vw, 82px);
}
.text-\[clamp\(56px\,11vw\,160px\)\] {
  font-size: clamp(56px, 11vw, 160px);
}
.text-\[clamp\(64px\,12vw\,180px\)\] {
  font-size: clamp(64px, 12vw, 180px);
}
.text-\[clamp\(64px\,13vw\,190px\)\] {
  font-size: clamp(64px, 13vw, 190px);
}
.text-\[clamp\(70px\,21vw\,120px\)\] {
  font-size: clamp(70px, 21vw, 120px);
}
.text-\[clamp\(88px\,17vw\,260px\)\] {
  font-size: clamp(88px, 17vw, 260px);
}
.leading-6 {
  --tw-leading: calc(var(--spacing) * 6);
  line-height: calc(var(--spacing) * 6);
}
.leading-7 {
  --tw-leading: calc(var(--spacing) * 7);
  line-height: calc(var(--spacing) * 7);
}
.leading-\[\.8\] {
  --tw-leading: .8;
  line-height: .8;
}
.leading-\[\.72\] {
  --tw-leading: .72;
  line-height: .72;
}
.leading-\[\.76\] {
  --tw-leading: .76;
  line-height: .76;
}
.leading-\[\.77\] {
  --tw-leading: .77;
  line-height: .77;
}
.leading-\[\.78\] {
  --tw-leading: .78;
  line-height: .78;
}
.leading-\[\.82\] {
  --tw-leading: .82;
  line-height: .82;
}
.leading-\[\.88\] {
  --tw-leading: .88;
  line-height: .88;
}
.leading-\[\.92\] {
  --tw-leading: .92;
  line-height: .92;
}
.leading-\[\.95\] {
  --tw-leading: .95;
  line-height: .95;
}
.leading-\[\.98\] {
  --tw-leading: .98;
  line-height: .98;
}
.leading-\[1\.05\] {
  --tw-leading: 1.05;
  line-height: 1.05;
}
.leading-\[1\.15\] {
  --tw-leading: 1.15;
  line-height: 1.15;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-\[-\.03em\] {
  --tw-tracking: -.03em;
  letter-spacing: -.03em;
}
.tracking-\[-\.04em\] {
  --tw-tracking: -.04em;
  letter-spacing: -.04em;
}
.tracking-\[-\.06em\] {
  --tw-tracking: -.06em;
  letter-spacing: -.06em;
}
.tracking-\[-\.025em\] {
  --tw-tracking: -.025em;
  letter-spacing: -.025em;
}
.tracking-\[-\.035em\] {
  --tw-tracking: -.035em;
  letter-spacing: -.035em;
}
.tracking-\[-\.045em\] {
  --tw-tracking: -.045em;
  letter-spacing: -.045em;
}
.tracking-\[-\.055em\] {
  --tw-tracking: -.055em;
  letter-spacing: -.055em;
}
.tracking-\[\.1em\] {
  --tw-tracking: .1em;
  letter-spacing: .1em;
}
.tracking-\[\.04em\] {
  --tw-tracking: .04em;
  letter-spacing: .04em;
}
.tracking-\[\.08em\] {
  --tw-tracking: .08em;
  letter-spacing: .08em;
}
.tracking-\[\.13em\] {
  --tw-tracking: .13em;
  letter-spacing: .13em;
}
.text-black {
  color: var(--color-black);
}
.text-black\/45 {
  color: color-mix(in srgb, #000 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 45%, transparent);
  }
}
.text-black\/50 {
  color: color-mix(in srgb, #000 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
}
.text-black\/55 {
  color: color-mix(in srgb, #000 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 55%, transparent);
  }
}
.text-black\/58 {
  color: color-mix(in srgb, #000 58%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 58%, transparent);
  }
}
.text-black\/65 {
  color: color-mix(in srgb, #000 65%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 65%, transparent);
  }
}
.text-black\/68 {
  color: color-mix(in srgb, #000 68%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-black) 68%, transparent);
  }
}
.text-cream {
  color: var(--color-cream);
}
.text-ink {
  color: var(--color-ink);
}
.text-white {
  color: var(--color-white);
}
.text-white\/45 {
  color: color-mix(in srgb, #fff 45%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 45%, transparent);
  }
}
.text-white\/55 {
  color: color-mix(in srgb, #fff 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 55%, transparent);
  }
}
.text-white\/60 {
  color: color-mix(in srgb, #fff 60%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-white) 60%, transparent);
  }
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0 {
  opacity: 0%;
}
.opacity-35 {
  opacity: 35%;
}
.opacity-50 {
  opacity: 50%;
}
.mix-blend-difference {
  mix-blend-mode: difference;
}
.shadow-soft {
  --tw-shadow: 0 18px 50px var(--tw-shadow-color, rgba(17,17,17,.08));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.backdrop-blur-lg {
  --tw-backdrop-blur: blur(var(--blur-lg));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(var(--blur-md));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(var(--blur-xl));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.duration-500 {
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.duration-1000 {
  --tw-duration: 1000ms;
  transition-duration: 1000ms;
}
.ease-\[cubic-bezier\(\.76\,0\,\.16\,1\)\] {
  --tw-ease: cubic-bezier(.76,0,.16,1);
  transition-timing-function: cubic-bezier(.76,0,.16,1);
}
.\[writing-mode\:vertical-rl\] {
  writing-mode: vertical-rl;
}
.group-hover\:scale-\[1\.025\] {
  &:is(:where(.group):hover *) {
    @media (hover: hover) {
      scale: 1.025;
    }
  }
}
.selection\:bg-ink {
  & *::selection {
    background-color: var(--color-ink);
  }
  &::selection {
    background-color: var(--color-ink);
  }
}
.selection\:text-cream {
  & *::selection {
    color: var(--color-cream);
  }
  &::selection {
    color: var(--color-cream);
  }
}
.hover\:-translate-y-0\.5 {
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.hover\:-translate-y-1 {
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.hover\:bg-cream {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-cream);
    }
  }
}
.hover\:bg-current {
  &:hover {
    @media (hover: hover) {
      background-color: currentcolor;
    }
  }
}
.hover\:bg-white\/45 {
  &:hover {
    @media (hover: hover) {
      background-color: color-mix(in srgb, #fff 45%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 45%, transparent);
      }
    }
  }
}
.hover\:text-ink {
  &:hover {
    @media (hover: hover) {
      color: var(--color-ink);
    }
  }
}
.hover\:text-paper {
  &:hover {
    @media (hover: hover) {
      color: var(--color-paper);
    }
  }
}
.hover\:opacity-50 {
  &:hover {
    @media (hover: hover) {
      opacity: 50%;
    }
  }
}
.sm\:top-\[23\%\] {
  @media (width >= 40rem) {
    top: 23%;
  }
}
.sm\:top-\[112px\] {
  @media (width >= 40rem) {
    top: 112px;
  }
}
.sm\:right-5 {
  @media (width >= 40rem) {
    right: calc(var(--spacing) * 5);
  }
}
.sm\:right-\[1vw\] {
  @media (width >= 40rem) {
    right: 1vw;
  }
}
.sm\:right-\[4vw\] {
  @media (width >= 40rem) {
    right: 4vw;
  }
}
.sm\:bottom-10 {
  @media (width >= 40rem) {
    bottom: calc(var(--spacing) * 10);
  }
}
.sm\:bottom-12 {
  @media (width >= 40rem) {
    bottom: calc(var(--spacing) * 12);
  }
}
.sm\:left-5 {
  @media (width >= 40rem) {
    left: calc(var(--spacing) * 5);
  }
}
.sm\:left-auto {
  @media (width >= 40rem) {
    left: auto;
  }
}
.sm\:ml-\[7vw\] {
  @media (width >= 40rem) {
    margin-left: 7vw;
  }
}
.sm\:block {
  @media (width >= 40rem) {
    display: block;
  }
}
.sm\:flex {
  @media (width >= 40rem) {
    display: flex;
  }
}
.sm\:h-16 {
  @media (width >= 40rem) {
    height: calc(var(--spacing) * 16);
  }
}
.sm\:max-h-\[68svh\] {
  @media (width >= 40rem) {
    max-height: 68svh;
  }
}
.sm\:min-h-\[760px\] {
  @media (width >= 40rem) {
    min-height: 760px;
  }
}
.sm\:w-\[min\(48vw\,430px\)\] {
  @media (width >= 40rem) {
    width: min(48vw, 430px);
  }
}
.sm\:w-auto {
  @media (width >= 40rem) {
    width: auto;
  }
}
.sm\:min-w-\[170px\] {
  @media (width >= 40rem) {
    min-width: 170px;
  }
}
.sm\:min-w-\[190px\] {
  @media (width >= 40rem) {
    min-width: 190px;
  }
}
.sm\:grid-flow-col {
  @media (width >= 40rem) {
    grid-auto-flow: column;
  }
}
.sm\:grid-cols-2 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sm\:grid-cols-3 {
  @media (width >= 40rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.sm\:grid-cols-\[1fr_auto_1fr_auto_1fr_auto_1fr\] {
  @media (width >= 40rem) {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  }
}
.sm\:grid-cols-none {
  @media (width >= 40rem) {
    grid-template-columns: none;
  }
}
.sm\:flex-col {
  @media (width >= 40rem) {
    flex-direction: column;
  }
}
.sm\:px-5 {
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 5);
  }
}
.sm\:px-6 {
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
}
.sm\:text-center {
  @media (width >= 40rem) {
    text-align: center;
  }
}
.sm\:text-right {
  @media (width >= 40rem) {
    text-align: right;
  }
}
.sm\:text-\[9px\] {
  @media (width >= 40rem) {
    font-size: 9px;
  }
}
.sm\:text-\[11px\] {
  @media (width >= 40rem) {
    font-size: 11px;
  }
}
.sm\:text-\[15px\] {
  @media (width >= 40rem) {
    font-size: 15px;
  }
}
.sm\:text-\[clamp\(68px\,10vw\,112px\)\] {
  @media (width >= 40rem) {
    font-size: clamp(68px, 10vw, 112px);
  }
}
.sm\:text-\[clamp\(94px\,16vw\,168px\)\] {
  @media (width >= 40rem) {
    font-size: clamp(94px, 16vw, 168px);
  }
}
.md\:flex {
  @media (width >= 48rem) {
    display: flex;
  }
}
.md\:grid-cols-2 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.md\:grid-cols-4 {
  @media (width >= 48rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lg\:top-\[20\%\] {
  @media (width >= 64rem) {
    top: 20%;
  }
}
.lg\:right-\[3vw\] {
  @media (width >= 64rem) {
    right: 3vw;
  }
}
.lg\:right-\[5vw\] {
  @media (width >= 64rem) {
    right: 5vw;
  }
}
.lg\:left-\[3vw\] {
  @media (width >= 64rem) {
    left: 3vw;
  }
}
.lg\:ml-\[8vw\] {
  @media (width >= 64rem) {
    margin-left: 8vw;
  }
}
.lg\:block {
  @media (width >= 64rem) {
    display: block;
  }
}
.lg\:h-svh {
  @media (width >= 64rem) {
    height: 100svh;
  }
}
.lg\:max-h-\[78svh\] {
  @media (width >= 64rem) {
    max-height: 78svh;
  }
}
.lg\:min-h-\[700px\] {
  @media (width >= 64rem) {
    min-height: 700px;
  }
}
.lg\:w-\[min\(31vw\,500px\)\] {
  @media (width >= 64rem) {
    width: min(31vw, 500px);
  }
}
.lg\:grid-cols-2 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lg\:grid-cols-4 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lg\:grid-cols-\[\.35fr_1fr\] {
  @media (width >= 64rem) {
    grid-template-columns: .35fr 1fr;
  }
}
.lg\:grid-cols-\[\.72fr_1\.28fr\] {
  @media (width >= 64rem) {
    grid-template-columns: .72fr 1.28fr;
  }
}
.lg\:grid-cols-\[1\.2fr_\.8fr\] {
  @media (width >= 64rem) {
    grid-template-columns: 1.2fr .8fr;
  }
}
.lg\:grid-cols-\[1\.15fr_\.85fr\] {
  @media (width >= 64rem) {
    grid-template-columns: 1.15fr .85fr;
  }
}
.lg\:items-end {
  @media (width >= 64rem) {
    align-items: flex-end;
  }
}
.lg\:gap-7 {
  @media (width >= 64rem) {
    gap: calc(var(--spacing) * 7);
  }
}
.lg\:gap-20 {
  @media (width >= 64rem) {
    gap: calc(var(--spacing) * 20);
  }
}
.lg\:justify-self-end {
  @media (width >= 64rem) {
    justify-self: flex-end;
  }
}
.lg\:p-8 {
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 8);
  }
}
.lg\:px-\[3vw\] {
  @media (width >= 64rem) {
    padding-inline: 3vw;
  }
}
.lg\:pt-32 {
  @media (width >= 64rem) {
    padding-top: calc(var(--spacing) * 32);
  }
}
.lg\:pb-28 {
  @media (width >= 64rem) {
    padding-bottom: calc(var(--spacing) * 28);
  }
}
.lg\:pb-32 {
  @media (width >= 64rem) {
    padding-bottom: calc(var(--spacing) * 32);
  }
}
.lg\:text-\[clamp\(78px\,8\.8vw\,148px\)\] {
  @media (width >= 64rem) {
    font-size: clamp(78px, 8.8vw, 148px);
  }
}
.lg\:text-\[clamp\(112px\,13\.4vw\,220px\)\] {
  @media (width >= 64rem) {
    font-size: clamp(112px, 13.4vw, 220px);
  }
}
.xl\:inline {
  @media (width >= 80rem) {
    display: inline;
  }
}
.xl\:grid-cols-4 {
  @media (width >= 80rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.xl\:grid-cols-6 {
  @media (width >= 80rem) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}


/* Tailwind homepage custom layer — only effects that are awkward as utilities. */
html, body { min-height: 100%; }
body { cursor: none; }
a, button { cursor: none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.preloader.hide { transform: translateY(-110%); pointer-events:none; }

.brand-logo {
  display:block;
  width:34px;
  height:32px;
  background:url('assets/logodaffazle-mark.png') center/contain no-repeat;
  transition:filter .18s ease, opacity .18s ease;
}
.brand-logo--preloader { filter: invert(1) brightness(2); }
html.nav-on-dark .topbar {
  color:#eee;
  background:rgba(17,17,17,.62);
  border-color:rgba(255,255,255,.14);
}
html.nav-on-dark .topbar .brand-logo { filter:invert(1) brightness(2); }
html.nav-on-light .topbar .brand-logo { filter:none; }
html.nav-on-dark .scroll-progress { color:#eee; background:rgba(255,255,255,.16); }

.spotify-player.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }

.cursor { position:fixed; z-index:900; left:0; top:0; pointer-events:none; will-change:transform; }
.cursor-core,.cursor-ring,.cursor-word { position:absolute; transform:translate(-50%,-50%); }
.cursor-core { width:5px; height:5px; border-radius:999px; background:#111; }
.cursor-ring { width:30px; height:30px; border:1px solid #111; border-radius:999px; transition:width .16s ease,height .16s ease,background .16s ease,border-color .16s ease; }
.cursor-word { width:72px; height:72px; border-radius:999px; display:grid; place-items:center; background:#eeeeeb; color:#242321; font:7px 'DM Mono',monospace; opacity:0; transition:opacity .18s ease; }
.cursor.active .cursor-ring { width:48px; height:48px; background:#eeeeeb; border-color:#eeeeeb; }
.cursor.active .cursor-core { opacity:0; }
.cursor.view .cursor-word { opacity:1; }
.cursor-trail { position:fixed; z-index:899; left:0; top:0; width:14px; height:14px; border:1px solid rgba(36,35,33,.35); border-radius:999px; pointer-events:none; will-change:transform; }
html.nav-on-dark .cursor-core { background:#eee; }
html.nav-on-dark .cursor-ring { border-color:#eee; }
html.nav-on-dark .cursor-trail { border-color:rgba(255,255,255,.35); }

/* Dynamic work rows rendered by script.js. */
.work-item {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 32px;
  align-items:center;
  min-height:clamp(132px,20vh,210px);
  border-bottom:1px solid rgba(255,255,255,.16);
  padding:22px 0;
  transition:background-color .2s ease,color .2s ease,padding .25s cubic-bezier(.2,.72,.2,1);
}
.work-item:first-child { border-top:1px solid rgba(255,255,255,.16); }
.work-item:hover,.work-item:focus-visible { background:#eeeeeb; color:#242321; padding-left:16px; padding-right:16px; }
.work-num { align-self:start; padding-top:10px; font:8px 'DM Mono',monospace; opacity:.6; }
.work-content { min-width:0; display:grid; gap:10px; }
.work-title { font-family:'Poppins',sans-serif; font-size:clamp(48px,8vw,132px); font-weight:700; line-height:.86; letter-spacing:-.045em; white-space:nowrap; overflow:hidden; text-overflow:clip; transition:translate .22s cubic-bezier(.2,.72,.2,1); }
.work-item:hover .work-title { translate:6px 0; }
.work-info { display:flex; flex-wrap:wrap; gap:4px 14px; font:8px 'DM Mono',monospace; text-transform:uppercase; opacity:.52; }
.work-info span:not(:last-child)::after { content:'•'; margin-left:14px; opacity:.55; }
.work-open { justify-self:end; font-size:22px; opacity:.55; }

/* Dynamic experience rows. */
.exp { display:grid; grid-template-columns:140px minmax(280px,.8fr) minmax(0,1.2fr); gap:28px; padding:28px 0; border-bottom:1px solid rgba(36,35,33,.18); }
.exp:first-child { border-top:1px solid rgba(36,35,33,.18); }
.exp-date { font:9px 'DM Mono',monospace; opacity:.5; }
.exp-company { font-family:'Poppins',sans-serif; font-size:clamp(24px,2.7vw,42px); font-weight:600; line-height:.98; letter-spacing:-.04em; }
.exp-role { margin-top:8px; font:8px 'DM Mono',monospace; text-transform:uppercase; opacity:.48; }
.exp-text { max-width:620px; font-size:13px; line-height:1.75; color:rgba(36,35,33,.6); }

/* Dynamic toolkit chips. */
.skill { min-height:92px; display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px; background:rgba(255,255,255,.035); transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.skill:hover { transform:translateY(-3px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.24); }
.skill-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); overflow:hidden; }
.skill-icon img { width:22px; height:22px; object-fit:contain; filter:grayscale(1) brightness(1.4); }
.skill-name { font:8px 'DM Mono',monospace; text-transform:uppercase; color:rgba(255,255,255,.72); }

@media (max-width:767px) {
  body,a,button { cursor:auto; }
  .cursor,.cursor-trail { display:none; }
  .topbar { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .work-item { grid-template-columns:26px minmax(0,1fr) 22px; min-height:118px; padding:18px 0; }
  .work-title { font-size:clamp(38px,11vw,58px); white-space:normal; line-height:.9; }
  .work-info { gap:3px 8px; font-size:7px; }
  .work-info span:not(:last-child)::after { margin-left:8px; }
  .exp { grid-template-columns:1fr; gap:8px; padding:24px 0; }
  .exp-company { font-size:clamp(26px,8vw,36px); }
  .about-flow i:nth-of-type(2), .about-flow i:nth-of-type(3) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* =========================================================
   V67 — HERO SCALE / OVERLAP / PER-WORD INVERSE
   Larger portrait + tighter stacked typography.
   Each name line blends independently so intersections
   between words and portrait visibly invert.
   ========================================================= */

.hero-name{
  mix-blend-mode:normal !important;
  width:92vw !important;
  top:24% !important;
  pointer-events:none;
}

.hero-name .hero-word{
  position:relative;
  display:block;
  width:max-content;
  max-width:94vw;
  color:#fff !important;
  mix-blend-mode:difference !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  line-height:.76 !important;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.hero-name .hero-word:nth-child(1){
  z-index:3;
}

.hero-name .hero-word:nth-child(2){
  z-index:4;
  margin-top:-1.15vw !important;
  margin-left:5.6vw !important;
}

.hero-name .hero-word:nth-child(3){
  z-index:5;
  margin-top:-.75vw !important;
  margin-left:.75vw !important;
  letter-spacing:-.038em !important;
  line-height:.80 !important;
}

/* Portrait returns to a stronger editorial scale without filling the entire hero. */
.hero-portrait{
  right:1.5vw !important;
  width:min(39vw,640px) !important;
  z-index:2 !important;
}

.hero-portrait img{
  max-height:87svh !important;
  width:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* Keep the CTA visibly in front of the larger portrait. */
.hero-actions{
  z-index:12 !important;
}

@media (min-width:1280px){
  .hero-name{
    top:18.5% !important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-18px !important;
  }
  .hero-name .hero-word:nth-child(3){
    margin-top:-10px !important;
  }
}

@media (min-width:768px) and (max-width:1279px){
  .hero-name{
    top:21% !important;
  }
  .hero-portrait{
    right:-1vw !important;
    width:min(55vw,560px) !important;
  }
  .hero-portrait img{
    max-height:78svh !important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-10px !important;
    margin-left:5vw !important;
  }
  .hero-name .hero-word:nth-child(3){
    margin-top:-6px !important;
  }
}

@media (max-width:767px){
  .hero{
    min-height:720px !important;
  }
  .hero-name{
    left:4vw !important;
    top:23% !important;
    width:96vw !important;
  }
  .hero-name .hero-word{
    line-height:.80 !important;
    letter-spacing:-.04em !important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-4px !important;
    margin-left:5vw !important;
  }
  .hero-name .hero-word:nth-child(3){
    margin-top:-1px !important;
    margin-left:.5vw !important;
  }
  .hero-portrait{
    right:-9vw !important;
    width:min(88vw,470px) !important;
  }
  .hero-portrait img{
    max-height:62svh !important;
  }
}

@media (max-width:420px){
  .hero-name{
    top:25% !important;
  }
  .hero-portrait{
    right:-14vw !important;
    width:min(94vw,440px) !important;
  }
  .hero-portrait img{
    max-height:58svh !important;
  }
}


/* V68 requested warm-black text utilities */
.text-\[\#242321\]{color:#242321}
.text-\[\#242321\]\/45{color:rgba(36,35,33,.45)}
.text-\[\#242321\]\/50{color:rgba(36,35,33,.50)}
.text-\[\#242321\]\/55{color:rgba(36,35,33,.55)}
.text-\[\#242321\]\/58{color:rgba(36,35,33,.58)}
.text-\[\#242321\]\/65{color:rgba(36,35,33,.65)}
.text-\[\#242321\]\/68{color:rgba(36,35,33,.68)}

/* =========================================================
   V68 — PRIMARY TEXT COLOR #242321
   ========================================================= */
:root{--portfolio-text:#242321}
body{color:var(--portfolio-text)}
html.nav-on-light .topbar{color:var(--portfolio-text)!important}
.hero-name .hero-word{
  color:var(--portfolio-text)!important;
  mix-blend-mode:normal!important;
}
.hero-name .hero-word:nth-child(2),
.hero-name .hero-word:nth-child(3){
  text-shadow:0 -1px 0 rgba(36,35,33,.08);
}
.work-item:hover,.work-item:focus-visible{color:var(--portfolio-text)}
.cursor-core{background:var(--portfolio-text)}
.cursor-ring{border-color:var(--portfolio-text)}
.cursor-word{color:var(--portfolio-text)}


/* =========================================================
   V69 — HERO TIGHTER / INVERSE OVERLAP / BIGGER PORTRAIT
   User request:
   - Daffa Fazly Rashidan text more compact / tighter
   - inverse feel when letters overlap
   - portrait larger
   ========================================================= */
.hero{
  isolation:isolate;
}

.hero-name{
  width:96vw !important;
  top:19.5% !important;
  left:4vw !important;
  pointer-events:none;
}

.hero-name .hero-word{
  position:relative;
  display:block;
  width:max-content;
  max-width:96vw;
  color:#ffffff !important;
  mix-blend-mode:difference !important;
  font-family:'Poppins',sans-serif !important;
  font-weight:800 !important;
  line-height:.72 !important;
  letter-spacing:-.065em !important;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.hero-name .hero-word:nth-child(1){
  position:relative;
  z-index:3;
  font-size:clamp(88px, 16vw, 245px) !important;
}
.hero-name .hero-word:nth-child(2){
  position:relative;
  z-index:4;
  margin-top:-1.55vw !important;
  margin-left:4.6vw !important;
  font-size:clamp(88px, 16vw, 245px) !important;
}
.hero-name .hero-word:nth-child(3){
  position:relative;
  z-index:5;
  margin-top:-1.15vw !important;
  margin-left:.25vw !important;
  font-size:clamp(70px, 10.2vw, 170px) !important;
  letter-spacing:-.06em !important;
  line-height:.74 !important;
}

.hero-portrait{
  right:1vw !important;
  width:min(45vw, 740px) !important;
  z-index:2 !important;
}
.hero-portrait img{
  max-height:88svh !important;
  width:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

.hero-actions{z-index:12 !important;}

@media (min-width:1280px){
  .hero-name{ top:18.5% !important; }
  .hero-name .hero-word:nth-child(2){ margin-top:-26px !important; margin-left:4.7vw !important; }
  .hero-name .hero-word:nth-child(3){ margin-top:-18px !important; }
  .hero-portrait{ right:.5vw !important; width:min(44vw,760px) !important; }
}

@media (min-width:768px) and (max-width:1279px){
  .hero-name{ top:20.5% !important; width:96vw !important; }
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){ font-size:clamp(96px, 15vw, 190px) !important; }
  .hero-name .hero-word:nth-child(3){ font-size:clamp(72px, 9vw, 128px) !important; }
  .hero-name .hero-word:nth-child(2){ margin-top:-14px !important; margin-left:5vw !important; }
  .hero-name .hero-word:nth-child(3){ margin-top:-9px !important; }
  .hero-portrait{ right:-1vw !important; width:min(50vw,560px) !important; }
  .hero-portrait img{ max-height:75svh !important; }
}

@media (max-width:767px){
  .hero{ min-height:760px !important; }
  .hero-name{ top:20% !important; width:96vw !important; }
  .hero-name .hero-word{ line-height:.78 !important; letter-spacing:-.055em !important; }
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){ font-size:clamp(68px, 18vw, 112px) !important; }
  .hero-name .hero-word:nth-child(2){ margin-top:-6px !important; margin-left:4vw !important; }
  .hero-name .hero-word:nth-child(3){ font-size:clamp(52px, 13vw, 84px) !important; margin-top:-4px !important; margin-left:.2vw !important; }
  .hero-portrait{ right:-10vw !important; width:min(96vw,520px) !important; }
  .hero-portrait img{ max-height:62svh !important; }
}

@media (max-width:420px){
  .hero-name{ top:21.5% !important; }
  .hero-portrait{ right:-13vw !important; width:min(104vw,500px) !important; }
  .hero-portrait img{ max-height:59svh !important; }
}


/* =========================================================
   V71 — EXACT #242321 + CLEAN INVERSE OVERLAP + BIG PORTRAIT
   ========================================================= */

:root{
  --portfolio-text:#242321;
}

/* "ink" remains the dark surface token. Only ink-colored TEXT changes. */
.text-ink{
  color:var(--portfolio-text)!important;
}
.hover\:text-ink:hover{
  color:var(--portfolio-text)!important;
}
html.nav-on-light .topbar{
  color:var(--portfolio-text)!important;
}

/* Hero typography: exact base color, no blend mode changing the whole word. */
.hero{
  isolation:isolate;
}
.hero-name{
  left:3.8vw!important;
  top:17.8%!important;
  width:96vw!important;
  pointer-events:none;
  mix-blend-mode:normal!important;
}
.hero-name .hero-word{
  position:relative;
  display:block;
  width:max-content;
  max-width:96vw;
  font-family:'Poppins',sans-serif!important;
  font-weight:800!important;
  color:var(--portfolio-text)!important;
  -webkit-text-fill-color:var(--portfolio-text)!important;
  mix-blend-mode:normal!important;
  letter-spacing:-.078em!important;
  line-height:.69!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* More compact editorial stack. */
.hero-name .hero-word:nth-child(1){
  z-index:3;
  font-size:clamp(98px,17vw,255px)!important;
}
.hero-name .hero-word:nth-child(2){
  z-index:4;
  margin-top:-1.82vw!important;
  margin-left:4.15vw!important;
  font-size:clamp(98px,17vw,255px)!important;

  /* The light slice is the inverse zone where FAZLY crosses DAFFA.
     Unlike mix-blend-mode on the full text, the rest stays #242321. */
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(
      to bottom,
      #eeeeeb 0 12%,
      var(--portfolio-text) 12% 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-name .hero-word:nth-child(3){
  z-index:5;
  margin-top:-1.30vw!important;
  margin-left:.10vw!important;
  font-size:clamp(76px,11vw,182px)!important;
  line-height:.72!important;
  letter-spacing:-.070em!important;

  /* Second controlled inverse zone: RASHIDAN crossing FAZLY. */
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(
      to bottom,
      #eeeeeb 0 13%,
      var(--portfolio-text) 13% 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
}

/* The portrait file is now cropped to the actual silhouette, so these
   dimensions visibly make the person larger instead of scaling empty pixels. */
.hero-portrait{
  right:1.0vw!important;
  width:min(36vw,620px)!important;
  z-index:2!important;
}
.hero-portrait img{
  width:100%!important;
  max-height:91svh!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}

/* Keep interactive buttons in front of the portrait. */
.hero-actions{
  z-index:12!important;
}

@media (min-width:1280px){
  .hero-name{
    top:17.3%!important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-28px!important;
    margin-left:4.15vw!important;
  }
  .hero-name .hero-word:nth-child(3){
    margin-top:-19px!important;
  }
  .hero-portrait{
    right:.5vw!important;
    width:min(37vw,650px)!important;
  }
}

@media (min-width:768px) and (max-width:1279px){
  .hero-name{
    top:19.5%!important;
  }
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){
    font-size:clamp(102px,15.5vw,198px)!important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-15px!important;
    margin-left:4.6vw!important;
  }
  .hero-name .hero-word:nth-child(3){
    font-size:clamp(76px,9.8vw,136px)!important;
    margin-top:-10px!important;
  }
  .hero-portrait{
    right:-1vw!important;
    width:min(47vw,560px)!important;
  }
  .hero-portrait img{
    max-height:78svh!important;
  }
}

@media (max-width:767px){
  .hero{
    min-height:760px!important;
  }
  .hero-name{
    left:4vw!important;
    top:18.5%!important;
    width:96vw!important;
  }
  .hero-name .hero-word{
    letter-spacing:-.068em!important;
    line-height:.76!important;
  }
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){
    font-size:clamp(78px,19vw,118px)!important;
  }
  .hero-name .hero-word:nth-child(2){
    margin-top:-7px!important;
    margin-left:4vw!important;
  }
  .hero-name .hero-word:nth-child(3){
    font-size:clamp(58px,14vw,88px)!important;
    margin-top:-5px!important;
  }
  .hero-portrait{
    right:-8vw!important;
    width:min(88vw,500px)!important;
  }
  .hero-portrait img{
    max-height:64svh!important;
  }
}

@media (max-width:420px){
  .hero-name{
    top:19.5%!important;
  }
  .hero-portrait{
    right:-11vw!important;
    width:min(94vw,480px)!important;
  }
  .hero-portrait img{
    max-height:61svh!important;
  }
}


/* =========================================================
   V72 — REAL INVERSE FOR FLOATING INFORMATION ON DARK SECTIONS
   Fix: the .text-ink utility on the header was keeping the floating
   information/navigation dark even when the page section is dark.
   This patch makes the whole floating information bar truly invert.
   ========================================================= */
html.nav-on-dark .topbar{
  color:#f3f3ef!important;
  background:rgba(12,12,12,.42)!important;
  border-color:rgba(255,255,255,.18)!important;
}
html.nav-on-dark .topbar::before{
  opacity:.28!important;
}
html.nav-on-dark .topbar,
html.nav-on-dark .topbar .brand,
html.nav-on-dark .topbar nav,
html.nav-on-dark .topbar nav a,
html.nav-on-dark .topbar .open,
html.nav-on-dark .topbar .open > span,
html.nav-on-dark .topbar .open i,
html.nav-on-dark .topbar .cv-trigger,
html.nav-on-dark .topbar .cv-trigger span,
html.nav-on-dark .topbar .cv-trigger b,
html.nav-on-dark .topbar .music-trigger{
  color:#f3f3ef!important;
}
html.nav-on-dark .topbar .brand-logo{
  filter:invert(1) brightness(2)!important;
  background:#f3f3ef!important;
}
html.nav-on-dark .topbar .cv-trigger,
html.nav-on-dark .topbar .music-trigger{
  border-color:rgba(243,243,239,.30)!important;
}
html.nav-on-dark .topbar .cv-trigger:hover,
html.nav-on-dark .topbar .music-trigger:hover{
  background:#f3f3ef!important;
  color:#111!important;
}

html.nav-on-light .topbar{
  color:#242321!important;
  background:rgba(246,246,242,.46)!important;
  border-color:rgba(17,17,17,.16)!important;
}
html.nav-on-light .topbar,
html.nav-on-light .topbar .brand,
html.nav-on-light .topbar nav,
html.nav-on-light .topbar nav a,
html.nav-on-light .topbar .open,
html.nav-on-light .topbar .open > span,
html.nav-on-light .topbar .open i,
html.nav-on-light .topbar .cv-trigger,
html.nav-on-light .topbar .cv-trigger span,
html.nav-on-light .topbar .cv-trigger b,
html.nav-on-light .topbar .music-trigger{
  color:#242321!important;
}
html.nav-on-light .topbar .brand-logo{
  filter:none!important;
  background:#242321!important;
}
html.nav-on-light .topbar .cv-trigger,
html.nav-on-light .topbar .music-trigger{
  border-color:rgba(36,35,33,.22)!important;
}
html.nav-on-light .topbar .cv-trigger:hover,
html.nav-on-light .topbar .music-trigger:hover{
  background:#242321!important;
  color:#eeeeeb!important;
}


/* =========================================================
   V73 — STABLE HERO + THEME-INVERSE FLOATING INFO
   Fixes regressions introduced by V71/V72:
   - no black square replacing the logo
   - no thick horizontal white bands through hero words
   - topbar/floating information still inverts on dark sections
   - hero words stay #242321 and remain tightly stacked
   ========================================================= */

/* --- Logo: preserve the actual PNG artwork. Never overwrite its background image. --- */
.topbar .brand-logo{
  display:block!important;
  background:url('assets/logodaffazle-mark.png') center/contain no-repeat!important;
  background-color:transparent!important;
  mix-blend-mode:normal!important;
}
html.nav-on-light .topbar .brand-logo{
  filter:none!important;
}
html.nav-on-dark .topbar .brand-logo{
  filter:invert(1) brightness(2)!important;
}

/* --- Floating information/topbar inversion --- */
html.nav-on-light .topbar{
  color:#242321!important;
  background:rgba(246,246,242,.48)!important;
  border-color:rgba(36,35,33,.16)!important;
  -webkit-backdrop-filter:blur(28px) saturate(145%)!important;
  backdrop-filter:blur(28px) saturate(145%)!important;
}
html.nav-on-dark .topbar{
  color:#f2f1ed!important;
  background:rgba(10,10,10,.42)!important;
  border-color:rgba(255,255,255,.18)!important;
  -webkit-backdrop-filter:blur(28px) saturate(145%)!important;
  backdrop-filter:blur(28px) saturate(145%)!important;
}
html.nav-on-light .topbar :is(a,button,span,b,i,nav,.open,.brand){color:#242321!important;}
html.nav-on-dark .topbar :is(a,button,span,b,i,nav,.open,.brand){color:#f2f1ed!important;}
html.nav-on-light .topbar .cv-trigger,
html.nav-on-light .topbar .music-trigger{border-color:rgba(36,35,33,.24)!important;}
html.nav-on-dark .topbar .cv-trigger,
html.nav-on-dark .topbar .music-trigger{border-color:rgba(242,241,237,.28)!important;}

/* --- Hero: exact base color, tight layout, no destructive blend/gradient bands. --- */
.hero-name{
  left:3.8vw!important;
  top:18.5%!important;
  width:96vw!important;
  mix-blend-mode:normal!important;
}
.hero-name .hero-word,
.hero-name .hero-word:nth-child(1),
.hero-name .hero-word:nth-child(2),
.hero-name .hero-word:nth-child(3){
  color:#242321!important;
  -webkit-text-fill-color:#242321!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
}
.hero-name .hero-word{
  letter-spacing:-.072em!important;
  line-height:.735!important;
}
.hero-name .hero-word:nth-child(1){
  font-size:clamp(96px,16.6vw,250px)!important;
}
.hero-name .hero-word:nth-child(2){
  font-size:clamp(96px,16.6vw,250px)!important;
  margin-top:-10px!important;
  margin-left:4.2vw!important;
}
.hero-name .hero-word:nth-child(3){
  font-size:clamp(74px,10.6vw,176px)!important;
  margin-top:-6px!important;
  margin-left:.1vw!important;
  letter-spacing:-.065em!important;
}

/* subtle intentional inverse notch only at the very top of the overlapping lower words */
.hero-name .hero-word:nth-child(2)::after,
.hero-name .hero-word:nth-child(3)::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:#eeeeeb;
  -webkit-text-fill-color:#eeeeeb;
  pointer-events:none;
  clip-path:inset(0 0 96.5% 0);
  z-index:1;
}
.hero-name .hero-word:nth-child(3)::after{
  clip-path:inset(0 0 97% 0);
}

/* Portrait stays large and editorial. */
.hero-portrait{
  right:.4vw!important;
  width:min(39vw,680px)!important;
  z-index:2!important;
}
.hero-portrait img{
  max-height:91svh!important;
  width:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}

@media (min-width:768px) and (max-width:1279px){
  .hero-name{top:20%!important;}
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){font-size:clamp(100px,15.2vw,194px)!important;}
  .hero-name .hero-word:nth-child(2){margin-top:-7px!important;margin-left:4.7vw!important;}
  .hero-name .hero-word:nth-child(3){font-size:clamp(74px,9.6vw,132px)!important;margin-top:-4px!important;}
  .hero-portrait{right:-1vw!important;width:min(49vw,580px)!important;}
  .hero-portrait img{max-height:78svh!important;}
}

@media (max-width:767px){
  .hero-name{top:19.5%!important;left:4vw!important;}
  .hero-name .hero-word{letter-spacing:-.062em!important;line-height:.78!important;}
  .hero-name .hero-word:nth-child(1),
  .hero-name .hero-word:nth-child(2){font-size:clamp(76px,18.5vw,116px)!important;}
  .hero-name .hero-word:nth-child(2){margin-top:-4px!important;margin-left:4vw!important;}
  .hero-name .hero-word:nth-child(3){font-size:clamp(56px,13.5vw,86px)!important;margin-top:-3px!important;}
  .hero-portrait{right:-8vw!important;width:min(90vw,510px)!important;}
  .hero-portrait img{max-height:64svh!important;}
}


/* =========================================================
   V74 — LOGO RESTORE / TRUE THEME INVERSE
   The logo is rendered as an alpha mask, so no solid square
   can replace the artwork. The mark inherits currentColor.
   ========================================================= */

.brand,
.topbar .brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:42px!important;
  height:36px!important;
  color:inherit!important;
  mix-blend-mode:normal!important;
}

.brand-logo,
.topbar .brand-logo,
.preloader-brand .brand-logo{
  display:block!important;
  width:38px!important;
  height:34px!important;

  /* solid fill is clipped by the real logo alpha */
  background-color:currentColor!important;
  background-image:none!important;

  -webkit-mask-image:url("assets/logodaffazle-mark.png")!important;
  -webkit-mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:contain!important;

  mask-image:url("assets/logodaffazle-mark.png")!important;
  mask-repeat:no-repeat!important;
  mask-position:center!important;
  mask-size:contain!important;

  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
}

/* light page -> #242321 logo */
html.nav-on-light .topbar .brand,
html.nav-on-light .topbar .brand-logo{
  color:#242321!important;
}

/* dark page -> light logo */
html.nav-on-dark .topbar .brand,
html.nav-on-dark .topbar .brand-logo{
  color:#f3f3ef!important;
}

/* fixed-theme detail pages */
.project-page:not(.majadigi-page) .topbar .brand,
.project-page:not(.majadigi-page) .topbar .brand-logo{
  color:#f3f3ef!important;
}
.majadigi-page .topbar .brand,
.majadigi-page .topbar .brand-logo,
.cert-page .topbar .brand,
.cert-page .topbar .brand-logo{
  color:#242321!important;
}

/* preloader stays light on dark */
.preloader-brand{
  display:inline-flex!important;
  align-items:center!important;
  width:42px!important;
  height:36px!important;
  color:#eeeeeb!important;
}
.preloader-brand .brand-logo{
  color:#eeeeeb!important;
}

/* V75 — prevent the legacy invert filter from darkening the white logo. */
html.nav-on-light .topbar .brand-logo{
  color:#242321!important;
  background-color:#242321!important;
  filter:none!important;
}
html.nav-on-dark .topbar .brand-logo{
  color:#fff!important;
  background-color:#fff!important;
  filter:none!important;
}

/* Compact screens: keep navigation, calls to action, and large titles in view. */
.spotify-player{max-height:calc(100dvh - 24px);bottom:max(12px,env(safe-area-inset-bottom));}
.spotify-player iframe{display:block;max-width:100%;}
@media (max-width:480px){
  .topbar{left:10px!important;right:10px!important;padding-inline:12px!important;gap:6px!important;}
  .topbar .brand{flex-shrink:0;}
  .topbar .open{min-width:0;gap:6px;}
  .topbar .cv-trigger{padding-inline:10px;}
  .hero-actions{grid-template-columns:minmax(0,1fr)!important;}
  .hero-actions a{min-width:0;}
  .hero-copy{bottom:140px!important;}
  .hero-name .hero-word:nth-child(3){font-size:clamp(38px,12vw,58px)!important;letter-spacing:-.07em!important;}
  .contact-title{font-size:clamp(42px,12vw,64px)!important;line-height:.86!important;}
  .contact-mega-cta{gap:10px;font-size:clamp(15px,4.6vw,20px)!important;}
  .contact-mega-cta i{flex:0 0 40px;width:40px;height:40px;}
  .spotify-player{left:12px!important;right:12px!important;width:auto!important;}
}
@media (max-height:520px) and (orientation:landscape){
  .spotify-player iframe{height:min(152px,38dvh);}
}