:root {
      --bg:            #FFFFFF;
      --accent:        #B81919;
      --text:          #2B2626;
      --label:         #ADADAD;
      --muted:         #8F8F8F;   /* project card category (design 0.62) */
      --icon-bg:       #E6E6E6;   /* social chip bg (design 0.902) */
      --icon:          #463F3F;   /* social glyph (design 0.36) — darkened warm gray */
      --card-border:   #E6E5E1;
      --thumb:         #E8E8E8;   /* card thumbnail backdrop (Figma "Frame 2087326791") */
      /* Inner thumbnail background: solid fill + a 0.5px hairline border inside.
         Updated to the design's #E8E8E8 (Figma "Frame 2087326791" fill). */
      --thumb-fill:    #E8E8E8;
      --thumb-border:  #E8E8E8;
      --avatar-bg:     #FFFFFF;
      --avatar-border: #D9D9D9;
      --underline:     #D1D1D1;

      /* Card/mat/tooltip surfaces — everywhere the design uses a flat white
         chip on top of the paper background (dock, thumbnails, modals). Kept
         as its own token (rather than reusing --bg) for flexibility. */
      --card-bg:         #FFFFFF;
      --card-bg-hover:   #FAFAFA;
      --hairline:        #E6E6E6;   /* thin card/divider borders (was inlined as #E6E6E6 / #ECEAE7) */
      --quote-muted:     #666666;   /* blockquote body + stat description text */
      --chip-hover-bg:   #D9D9D9;   /* social chip hover */
      --ph-icon:         #C4C4C4;   /* image-placeholder glyph */
      --cta-bg:          #1A1A1A;   /* locked case-study CTA button */
      --cta-text:        #FFFFFF;
      --cta-hover:       #000000;
      --chip-translucent: rgba(255, 255, 255, 0.85); /* modal close button over a cover image */
      --paper-bg:     #FFFFFF;  /* base the grain texture is composited onto */
      --paper-blend:  multiply;
      --paper-image:  url("/assets/common/paper-texture.jpg");
      --paper-size:   224px auto; /* Figma scalingFactor 0.35 * 640px source */

      /* Floating "chip" shadow (dock, theme toggle) — warm near-black #33240F,
         deepened for lift against the paper. */
      --dock-shadow:  0 2px 3px rgba(51, 36, 15, 0.16),
                      0 12px 22px -4px rgba(51, 36, 15, 0.20),
                      0 26px 46px -8px rgba(51, 36, 15, 0.24);
      /* Card corner-peel flap (Figma "curl-body") — light paper gradient. */
      --curl-image:   url("/assets/common/curl.svg");

      /* Hand-drawn wavy underline, inlined as a data: URI so it works when the
         file is opened directly (file://). External-file CSS masks are blocked
         under file://, which is why the underline vanished on double-click. */
      --wave: url("data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%223%22%20viewBox%3D%220%200%2064%203%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.75%200.73C0.34%200.73%200%201.07%200%201.48C0%201.89%200.34%202.23%200.75%202.23V1.48V0.73ZM0.85%201.48V2.23H1.16L1.38%202.02L0.85%201.48ZM1.61%200.86L1.72%200.12L1.61%200.86ZM1.88%200.9L1.76%201.64L1.88%200.9ZM2.14%200.94L2.03%201.68L2.14%200.94ZM2.36%200.94L2.25%200.2L2.36%200.94ZM2.89%200.86L3%201.6L2.89%200.86ZM3.11%200.85L3.2%200.11L3.11%200.85ZM3.38%200.88L3.29%201.63L3.38%200.88ZM3.64%200.91L3.55%201.66L3.64%200.91ZM3.86%200.97L3.58%201.66L3.86%200.97ZM4.61%201.26L4.44%201.99L4.61%201.26ZM4.88%201.32L5.05%200.59L4.88%201.32ZM5.14%201.38L4.96%202.11L5.14%201.38ZM5.36%201.4L5.27%200.65L5.36%201.4ZM6.11%201.35L5.88%202.07L6.11%201.35ZM6.86%201.66L6.37%202.22V2.22L6.86%201.66ZM8.14%201.84L8.52%202.48L8.14%201.84ZM8.36%201.69L7.93%201.08L8.36%201.69ZM8.89%201.32L9.32%201.93L8.89%201.32ZM9.86%201L9.21%201.37L9.86%201ZM10.39%201.94L11.04%201.57L10.39%201.94ZM10.61%202L10.03%201.53L10.61%202ZM11.14%201.35L11.72%201.82L11.14%201.35ZM11.36%201.31L10.86%201.87L11.36%201.31ZM11.89%201.79L12.39%201.24L11.89%201.79ZM12.11%201.75L11.52%201.29L12.11%201.75ZM12.86%201.03L12.33%201.56L12.86%201.03ZM13.39%201.56L13.92%201.03L13.39%201.56ZM13.61%201.59L13.18%200.98L13.61%201.59ZM14.14%201.22L14.57%201.83L14.14%201.22ZM14.36%201.25L13.85%201.79L14.36%201.25ZM14.89%201.75L15.4%201.2L14.89%201.75ZM15.86%201.26L15.8%200.52L15.86%201.26ZM16.61%201.32L16.09%201.85L16.61%201.32ZM17.14%201.83L17.66%201.29V1.29L17.14%201.83ZM18.11%201.51L18%202.26L18.11%201.51ZM18.86%201.49L18.33%200.97L18.86%201.49ZM19.39%200.96L19.92%201.48L19.39%200.96ZM20.36%201.95L20.33%202.7L20.36%201.95ZM21.11%201.85L20.55%201.36L21.11%201.85ZM21.64%201.24L22.2%201.73L21.64%201.24ZM21.86%201.07L21.59%200.37L21.86%201.07ZM22.61%200.89L22.23%201.53L22.61%200.89ZM23.14%201.2L23.52%200.56L23.14%201.2ZM23.89%201.03L23.62%200.32L23.89%201.03ZM24.11%200.98L24.07%200.23L24.11%200.98ZM24.64%200.95L24.6%200.2L24.64%200.95ZM24.86%200.92L24.74%200.18L24.86%200.92ZM25.39%200.84L25.51%201.58L25.39%200.84ZM25.61%200.92L25.1%201.47L25.61%200.92ZM26.36%201.58L25.99%202.23L26.36%201.58ZM26.89%201.88L27.26%201.24L26.89%201.88ZM27.11%201.9L26.81%201.21L27.11%201.9ZM27.86%201.52L27.35%200.97L27.86%201.52ZM28.61%201.01L28.18%201.62L28.61%201.01ZM29.14%201.39L29.57%200.77L29.14%201.39ZM29.36%201.56L28.88%202.13L29.36%201.56ZM30.11%202.05L29.78%201.37L30.11%202.05ZM30.86%201.6L30.29%201.12L30.86%201.6ZM31.39%200.98L31.96%201.46L31.39%200.98ZM31.88%200.95L31.68%201.67L31.88%200.95ZM33.11%201.49L32.65%200.9L33.11%201.49ZM33.64%201.08L34.1%201.68L33.64%201.08ZM34.61%201.83L33.98%201.43L34.61%201.83ZM35.14%201.02L34.51%200.61L35.14%201.02ZM35.63%200.86L35.59%201.61L35.63%200.86ZM36.11%200.85L35.98%200.12L36.11%200.85ZM36.64%200.76L36.77%201.49L36.64%200.76ZM36.86%200.78L36.6%201.48L36.86%200.78ZM37.61%201L37.52%200.26L37.61%201ZM38.14%200.94L38.23%201.68L38.14%200.94ZM38.89%200.87L38.83%200.12L38.89%200.87ZM41.14%201.89L40.85%202.59L41.14%201.89ZM41.36%201.95L41.32%202.7L41.36%201.95ZM42.11%202.01L41.95%202.74L42.11%202.01ZM42.86%201.96L42.21%201.59L42.86%201.96ZM44.36%201.66L43.99%202.31L44.36%201.66ZM45.11%202.01L45.01%201.27L45.11%202.01ZM45.64%201.93L45.74%202.67L45.64%201.93ZM45.86%201.93L45.8%202.67L45.86%201.93ZM46.61%201.89L46.13%201.31L46.61%201.89ZM47.63%201.08L47.19%200.47L47.63%201.08ZM47.89%200.89L48.32%201.5L47.89%200.89ZM48.11%200.88L47.73%201.52L48.11%200.88ZM48.86%201.33L48.45%201.96L48.86%201.33ZM49.39%201.67L49.8%201.04L49.39%201.67ZM49.61%201.67L49.2%201.04L49.61%201.67ZM51.11%201.54L50.96%200.81L51.11%201.54ZM52.61%201.39L52.05%201.89L52.61%201.39ZM53.14%201.99L53.7%201.5L53.14%201.99ZM53.36%202.04L53.81%202.64L53.36%202.04ZM53.63%201.84L53.18%201.24L53.63%201.84ZM53.89%201.65L54.34%202.25L53.89%201.65ZM54.11%201.6L54.37%200.9L54.11%201.6ZM54.38%201.7L54.11%202.4L54.38%201.7ZM54.64%201.8L54.9%201.1L54.64%201.8ZM54.86%201.75L55.33%202.34L54.86%201.75ZM55.39%201.34L54.92%200.75L55.39%201.34ZM55.61%201.33L55.16%201.93L55.61%201.33ZM55.88%201.53L56.32%200.93L55.88%201.53ZM56.14%201.72L55.69%202.32L56.14%201.72ZM56.36%201.84L56.17%202.56L56.36%201.84ZM56.63%201.91L56.82%201.18L56.63%201.91ZM56.89%201.98L56.69%202.7L56.89%201.98ZM57.11%201.99L56.96%201.25L57.11%201.99ZM57.38%201.93L57.53%202.66L57.38%201.93ZM57.64%201.87L57.48%201.14L57.64%201.87ZM57.86%201.83L57.7%201.09L57.86%201.83ZM58.13%201.77L58.29%202.5L58.13%201.77ZM58.39%201.71L58.22%200.98L58.39%201.71ZM58.61%201.55L58.04%201.06L58.61%201.55ZM59.36%200.86L58.97%201.5L59.36%200.86ZM59.89%201.17L59.5%201.81L59.89%201.17ZM60.86%201.96L60.43%201.35L60.86%201.96ZM61.39%201.59L61.82%202.2L61.39%201.59ZM61.88%201.54L61.8%202.29L61.88%201.54ZM62.33%201.51L61.81%200.96L62.33%201.51ZM62.5%201.35L61.99%200.8L62.5%201.35ZM62.75%201.3L63.41%201.66L63.5%201.49V1.3H62.75ZM62.65%201.48L61.99%201.12L61.39%202.23H62.65V1.48ZM62.75%202.23C63.16%202.23%2063.5%201.89%2063.5%201.48C63.5%201.07%2063.16%200.73%2062.75%200.73V1.48V2.23ZM0.75%201.48V2.23H0.85V1.48V0.73H0.75V1.48ZM0.85%201.48L1.38%202.02L1.83%201.57L1.3%201.03L0.78%200.5L0.32%200.95L0.85%201.48ZM1.3%201.03L1.83%201.57C1.87%201.53%201.88%201.53%201.85%201.55C1.83%201.56%201.8%201.58%201.74%201.59C1.69%201.6%201.6%201.62%201.5%201.6L1.61%200.86L1.72%200.12C1.45%200.08%201.23%200.17%201.11%200.24C0.98%200.32%200.87%200.41%200.78%200.5L1.3%201.03ZM1.61%200.86L1.5%201.6L1.76%201.64L1.88%200.9L1.99%200.16L1.72%200.12L1.61%200.86ZM1.88%200.9L1.76%201.64L2.03%201.68L2.14%200.94L2.25%200.2L1.99%200.16L1.88%200.9ZM2.14%200.94L2.03%201.68C2.18%201.7%202.33%201.7%202.48%201.68L2.36%200.94L2.25%200.2L2.25%200.2L2.14%200.94ZM2.36%200.94L2.48%201.68L2.74%201.64L2.63%200.9L2.51%200.16L2.25%200.2L2.36%200.94ZM2.63%200.9L2.74%201.64L3%201.6L2.89%200.86L2.77%200.11L2.51%200.16L2.63%200.9ZM2.89%200.86L3%201.6C3.01%201.59%203.02%201.59%203.03%201.6L3.11%200.85L3.2%200.11C3.06%200.09%202.91%200.09%202.77%200.11L2.89%200.86ZM3.11%200.85L3.03%201.6L3.29%201.63L3.38%200.88L3.46%200.14L3.2%200.11L3.11%200.85ZM3.38%200.88L3.29%201.63L3.55%201.66L3.64%200.91L3.72%200.17L3.46%200.14L3.38%200.88ZM3.64%200.91L3.55%201.66C3.55%201.66%203.56%201.66%203.58%201.66L3.86%200.97L4.15%200.28C4.01%200.22%203.87%200.18%203.72%200.17L3.64%200.91ZM3.86%200.97L3.58%201.66L3.84%201.77L4.13%201.08L4.41%200.38L4.15%200.28L3.86%200.97ZM4.13%201.08L3.84%201.77L4.1%201.88L4.39%201.18L4.67%200.49L4.41%200.38L4.13%201.08ZM4.39%201.18L4.1%201.88C4.21%201.92%204.32%201.96%204.44%201.99L4.61%201.26L4.79%200.53C4.75%200.52%204.71%200.51%204.67%200.49L4.39%201.18ZM4.61%201.26L4.44%201.99L4.7%202.05L4.88%201.32L5.05%200.59L4.79%200.53L4.61%201.26ZM4.88%201.32L4.7%202.05L4.96%202.11L5.14%201.38L5.31%200.65L5.05%200.59L4.88%201.32ZM5.14%201.38L4.96%202.11C5.12%202.15%205.29%202.16%205.46%202.14L5.36%201.4L5.27%200.65C5.28%200.65%205.28%200.65%205.29%200.65C5.3%200.65%205.31%200.65%205.31%200.65L5.14%201.38ZM5.36%201.4L5.46%202.14L5.72%202.11L5.63%201.36L5.53%200.62L5.27%200.65L5.36%201.4ZM5.63%201.36L5.72%202.11L5.98%202.07L5.89%201.33L5.79%200.59L5.53%200.62L5.63%201.36ZM5.89%201.33L5.98%202.07C5.94%202.08%205.9%202.07%205.88%202.07L6.11%201.35L6.35%200.64C6.17%200.58%205.98%200.56%205.79%200.59L5.89%201.33ZM6.11%201.35L5.88%202.07L6.14%202.15L6.38%201.44L6.61%200.73L6.35%200.64L6.11%201.35ZM6.38%201.44L6.14%202.15L6.4%202.24L6.64%201.52L6.87%200.81L6.61%200.73L6.38%201.44ZM6.64%201.52L6.4%202.24C6.36%202.22%206.35%202.21%206.37%202.22L6.86%201.66L7.36%201.09C7.22%200.98%207.06%200.87%206.87%200.81L6.64%201.52ZM6.86%201.66L6.37%202.22L6.63%202.45L7.13%201.89L7.62%201.32L7.36%201.09L6.86%201.66ZM7.13%201.89L6.63%202.45L6.89%202.68L7.39%202.12L7.88%201.55L7.62%201.32L7.13%201.89ZM7.39%202.12L6.89%202.68C7.01%202.78%207.17%202.89%207.4%202.92C7.63%202.95%207.83%202.89%208%202.8L7.61%202.15L7.23%201.51C7.32%201.45%207.45%201.41%207.6%201.43C7.75%201.45%207.84%201.52%207.88%201.55L7.39%202.12ZM7.61%202.15L8%202.8L8.26%202.64L7.88%201.99L7.49%201.35L7.23%201.51L7.61%202.15ZM7.88%201.99L8.26%202.64L8.52%202.48L8.14%201.84L7.75%201.19L7.49%201.35L7.88%201.99ZM8.14%201.84L8.52%202.48C8.61%202.43%208.7%202.37%208.8%202.3L8.36%201.69L7.93%201.08C7.87%201.12%207.81%201.16%207.75%201.19L8.14%201.84ZM8.36%201.69L8.8%202.3L9.06%202.12L8.63%201.51L8.19%200.89L7.93%201.08L8.36%201.69ZM8.63%201.51L9.06%202.12L9.32%201.93L8.89%201.32L8.45%200.71L8.19%200.89L8.63%201.51ZM8.89%201.32L9.32%201.93C9.38%201.89%209.44%201.85%209.49%201.82L9.11%201.18L8.73%200.53C8.64%200.58%208.55%200.64%208.45%200.71L8.89%201.32ZM9.11%201.18L9.49%201.82L9.76%201.67L9.38%201.02L8.99%200.37L8.73%200.53L9.11%201.18ZM9.38%201.02L9.76%201.67L10.02%201.51L9.64%200.87L9.26%200.22L8.99%200.37L9.38%201.02ZM9.64%200.87L10.02%201.51C9.94%201.56%209.83%201.6%209.69%201.6C9.55%201.6%209.44%201.56%209.37%201.51C9.23%201.43%209.19%201.34%209.21%201.37L9.86%201L10.52%200.63C10.46%200.53%2010.34%200.35%2010.13%200.22C10.02%200.15%209.87%200.1%209.7%200.1C9.52%200.1%209.37%200.15%209.26%200.22L9.64%200.87ZM9.86%201L9.21%201.37L9.47%201.84L10.13%201.47L10.78%201.1L10.52%200.63L9.86%201ZM10.13%201.47L9.47%201.84L9.73%202.3L10.39%201.94L11.04%201.57L10.78%201.1L10.13%201.47ZM10.39%201.94L9.73%202.3C9.78%202.4%209.95%202.68%2010.3%202.78C10.77%202.9%2011.08%202.61%2011.2%202.47L10.61%202L10.03%201.53C10.05%201.5%2010.12%201.43%2010.23%201.37C10.36%201.31%2010.53%201.28%2010.7%201.33C10.85%201.37%2010.94%201.45%2010.98%201.49C11.02%201.54%2011.04%201.57%2011.04%201.57L10.39%201.94ZM10.61%202L11.2%202.47L11.46%202.15L10.88%201.67L10.29%201.2L10.03%201.53L10.61%202ZM10.88%201.67L11.46%202.15L11.72%201.82L11.14%201.35L10.55%200.88L10.29%201.2L10.88%201.67ZM11.14%201.35L11.72%201.82C11.71%201.84%2011.59%201.97%2011.37%202.01C11.11%202.05%2010.93%201.93%2010.86%201.87L11.36%201.31L11.87%200.76C11.72%200.63%2011.47%200.48%2011.13%200.53C10.83%200.58%2010.64%200.77%2010.55%200.88L11.14%201.35ZM11.36%201.31L10.86%201.87L11.12%202.11L11.63%201.55L12.13%201L11.87%200.76L11.36%201.31ZM11.63%201.55L11.12%202.11L11.38%202.35L11.89%201.79L12.39%201.24L12.13%201L11.63%201.55ZM11.89%201.79L11.38%202.35C11.53%202.48%2011.8%202.64%2012.14%202.57C12.44%202.51%2012.62%202.32%2012.71%202.21L12.11%201.75L11.52%201.29C11.53%201.28%2011.63%201.14%2011.86%201.1C12.13%201.05%2012.32%201.17%2012.39%201.24L11.89%201.79ZM12.11%201.75L12.71%202.21L12.97%201.87L12.38%201.41L11.78%200.95L11.52%201.29L12.11%201.75ZM12.38%201.41L12.97%201.87L13.23%201.52L12.64%201.07L12.04%200.61L11.78%200.95L12.38%201.41ZM12.64%201.07L13.23%201.52C13.22%201.54%2013.1%201.69%2012.86%201.73C12.58%201.77%2012.39%201.62%2012.33%201.56L12.86%201.03L13.39%200.5C13.26%200.37%2013%200.19%2012.64%200.24C12.32%200.29%2012.13%200.5%2012.04%200.61L12.64%201.07ZM12.86%201.03L12.33%201.56L12.59%201.83L13.13%201.3L13.66%200.77L13.39%200.5L12.86%201.03ZM13.13%201.3L12.59%201.83L12.86%202.09L13.39%201.56L13.92%201.03L13.66%200.77L13.13%201.3ZM13.39%201.56L12.86%202.09C12.96%202.2%2013.14%202.33%2013.39%202.37C13.66%202.41%2013.89%202.32%2014.05%202.21L13.61%201.59L13.18%200.98C13.26%200.92%2013.42%200.86%2013.61%200.88C13.79%200.91%2013.89%201%2013.92%201.03L13.39%201.56ZM13.61%201.59L14.05%202.21L14.31%202.02L13.88%201.41L13.44%200.8L13.18%200.98L13.61%201.59ZM13.88%201.41L14.31%202.02L14.57%201.83L14.14%201.22L13.7%200.61L13.44%200.8L13.88%201.41ZM14.14%201.22L14.57%201.83C14.49%201.89%2014.35%201.96%2014.16%201.93C13.99%201.91%2013.88%201.83%2013.85%201.79L14.36%201.25L14.88%200.7C14.77%200.6%2014.59%200.47%2014.34%200.44C14.08%200.41%2013.86%200.5%2013.7%200.61L14.14%201.22ZM14.36%201.25L13.85%201.79L14.11%202.04L14.63%201.5L15.14%200.95L14.88%200.7L14.36%201.25ZM14.63%201.5L14.11%202.04L14.37%202.29L14.89%201.75L15.4%201.2L15.14%200.95L14.63%201.5ZM14.89%201.75L14.37%202.29C14.49%202.4%2014.68%202.53%2014.94%202.55C15.21%202.58%2015.43%202.47%2015.57%202.36L15.11%201.77L14.65%201.17C14.72%201.12%2014.87%201.04%2015.06%201.06C15.25%201.07%2015.36%201.16%2015.4%201.2L14.89%201.75ZM15.11%201.77L15.57%202.36L15.83%202.16L15.38%201.56L14.92%200.97L14.65%201.17L15.11%201.77ZM15.38%201.56L15.83%202.16L16.1%201.95L15.64%201.36L15.18%200.77L14.92%200.97L15.38%201.56ZM15.64%201.36L16.1%201.95C16.09%201.96%2016.03%202%2015.93%202.01L15.86%201.26L15.8%200.52C15.55%200.54%2015.34%200.64%2015.18%200.77L15.64%201.36ZM15.86%201.26L15.93%202.01L16.19%201.99L16.13%201.24L16.06%200.49L15.8%200.52L15.86%201.26ZM16.13%201.24L16.19%201.99L16.45%201.97L16.39%201.22L16.32%200.47L16.06%200.49L16.13%201.24ZM16.39%201.22L16.45%201.97C16.23%201.98%2016.11%201.87%2016.09%201.85L16.61%201.32L17.14%200.78C16.97%200.62%2016.69%200.44%2016.32%200.47L16.39%201.22ZM16.61%201.32L16.09%201.85L16.35%202.11L16.88%201.57L17.4%201.04L17.14%200.78L16.61%201.32ZM16.88%201.57L16.35%202.11L16.61%202.37L17.14%201.83L17.66%201.29L17.4%201.04L16.88%201.57ZM17.14%201.83L16.61%202.37C16.72%202.47%2016.88%202.59%2017.11%202.63C17.35%202.68%2017.57%202.62%2017.74%202.52L17.36%201.87L16.98%201.23C17.08%201.17%2017.23%201.13%2017.39%201.16C17.54%201.19%2017.63%201.26%2017.66%201.29L17.14%201.83ZM17.36%201.87L17.74%202.52L18.01%202.37L17.63%201.72L17.24%201.07L16.98%201.23L17.36%201.87ZM17.63%201.72L18.01%202.37L18.27%202.21L17.89%201.56L17.51%200.92L17.24%201.07L17.63%201.72ZM17.89%201.56L18.27%202.21C18.25%202.22%2018.21%202.24%2018.16%202.25C18.11%202.26%2018.06%202.26%2018%202.26L18.11%201.51L18.22%200.77C17.95%200.73%2017.71%200.8%2017.51%200.92L17.89%201.56ZM18.11%201.51L18%202.26L18.26%202.3L18.38%201.55L18.49%200.81L18.22%200.77L18.11%201.51ZM18.38%201.55L18.26%202.3L18.53%202.34L18.64%201.59L18.75%200.85L18.49%200.81L18.38%201.55ZM18.64%201.59L18.53%202.34C18.93%202.4%2019.23%202.19%2019.4%202.02L18.86%201.49L18.33%200.97C18.34%200.96%2018.37%200.92%2018.45%200.89C18.53%200.85%2018.63%200.83%2018.75%200.85L18.64%201.59ZM18.86%201.49L19.4%202.02L19.66%201.75L19.13%201.23L18.59%200.7L18.33%200.97L18.86%201.49ZM19.13%201.23L19.66%201.75L19.92%201.48L19.39%200.96L18.85%200.43L18.59%200.7L19.13%201.23ZM19.39%200.96L19.92%201.48C19.86%201.54%2019.65%201.71%2019.34%201.64C19.21%201.61%2019.12%201.55%2019.07%201.51C19.02%201.47%2019%201.44%2018.99%201.43L19.61%201.01L20.23%200.59C20.16%200.48%2019.99%200.25%2019.66%200.18C19.28%200.09%2018.99%200.29%2018.85%200.43L19.39%200.96ZM19.61%201.01L18.99%201.43L19.25%201.81L19.88%201.39L20.5%200.97L20.23%200.59L19.61%201.01ZM19.88%201.39L19.25%201.81L19.52%202.2L20.14%201.78L20.76%201.36L20.5%200.97L19.88%201.39ZM20.14%201.78L19.52%202.2C19.62%202.36%2019.88%202.68%2020.33%202.7L20.36%201.95L20.39%201.2C20.54%201.21%2020.65%201.27%2020.7%201.31C20.75%201.35%2020.77%201.38%2020.76%201.36L20.14%201.78ZM20.36%201.95L20.33%202.7L20.6%202.71L20.63%201.96L20.65%201.21L20.39%201.2L20.36%201.95ZM20.63%201.96L20.6%202.71L20.86%202.72L20.89%201.97L20.92%201.22L20.65%201.21L20.63%201.96ZM20.89%201.97L20.86%202.72C21.26%202.74%2021.54%202.5%2021.68%202.34L21.11%201.85L20.55%201.36C20.55%201.35%2020.57%201.32%2020.63%201.29C20.7%201.25%2020.8%201.22%2020.92%201.22L20.89%201.97ZM21.11%201.85L21.68%202.34L21.94%202.03L21.38%201.54L20.81%201.05L20.55%201.36L21.11%201.85ZM21.38%201.54L21.94%202.03L22.2%201.73L21.64%201.24L21.07%200.75L20.81%201.05L21.38%201.54ZM21.64%201.24L22.2%201.73C22.22%201.72%2022.22%201.72%2022.21%201.73C22.2%201.73%2022.17%201.75%2022.13%201.77L21.86%201.07L21.59%200.37C21.36%200.46%2021.19%200.61%2021.07%200.75L21.64%201.24ZM21.86%201.07L22.13%201.77L22.4%201.67L22.13%200.97L21.85%200.27L21.59%200.37L21.86%201.07ZM22.13%200.97L22.4%201.67L22.66%201.56L22.39%200.86L22.12%200.16L21.85%200.27L22.13%200.97ZM22.39%200.86L22.66%201.56C22.59%201.59%2022.51%201.6%2022.42%201.59C22.33%201.59%2022.27%201.56%2022.23%201.53L22.61%200.89L23%200.24C22.74%200.09%2022.43%200.04%2022.12%200.16L22.39%200.86ZM22.61%200.89L22.23%201.53L22.49%201.69L22.88%201.05L23.26%200.4L23%200.24L22.61%200.89ZM22.88%201.05L22.49%201.69L22.75%201.85L23.14%201.2L23.52%200.56L23.26%200.4L22.88%201.05ZM23.14%201.2L22.75%201.85C23.01%202%2023.32%202.05%2023.63%201.93L23.36%201.23L23.09%200.53C23.16%200.5%2023.24%200.49%2023.33%200.5C23.42%200.51%2023.48%200.53%2023.52%200.56L23.14%201.2ZM23.36%201.23L23.63%201.93L23.89%201.83L23.63%201.13L23.36%200.43L23.09%200.53L23.36%201.23ZM23.63%201.13L23.89%201.83L24.16%201.73L23.89%201.03L23.62%200.32L23.36%200.43L23.63%201.13ZM23.89%201.03L24.16%201.73C24.16%201.72%2024.16%201.72%2024.16%201.72C24.16%201.72%2024.16%201.72%2024.15%201.73L24.11%200.98L24.07%200.23C23.91%200.24%2023.76%200.27%2023.62%200.32L23.89%201.03ZM24.11%200.98L24.15%201.73L24.42%201.71L24.38%200.96L24.33%200.21L24.07%200.23L24.11%200.98ZM24.38%200.96L24.42%201.71L24.68%201.7L24.64%200.95L24.6%200.2L24.33%200.21L24.38%200.96ZM24.64%200.95L24.68%201.7C24.78%201.69%2024.88%201.68%2024.98%201.66L24.86%200.92L24.74%200.18C24.69%200.19%2024.64%200.2%2024.6%200.2L24.64%200.95ZM24.86%200.92L24.98%201.66L25.25%201.62L25.13%200.88L25%200.14L24.74%200.18L24.86%200.92ZM25.13%200.88L25.25%201.62L25.51%201.58L25.39%200.84L25.27%200.1L25%200.14L25.13%200.88ZM25.39%200.84L25.51%201.58C25.41%201.59%2025.31%201.58%2025.23%201.55C25.16%201.52%2025.12%201.48%2025.1%201.47L25.61%200.92L26.12%200.37C25.94%200.2%2025.64%200.03%2025.27%200.1L25.39%200.84ZM25.61%200.92L25.1%201.47L25.36%201.72L25.88%201.17L26.39%200.62L26.12%200.37L25.61%200.92ZM25.88%201.17L25.36%201.72L25.63%201.96L26.14%201.41L26.65%200.86L26.39%200.62L25.88%201.17ZM26.14%201.41L25.63%201.96C25.74%202.06%2025.85%202.15%2025.99%202.23L26.36%201.58L26.74%200.93C26.72%200.92%2026.69%200.9%2026.65%200.86L26.14%201.41ZM26.36%201.58L25.99%202.23L26.25%202.38L26.63%201.73L27%201.08L26.74%200.93L26.36%201.58ZM26.63%201.73L26.25%202.38L26.51%202.53L26.89%201.88L27.26%201.24L27%201.08L26.63%201.73ZM26.89%201.88L26.51%202.53C26.78%202.69%2027.1%202.72%2027.41%202.59L27.11%201.9L26.81%201.21C26.88%201.19%2026.96%201.17%2027.05%201.17C27.15%201.18%2027.22%201.21%2027.26%201.24L26.89%201.88ZM27.11%201.9L27.41%202.59L27.67%202.48L27.38%201.79L27.08%201.1L26.81%201.21L27.11%201.9ZM27.38%201.79L27.67%202.48L27.94%202.36L27.64%201.67L27.34%200.99L27.08%201.1L27.38%201.79ZM27.64%201.67L27.94%202.36C28.1%202.29%2028.25%202.19%2028.37%202.07L27.86%201.52L27.35%200.97C27.34%200.98%2027.33%200.99%2027.33%200.99C27.33%200.99%2027.33%200.99%2027.34%200.99L27.64%201.67ZM27.86%201.52L28.37%202.07L28.63%201.83L28.13%201.28L27.62%200.73L27.35%200.97L27.86%201.52ZM28.13%201.28L28.63%201.83L28.9%201.59L28.39%201.04L27.88%200.49L27.62%200.73L28.13%201.28ZM28.39%201.04L28.9%201.59C28.86%201.62%2028.75%201.71%2028.58%201.72C28.4%201.74%2028.26%201.68%2028.18%201.62L28.61%201.01L29.05%200.4C28.89%200.29%2028.68%200.21%2028.42%200.23C28.17%200.26%2027.99%200.38%2027.88%200.49L28.39%201.04ZM28.61%201.01L28.18%201.62L28.44%201.81L28.88%201.2L29.31%200.59L29.05%200.4L28.61%201.01ZM28.88%201.2L28.44%201.81L28.7%202L29.14%201.39L29.57%200.77L29.31%200.59L28.88%201.2ZM29.14%201.39L28.7%202C28.76%202.04%2028.82%202.08%2028.88%202.13L29.36%201.56L29.85%200.99C29.76%200.91%2029.67%200.84%2029.57%200.77L29.14%201.39ZM29.36%201.56L28.88%202.13L29.14%202.36L29.63%201.78L30.11%201.21L29.85%200.99L29.36%201.56ZM29.63%201.78L29.14%202.36L29.4%202.58L29.89%202.01L30.37%201.43L30.11%201.21L29.63%201.78ZM29.89%202.01L29.4%202.58C29.51%202.67%2029.67%202.77%2029.87%202.8C30.08%202.84%2030.27%202.8%2030.44%202.72L30.11%202.05L29.78%201.37C29.88%201.33%2030%201.3%2030.13%201.33C30.26%201.35%2030.34%201.4%2030.37%201.43L29.89%202.01ZM30.11%202.05L30.44%202.72L30.7%202.59L30.38%201.92L30.05%201.24L29.78%201.37L30.11%202.05ZM30.38%201.92L30.7%202.59L30.97%202.47L30.64%201.79L30.31%201.12L30.05%201.24L30.38%201.92ZM30.64%201.79L30.97%202.47C31.16%202.37%2031.32%202.23%2031.44%202.09L30.86%201.6L30.29%201.12C30.27%201.14%2030.27%201.14%2030.27%201.14C30.27%201.14%2030.28%201.13%2030.31%201.12L30.64%201.79ZM30.86%201.6L31.44%202.09L31.7%201.77L31.13%201.29L30.55%200.81L30.29%201.12L30.86%201.6ZM31.13%201.29L31.7%201.77L31.96%201.46L31.39%200.98L30.81%200.5L30.55%200.81L31.13%201.29ZM31.39%200.98L31.96%201.46C31.96%201.47%2031.91%201.52%2031.81%201.57C31.7%201.62%2031.56%201.64%2031.42%201.6L31.61%200.88L31.81%200.15C31.32%200.02%2030.97%200.31%2030.81%200.5L31.39%200.98ZM31.61%200.88L31.42%201.6L31.68%201.67L31.88%200.95L32.07%200.22L31.81%200.15L31.61%200.88ZM31.88%200.95L31.68%201.67L31.94%201.74L32.14%201.02L32.33%200.29L32.07%200.22L31.88%200.95ZM32.14%201.02L31.94%201.74C31.92%201.74%2031.91%201.73%2031.93%201.74L32.36%201.13L32.8%200.52C32.66%200.42%2032.51%200.34%2032.33%200.29L32.14%201.02ZM32.36%201.13L31.93%201.74L32.19%201.93L32.63%201.32L33.06%200.7L32.8%200.52L32.36%201.13ZM32.63%201.32L32.19%201.93L32.45%202.11L32.89%201.5L33.32%200.89L33.06%200.7L32.63%201.32ZM32.89%201.5L32.45%202.11C32.59%202.21%2032.79%202.3%2033.03%202.29C33.26%202.28%2033.44%202.19%2033.57%202.09L33.11%201.49L32.65%200.9C32.71%200.86%2032.82%200.8%2032.97%200.79C33.14%200.78%2033.26%200.84%2033.32%200.89L32.89%201.5ZM33.11%201.49L33.57%202.09L33.84%201.88L33.38%201.29L32.91%200.7L32.65%200.9L33.11%201.49ZM33.38%201.29L33.84%201.88L34.1%201.68L33.64%201.08L33.18%200.49L32.91%200.7L33.38%201.29ZM33.64%201.08L34.1%201.68C34.05%201.71%2033.98%201.76%2033.87%201.78C33.76%201.81%2033.65%201.81%2033.54%201.78C33.35%201.72%2033.27%201.6%2033.26%201.6L33.86%201.15L34.46%200.7C34.38%200.59%2034.22%200.41%2033.96%200.34C33.64%200.25%2033.36%200.35%2033.18%200.49L33.64%201.08ZM33.86%201.15L33.26%201.6L33.52%201.95L34.13%201.5L34.73%201.06L34.46%200.7L33.86%201.15ZM34.13%201.5L33.52%201.95L33.79%202.3L34.39%201.86L34.99%201.41L34.73%201.06L34.13%201.5ZM34.39%201.86L33.79%202.3C33.87%202.42%2034.13%202.72%2034.58%202.67C34.97%202.63%2035.18%202.34%2035.24%202.24L34.61%201.83L33.98%201.43C33.99%201.42%2034.02%201.37%2034.08%201.32C34.14%201.27%2034.26%201.2%2034.42%201.18C34.79%201.14%2034.98%201.4%2034.99%201.41L34.39%201.86ZM34.61%201.83L35.24%202.24L35.51%201.83L34.88%201.43L34.24%201.02L33.98%201.43L34.61%201.83ZM34.88%201.43L35.51%201.83L35.77%201.42L35.14%201.02L34.51%200.61L34.24%201.02L34.88%201.43ZM35.14%201.02L35.77%201.42C35.78%201.41%2035.76%201.44%2035.7%201.49C35.64%201.54%2035.51%201.6%2035.33%201.6L35.36%200.85L35.4%200.1C34.89%200.08%2034.61%200.46%2034.51%200.61L35.14%201.02ZM35.36%200.85L35.33%201.6L35.59%201.61L35.63%200.86L35.66%200.11L35.4%200.1L35.36%200.85ZM35.63%200.86L35.59%201.61L35.85%201.62L35.89%200.87L35.92%200.12L35.66%200.11L35.63%200.86ZM35.89%200.87L35.85%201.62C35.99%201.63%2036.12%201.62%2036.25%201.59L36.11%200.85L35.98%200.12C35.96%200.12%2035.94%200.12%2035.92%200.12L35.89%200.87ZM36.11%200.85L36.25%201.59L36.51%201.54L36.38%200.81L36.24%200.07L35.98%200.12L36.11%200.85ZM36.38%200.81L36.51%201.54L36.77%201.49L36.64%200.76L36.5%200.02L36.24%200.07L36.38%200.81ZM36.64%200.76L36.77%201.49C36.74%201.5%2036.71%201.5%2036.68%201.5C36.65%201.5%2036.62%201.49%2036.6%201.48L36.86%200.78L37.13%200.08C36.93%200%2036.72%20-0.02%2036.5%200.02L36.64%200.76ZM36.86%200.78L36.6%201.48L36.86%201.58L37.13%200.88L37.39%200.17L37.13%200.08L36.86%200.78ZM37.13%200.88L36.86%201.58L37.12%201.68L37.39%200.97L37.65%200.27L37.39%200.17L37.13%200.88ZM37.39%200.97L37.12%201.68C37.31%201.75%2037.5%201.77%2037.71%201.75L37.61%201L37.52%200.26C37.57%200.25%2037.62%200.26%2037.65%200.27L37.39%200.97ZM37.61%201L37.71%201.75L37.97%201.71L37.88%200.97L37.78%200.23L37.52%200.26L37.61%201ZM37.88%200.97L37.97%201.71L38.23%201.68L38.14%200.94L38.04%200.19L37.78%200.23L37.88%200.97ZM38.14%200.94L38.23%201.68C38.29%201.67%2038.36%201.67%2038.42%201.66L38.36%200.91L38.3%200.17C38.22%200.17%2038.13%200.18%2038.04%200.19L38.14%200.94ZM38.36%200.91L38.42%201.66L38.68%201.64L38.63%200.89L38.57%200.15L38.3%200.17L38.36%200.91ZM38.63%200.89L38.68%201.64L38.95%201.62L38.89%200.87L38.83%200.12L38.57%200.15L38.63%200.89ZM38.89%200.87L38.95%201.62C38.8%201.63%2038.69%201.57%2038.66%201.55L39.11%200.95L39.57%200.35C39.38%200.21%2039.13%200.1%2038.83%200.12L38.89%200.87ZM39.11%200.95L38.66%201.55L38.92%201.75L39.38%201.15L39.83%200.55L39.57%200.35L39.11%200.95ZM39.38%201.15L38.92%201.75L39.18%201.94L39.64%201.35L40.09%200.75L39.83%200.55L39.38%201.15ZM39.64%201.35L39.18%201.94C39.32%202.05%2039.48%202.14%2039.67%202.19L39.86%201.46L40.06%200.74C40.09%200.75%2040.1%200.76%2040.09%200.75L39.64%201.35ZM39.86%201.46L39.67%202.19L39.93%202.26L40.13%201.53L40.32%200.81L40.06%200.74L39.86%201.46ZM40.13%201.53L39.93%202.26L40.19%202.33L40.39%201.6L40.58%200.88L40.32%200.81L40.13%201.53ZM40.39%201.6L40.19%202.33C40.24%202.34%2040.28%202.35%2040.33%202.37L40.61%201.68L40.9%200.98C40.79%200.94%2040.69%200.9%2040.58%200.88L40.39%201.6ZM40.61%201.68L40.33%202.37L40.59%202.48L40.88%201.79L41.16%201.09L40.9%200.98L40.61%201.68ZM40.88%201.79L40.59%202.48L40.85%202.59L41.14%201.89L41.42%201.2L41.16%201.09L40.88%201.79ZM41.14%201.89L40.85%202.59C41%202.65%2041.15%202.69%2041.32%202.7L41.36%201.95L41.41%201.2C41.41%201.2%2041.42%201.2%2041.42%201.2C41.43%201.2%2041.43%201.2%2041.42%201.2L41.14%201.89ZM41.36%201.95L41.32%202.7L41.58%202.71L41.63%201.96L41.67%201.21L41.41%201.2L41.36%201.95ZM41.63%201.96L41.58%202.71L41.84%202.73L41.89%201.98L41.93%201.23L41.67%201.21L41.63%201.96ZM41.89%201.98L41.84%202.73C41.88%202.73%2041.91%202.73%2041.95%202.74L42.11%202.01L42.28%201.28C42.17%201.25%2042.05%201.24%2041.93%201.23L41.89%201.98ZM42.11%202.01L41.95%202.74L42.21%202.8L42.38%202.07L42.54%201.34L42.28%201.28L42.11%202.01ZM42.38%202.07L42.21%202.8L42.47%202.86L42.64%202.13L42.8%201.4L42.54%201.34L42.38%202.07ZM42.64%202.13L42.47%202.86C42.77%202.93%2043.03%202.83%2043.2%202.7C43.36%202.58%2043.45%202.44%2043.51%202.33L42.86%201.96L42.21%201.59C42.2%201.61%2042.22%201.56%2042.3%201.5C42.34%201.47%2042.41%201.43%2042.5%201.41C42.6%201.38%2042.7%201.38%2042.8%201.4L42.64%202.13ZM42.86%201.96L43.51%202.33L43.78%201.87L43.13%201.5L42.47%201.13L42.21%201.59L42.86%201.96ZM43.13%201.5L43.78%201.87L44.04%201.41L43.39%201.04L42.74%200.67L42.47%201.13L43.13%201.5ZM43.39%201.04L44.04%201.41C44.04%201.42%2044.02%201.44%2043.99%201.48C43.96%201.51%2043.88%201.58%2043.76%201.62C43.63%201.68%2043.48%201.68%2043.33%201.64C43.2%201.6%2043.12%201.53%2043.08%201.49L43.61%200.96L44.14%200.43C43.98%200.26%2043.64%200.07%2043.24%200.22C42.94%200.33%2042.79%200.57%2042.74%200.67L43.39%201.04ZM43.61%200.96L43.08%201.49L43.35%201.75L43.88%201.22L44.4%200.69L44.14%200.43L43.61%200.96ZM43.88%201.22L43.35%201.75L43.61%202.01L44.14%201.48L44.67%200.95L44.4%200.69L43.88%201.22ZM44.14%201.48L43.61%202.01C43.72%202.12%2043.85%202.23%2043.99%202.31L44.36%201.66L44.74%201.01C44.73%201%2044.71%200.99%2044.67%200.95L44.14%201.48ZM44.36%201.66L43.99%202.31L44.25%202.46L44.63%201.81L45%201.16L44.74%201.01L44.36%201.66ZM44.63%201.81L44.25%202.46L44.51%202.61L44.89%201.96L45.26%201.31L45%201.16L44.63%201.81ZM44.89%201.96L44.51%202.61C44.71%202.72%2044.96%202.79%2045.22%202.75L45.11%202.01L45.01%201.27C45.06%201.26%2045.11%201.26%2045.16%201.27C45.2%201.28%2045.24%201.3%2045.26%201.31L44.89%201.96ZM45.11%202.01L45.22%202.75L45.48%202.71L45.38%201.97L45.27%201.23L45.01%201.27L45.11%202.01ZM45.38%201.97L45.48%202.71L45.74%202.67L45.64%201.93L45.53%201.19L45.27%201.23L45.38%201.97ZM45.64%201.93L45.74%202.67C45.76%202.67%2045.78%202.67%2045.8%202.67L45.86%201.93L45.93%201.18C45.8%201.17%2045.66%201.17%2045.53%201.19L45.64%201.93ZM45.86%201.93L45.8%202.67L46.06%202.7L46.13%201.95L46.19%201.2L45.93%201.18L45.86%201.93ZM46.13%201.95L46.06%202.7L46.32%202.72L46.39%201.97L46.45%201.22L46.19%201.2L46.13%201.95ZM46.39%201.97L46.32%202.72C46.65%202.75%2046.92%202.61%2047.1%202.46L46.61%201.89L46.13%201.31C46.14%201.3%2046.18%201.28%2046.23%201.25C46.3%201.23%2046.37%201.22%2046.45%201.22L46.39%201.97ZM46.61%201.89L47.1%202.46L47.36%202.24L46.88%201.66L46.39%201.09L46.13%201.31L46.61%201.89ZM46.88%201.66L47.36%202.24L47.62%202.01L47.14%201.44L46.65%200.87L46.39%201.09L46.88%201.66ZM47.14%201.44L47.62%202.01C47.68%201.96%2047.74%201.92%2047.8%201.88L47.36%201.27L46.93%200.66C46.83%200.72%2046.74%200.79%2046.65%200.87L47.14%201.44ZM47.36%201.27L47.8%201.88L48.06%201.69L47.63%201.08L47.19%200.47L46.93%200.66L47.36%201.27ZM47.63%201.08L48.06%201.69L48.32%201.5L47.89%200.89L47.45%200.28L47.19%200.47L47.63%201.08ZM47.89%200.89L48.32%201.5C48.27%201.54%2048.18%201.59%2048.04%201.6C47.91%201.6%2047.8%201.56%2047.73%201.52L48.11%200.88L48.5%200.23C48.35%200.15%2048.17%200.09%2047.96%200.1C47.75%200.11%2047.58%200.19%2047.45%200.28L47.89%200.89ZM48.11%200.88L47.73%201.52L47.99%201.68L48.38%201.03L48.76%200.39L48.5%200.23L48.11%200.88ZM48.38%201.03L47.99%201.68L48.25%201.84L48.64%201.19L49.02%200.55L48.76%200.39L48.38%201.03ZM48.64%201.19L48.25%201.84C48.32%201.87%2048.39%201.92%2048.45%201.96L48.86%201.33L49.27%200.7C49.19%200.65%2049.1%200.6%2049.02%200.55L48.64%201.19ZM48.86%201.33L48.45%201.96L48.72%202.13L49.13%201.5L49.53%200.87L49.27%200.7L48.86%201.33ZM49.13%201.5L48.72%202.13L48.98%202.3L49.39%201.67L49.8%201.04L49.53%200.87L49.13%201.5ZM49.39%201.67L48.98%202.3C49.12%202.39%2049.29%202.46%2049.5%202.46C49.71%202.46%2049.89%202.38%2050.03%202.3L49.61%201.67L49.2%201.04C49.26%201%2049.36%200.96%2049.5%200.96C49.63%200.96%2049.73%201%2049.8%201.04L49.39%201.67ZM49.61%201.67L50.03%202.3L50.29%202.12L49.88%201.5L49.46%200.87L49.2%201.04L49.61%201.67ZM49.88%201.5L50.29%202.12L50.55%201.95L50.14%201.32L49.72%200.7L49.46%200.87L49.88%201.5ZM50.14%201.32L50.55%201.95C50.51%201.98%2050.44%202.01%2050.34%202.02C50.23%202.04%2050.14%202.02%2050.07%201.99L50.36%201.3L50.66%200.61C50.32%200.46%2049.98%200.53%2049.72%200.7L50.14%201.32ZM50.36%201.3L50.07%201.99L50.33%202.1L50.63%201.41L50.92%200.72L50.66%200.61L50.36%201.3ZM50.63%201.41L50.33%202.1L50.59%202.21L50.89%201.52L51.18%200.83L50.92%200.72L50.63%201.41ZM50.89%201.52L50.59%202.21C50.8%202.3%2051.03%202.33%2051.27%202.28L51.11%201.54L50.96%200.81C51%200.8%2051.04%200.8%2051.08%200.8C51.12%200.81%2051.16%200.82%2051.18%200.83L50.89%201.52ZM51.11%201.54L51.27%202.28L51.53%202.22L51.38%201.49L51.22%200.76L50.96%200.81L51.11%201.54ZM51.38%201.49L51.53%202.22L51.79%202.17L51.64%201.43L51.48%200.7L51.22%200.76L51.38%201.49ZM51.64%201.43L51.79%202.17C51.86%202.15%2051.93%202.14%2052%202.13L51.86%201.39L51.72%200.65C51.64%200.67%2051.56%200.68%2051.48%200.7L51.64%201.43ZM51.86%201.39L52%202.13L52.27%202.07L52.13%201.34L51.98%200.6L51.72%200.65L51.86%201.39ZM52.13%201.34L52.27%202.07L52.53%202.02L52.39%201.29L52.25%200.55L51.98%200.6L52.13%201.34ZM52.39%201.29L52.53%202.02C52.4%202.05%2052.27%202.03%2052.18%201.98C52.1%201.94%2052.06%201.9%2052.05%201.89L52.61%201.39L53.18%200.9C53.02%200.72%2052.7%200.46%2052.25%200.55L52.39%201.29ZM52.61%201.39L52.05%201.89L52.31%202.19L52.88%201.69L53.44%201.2L53.18%200.9L52.61%201.39ZM52.88%201.69L52.31%202.19L52.57%202.49L53.14%201.99L53.7%201.5L53.44%201.2L52.88%201.69ZM53.14%201.99L52.57%202.49C52.67%202.6%2052.84%202.75%2053.1%202.8C53.4%202.86%2053.64%202.76%2053.81%202.64L53.36%202.04L52.91%201.43C53.01%201.37%2053.18%201.29%2053.4%201.33C53.58%201.37%2053.68%201.47%2053.7%201.5L53.14%201.99ZM53.36%202.04L53.81%202.64L54.07%202.44L53.63%201.84L53.18%201.24L52.91%201.43L53.36%202.04ZM53.63%201.84L54.07%202.44L54.34%202.25L53.89%201.65L53.44%201.04L53.18%201.24L53.63%201.84ZM53.89%201.65L54.34%202.25C54.3%202.27%2054.23%202.31%2054.14%202.33C54.03%202.35%2053.93%202.34%2053.85%202.31L54.11%201.6L54.37%200.9C54.02%200.77%2053.68%200.87%2053.44%201.04L53.89%201.65ZM54.11%201.6L53.85%202.31L54.11%202.4L54.38%201.7L54.64%201L54.37%200.9L54.11%201.6ZM54.38%201.7L54.11%202.4L54.38%202.5L54.64%201.8L54.9%201.1L54.64%201L54.38%201.7ZM54.64%201.8L54.38%202.5C54.75%202.64%2055.09%202.52%2055.33%202.34L54.86%201.75L54.4%201.16C54.43%201.14%2054.49%201.1%2054.6%201.07C54.7%201.05%2054.81%201.06%2054.9%201.1L54.64%201.8ZM54.86%201.75L55.33%202.34L55.59%202.13L55.13%201.54L54.66%200.96L54.4%201.16L54.86%201.75ZM55.13%201.54L55.59%202.13L55.85%201.92L55.39%201.34L54.92%200.75L54.66%200.96L55.13%201.54ZM55.39%201.34L55.85%201.92C55.8%201.97%2055.68%202.04%2055.52%202.04C55.35%202.04%2055.23%201.98%2055.16%201.93L55.61%201.33L56.06%200.73C55.92%200.63%2055.73%200.53%2055.48%200.54C55.24%200.55%2055.05%200.65%2054.92%200.75L55.39%201.34ZM55.61%201.33L55.16%201.93L55.43%202.13L55.88%201.53L56.32%200.93L56.06%200.73L55.61%201.33ZM55.88%201.53L55.43%202.13L55.69%202.32L56.14%201.72L56.59%201.12L56.32%200.93L55.88%201.53ZM56.14%201.72L55.69%202.32C55.82%202.43%2055.98%202.51%2056.17%202.56L56.36%201.84L56.56%201.11C56.59%201.12%2056.6%201.13%2056.59%201.12L56.14%201.72ZM56.36%201.84L56.17%202.56L56.43%202.63L56.63%201.91L56.82%201.18L56.56%201.11L56.36%201.84ZM56.63%201.91L56.43%202.63L56.69%202.7L56.89%201.98L57.08%201.25L56.82%201.18L56.63%201.91ZM56.89%201.98L56.69%202.7C56.88%202.75%2057.07%202.76%2057.27%202.72L57.11%201.99L56.96%201.25C56.98%201.25%2057%201.25%2057.02%201.25C57.05%201.25%2057.07%201.25%2057.08%201.25L56.89%201.98ZM57.11%201.99L57.27%202.72L57.53%202.66L57.38%201.93L57.22%201.2L56.96%201.25L57.11%201.99ZM57.38%201.93L57.53%202.66L57.79%202.61L57.64%201.87L57.48%201.14L57.22%201.2L57.38%201.93ZM57.64%201.87L57.79%202.61C57.87%202.59%2057.95%202.58%2058.03%202.56L57.86%201.83L57.7%201.09C57.63%201.11%2057.55%201.13%2057.48%201.14L57.64%201.87ZM57.86%201.83L58.03%202.56L58.29%202.5L58.13%201.77L57.96%201.03L57.7%201.09L57.86%201.83ZM58.13%201.77L58.29%202.5L58.55%202.44L58.39%201.71L58.22%200.98L57.96%201.03L58.13%201.77ZM58.39%201.71L58.55%202.44C58.85%202.37%2059.06%202.18%2059.19%202.03L58.61%201.55L58.04%201.06C58.03%201.07%2058.04%201.06%2058.07%201.04C58.09%201.02%2058.15%200.99%2058.22%200.98L58.39%201.71ZM58.61%201.55L59.19%202.03L59.45%201.72L58.88%201.23L58.3%200.75L58.04%201.06L58.61%201.55ZM58.88%201.23L59.45%201.72L59.71%201.4L59.14%200.92L58.56%200.44L58.3%200.75L58.88%201.23ZM59.14%200.92L59.71%201.4C59.7%201.42%2059.62%201.51%2059.46%201.56C59.27%201.61%2059.09%201.57%2058.97%201.5L59.36%200.86L59.75%200.21C59.56%200.1%2059.31%200.04%2059.04%200.12C58.81%200.19%2058.65%200.33%2058.56%200.44L59.14%200.92ZM59.36%200.86L58.97%201.5L59.24%201.66L59.63%201.01L60.01%200.37L59.75%200.21L59.36%200.86ZM59.63%201.01L59.24%201.66L59.5%201.81L59.89%201.17L60.28%200.53L60.01%200.37L59.63%201.01ZM59.89%201.17L59.5%201.81C59.5%201.82%2059.53%201.83%2059.56%201.87L60.11%201.36L60.66%200.85C60.55%200.73%2060.42%200.62%2060.28%200.53L59.89%201.17ZM60.11%201.36L59.56%201.87L59.83%202.16L60.38%201.64L60.92%201.13L60.66%200.85L60.11%201.36ZM60.38%201.64L59.83%202.16L60.09%202.44L60.64%201.92L61.19%201.41L60.92%201.13L60.38%201.64ZM60.64%201.92L60.09%202.44C60.19%202.54%2060.37%202.69%2060.62%202.73C60.9%202.78%2061.14%202.69%2061.3%202.57L60.86%201.96L60.43%201.35C60.51%201.29%2060.68%201.22%2060.88%201.26C61.06%201.29%2061.16%201.38%2061.19%201.41L60.64%201.92ZM60.86%201.96L61.3%202.57L61.56%202.38L61.13%201.78L60.69%201.17L60.43%201.35L60.86%201.96ZM61.13%201.78L61.56%202.38L61.82%202.2L61.39%201.59L60.95%200.98L60.69%201.17L61.13%201.78ZM61.39%201.59L61.82%202.2C61.81%202.21%2061.77%202.23%2061.72%202.25C61.67%202.26%2061.61%202.27%2061.54%202.26L61.61%201.52L61.69%200.77C61.39%200.74%2061.14%200.84%2060.95%200.98L61.39%201.59ZM61.61%201.52L61.54%202.26L61.8%202.29L61.88%201.54L61.95%200.8L61.69%200.77L61.61%201.52ZM61.88%201.54L61.8%202.29L62.06%202.31L62.14%201.57L62.21%200.82L61.95%200.8L61.88%201.54ZM62.14%201.57L62.06%202.31C62.33%202.34%2062.61%202.27%2062.84%202.06L62.33%201.51L61.81%200.96C61.87%200.91%2061.94%200.87%2062.02%200.84C62.09%200.82%2062.16%200.82%2062.21%200.82L62.14%201.57ZM62.33%201.51L62.84%202.06L63.01%201.89L62.5%201.35L61.99%200.8L61.81%200.96L62.33%201.51ZM62.5%201.35L63.01%201.89L63.19%201.73L62.67%201.18L62.16%200.63L61.99%200.8L62.5%201.35ZM62.67%201.18L63.19%201.73C63.18%201.73%2063.17%201.75%2063.13%201.77C63.11%201.79%2063.02%201.85%2062.88%201.88C62.8%201.9%2062.67%201.91%2062.53%201.86C62.38%201.82%2062.25%201.73%2062.16%201.61C62%201.41%2062%201.21%2062%201.17H62.75H63.5C63.5%201.11%2063.5%200.89%2063.34%200.68C63.11%200.4%2062.78%200.37%2062.59%200.41C62.43%200.44%2062.32%200.51%2062.28%200.54C62.23%200.57%2062.19%200.61%2062.16%200.63L62.67%201.18ZM62.75%201.17H62V1.3H62.75H63.5V1.17H62.75ZM62.75%201.3L62.09%200.94L61.99%201.12L62.65%201.48L63.31%201.84L63.41%201.66L62.75%201.3ZM62.65%201.48V2.23H62.75V1.48V0.73H62.65V1.48Z%22%20fill%3D%22%23D1D1D1%22%2F%3E%3C%2Fsvg%3E");

      /* Only two families: Helvetica Neue (with its Helvetica/Arial
         equivalents as fallback) and Roboto Mono */
      --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
      --mono: "Roboto Mono", monospace;
      --hand: "Caveat", "Segoe Script", cursive;   /* hand-drawn captions (≈ Figma Hand) */

      /* natural ease-out for the paper-fold hover */
      --ease: cubic-bezier(0.33, 1, 0.68, 1);

      --col: 600px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    /* the design never uses bold/semibold — emphasis is Medium (500) */
    strong, b { font-weight: 500; }

    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      /* Extra bottom padding clears the fixed floating dock (bottom:32px + 60px
         tall = 92px) plus a 24px gap so the footer note sits just above it. */
      padding: 0 24px 116px;
      position: relative;
    }

    /* Paper texture on its own layer. The texture file is already grayscale,
       so no runtime filter is needed. MULTIPLY over white, tiled to match the
       Figma scalingFactor 0.35 (640px * 0.35 ≈ 224px). Content sits above it. */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: var(--paper-bg);
      background-image: var(--paper-image);
      background-repeat: repeat;
      background-size: var(--paper-size);
      background-blend-mode: var(--paper-blend);
    }

    .page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--col);
      padding-top: 80px;
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    /* ---------- Intro ---------- */
    .intro { display: flex; flex-direction: column; gap: 24px; }

    .avatar {
      width: 60px;
      height: 74px;
      padding: 2px;
      background: var(--avatar-bg);
      border: 1px solid var(--avatar-border);
      border-radius: 6px;
      transform: rotate(-8deg);
      transform-origin: center;
      box-shadow: 0 6px 14px rgba(40, 40, 40, 0.12);
      margin-bottom: 6px;
      cursor: pointer;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.35s ease;
    }
    .avatar:hover {
      transform: rotate(0deg);
      box-shadow: 0 10px 22px rgba(40, 40, 40, 0.16);
    }
    @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
    .avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }

    /* Avatar reveal — keeps its resting -8° tilt (the generic reveal's translateY
       would wipe the rotation), so it just fades/rises into the tilted rest pose. */
    .avatar[data-reveal] {
      transition: opacity 0.55s var(--ease),
                  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.35s ease;
    }
    .avatar[data-reveal]:not(.revealed) { opacity: 0; transform: rotate(-8deg) translateY(14px); }
    .avatar[data-reveal].revealed        { opacity: 1; transform: rotate(-8deg); }
    .avatar[data-reveal].revealed:hover  { transform: rotate(0deg); }   /* keep the hover straighten */

    /* FIRST VISIT ONLY (added by JS once per session): the frame swings in like a
       picture settling on the wall, damping to its -8° rest angle. */
    /* Damped pendulum: big first swing, each swing smaller, easing to a gentle
       stop at the -8° resting tilt (amplitude from rest decays 16→9→6→4→2.5→1.3→0). */
    .avatar.frame-in { animation: avatar-frame-in 3.2s ease-in-out both; }
    @keyframes avatar-frame-in {
      0%   { opacity: 0; transform: rotate(15deg); }    /* released, 23° from rest */
      15%  { opacity: 1; transform: rotate(-23deg); }   /* hard first swing, 15° past rest */
      31%  { transform: rotate(1deg); }                 /* 9° back past rest */
      46%  { transform: rotate(-14deg); }               /* 6° */
      60%  { transform: rotate(-4deg); }                /* 4° */
      73%  { transform: rotate(-10.5deg); }             /* 2.5° */
      86%  { transform: rotate(-6.7deg); }              /* 1.3° */
      100% { transform: rotate(-8deg); }                /* settles smoothly at rest */
    }
    @media (prefers-reduced-motion: reduce) { .avatar.frame-in { animation: none; } }

    .about { display: flex; flex-direction: column; gap: 24px; }

    .headline { display: flex; flex-direction: column; gap: 8px; }
    .headline-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .name {
      font-family: var(--mono);
      font-weight: 500;
      font-style: italic;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -0.04em;
      color: var(--accent);
    }
    .site-clock {
      font-size: 14px;
      line-height: 22px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      padding-right: 10px;
    }
    .bio { display: flex; flex-direction: column; gap: 10px; }
    .bio p {
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
      font-weight: 400;
    }
    .bio a {
      color: var(--text);
      font-weight: 500;
      text-decoration: none;
      position: relative;
      white-space: nowrap;
      transition: color 0.18s ease;
    }
    /* hand-drawn wavy underline (recolorable via mask) */
    .bio a::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      bottom: -5px;
      height: 3px;
      background-color: var(--underline);
      -webkit-mask: var(--wave) repeat-x left center / auto 3px;
              mask: var(--wave) repeat-x left center / auto 3px;
      transition: background-color 0.18s ease;
    }
    /* On hover the hand-drawn underline recolors to the accent (matches design). */
    .bio a:hover::after { background-color: rgba(184, 25, 25, 0.24); }

    /* ---------- Social ---------- */
    .social { display: flex; gap: 12px; align-items: center; }
    .social a {
      position: relative;
      width: 28px; height: 28px;
      border-radius: 6px;
      background: var(--icon-bg);
      display: flex; align-items: center; justify-content: center;
      color: var(--icon);
      transition: background 0.18s ease, transform 0.18s ease;
    }
    /* No custom-cursor badge on social icons — only the chip background shifts. */
    .social a:hover { background: var(--chip-hover-bg); transform: translateY(-1px); }

    /* Email → "Copy email" tooltip above the chip (not a cursor badge). */
    .email-tip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--card-bg);
      color: var(--text);
      font-size: 12px;
      line-height: 16px;
      padding: 4px 8px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
      z-index: 20;
    }
    .social a.email:hover .email-tip,
    .social a.email:focus-visible .email-tip { opacity: 1; }

    /* LinkedIn / X → "Go to …" tooltip above the chip (same look as the email
       tip, but CSS-only via aria-label so it applies wherever the icons appear). */
    .social a[aria-label="LinkedIn"]::after,
    .social a[aria-label="X"]::after {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--card-bg);
      color: var(--text);
      font-size: 12px;
      line-height: 16px;
      padding: 4px 8px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
      z-index: 20;
    }
    .social a[aria-label="LinkedIn"]::after { content: "Go to LinkedIn"; }
    .social a[aria-label="X"]::after        { content: "Go to Twitter/X"; }
    .social a[aria-label="LinkedIn"]:hover::after,
    .social a[aria-label="LinkedIn"]:focus-visible::after,
    .social a[aria-label="X"]:hover::after,
    .social a[aria-label="X"]:focus-visible::after { opacity: 1; }
    /* hand-drawn glyphs — each keeps its own aspect ratio (via the svg's
       width/height attrs); currentColor inherits .social a's --icon color */
    .social svg { display: block; }

    /* ---------- Sections ---------- */
    .section { display: flex; flex-direction: column; gap: 16px; }
    .section-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--label);
    }

    /* ---------- Work grid ---------- */
    .work-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 24px;
      row-gap: 40px;
    }
    .project { display: flex; flex-direction: column; gap: 12px; }

    /* The card shadow lives on the UNCLIPPED wrap, NOT on .thumb. .thumb carries the
       corner-cut clip-path, and per the CSS painting order clip-path is applied AFTER
       filter — so a drop-shadow on .thumb gets clipped away at the card edge (invisible
       shadow). Putting the filter here means its drop-shadow is generated from the
       wrap's rendered content — which INCLUDES the clipped .thumb — so it still traces
       the peeled/cut shape on hover, but nothing clips it. drop-shadow has no spread,
       so the ambient blur is pulled in (24→20) to fake the Figma -14 spread.
       Rest = Figma "Thumbnail" (node 2123:65868): 0 1px 4px 0.08 + 0 6px 24px -14px 0.06. */
    .thumb-wrap {
      position: relative;
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.09))
              drop-shadow(0 6px 20px rgba(0, 0, 0, 0.07));
      transition: filter 0.34s var(--ease);
    }
    /* Hover: KEEP a contact shadow on the cut so the lifted flap stays grounded —
       matching the Figma peel card (node 2123:65851: 0 1px 4px rgba(13,13,26,0.05) +
       0 6px 24px -6px rgba(13,13,26,0.04)). The shadow traces the clipped .thumb's
       alpha, so the diagonal cut gets a soft shadow band too — at 4px blur / low alpha
       it reads as a clean fold, not a hard line. The flap's OWN cast shadow is baked
       into curl.svg (-2/2.5 16% + -5/7 10%) and sits on top. Warm near-black #0D0D1A
       tint matches the design's peel shadow color. */
    .project:hover .thumb-wrap {
      filter: drop-shadow(0 1px 4px rgba(13, 13, 26, 0.06))
              drop-shadow(0 6px 22px rgba(13, 13, 26, 0.05));
    }

    /* page-peel (matches the Thumbnail "Property 1=2" component):
       the bottom-right corner is SUBTRACTED from the card with an animated
       clip-path polygon (51px legs = the design's curl-body). clip-path
       interpolates, so the corner FOLDS smoothly (not a snap); border-radius
       keeps the other three corners rounded. The cut reveals the real page
       paper behind the card. The curl flap is a sibling (outside .thumb),
       so the clip never touches it. */
    .thumb {
      padding: 5px;
      background: var(--card-bg);
      /* No outer border — the Figma "Thumbnail" frame stroke is not visible. */
      border-radius: 4px;
      /* Subtract the bottom-right corner on a 50px diagonal (matches the design's
         card-bg vector M0 0 H288 V200 L238 250 H0 Z). The cut reveals the real
         page paper behind the card — that IS the peel. Both states share the
         calc() form so the fold animates (0 → 50px) instead of snapping. */
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%);
      /* Shadow lives on .thumb-wrap (see above) — NOT here, or the clip-path would
         eat it. This element only owns the corner-cut geometry. */
      transition: clip-path 0.34s var(--ease);
    }
    /* Hover: the corner folds away (shadow is handled by .thumb-wrap). */
    .project:hover .thumb {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%);
    }

    .curl {                    /* the folded flap: real curl.svg (gradient + shadow) */
      position: absolute;
      /* curl.svg is a 72px square whose paper region sits in viewBox [11..61];
         with an 11px offset on each side that region lands exactly on the card's
         50px corner cut, and the flap's fold spine sits on the diagonal. */
      right: -11px; bottom: -11px;
      width: 72px; height: 72px;
      background: var(--curl-image) no-repeat center / contain;
      opacity: 0;
      transform: scale(0.35);
      transform-origin: bottom right;
      transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
      pointer-events: none;
      z-index: 2;
    }
    .project:hover .curl { opacity: 1; transform: scale(1); }

    .thumb-inner {
      position: relative;
      background: var(--thumb-fill);
      border: 0.5px solid var(--thumb-border);
      border-radius: 3px;
      aspect-ratio: 280 / 242;
      width: 100%;
      overflow: hidden;
      /* Cut the inner content on the SAME diagonal line as the card. The inner
         sits 5px inside the card (1px border + 4px padding), so a 40px cut here
         (50 − 2×5) is COLINEAR with the card's 50px cut — the content reaches the
         fold edge exactly, leaving no white border strip along the diagonal. */
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%);
      transition: clip-path 0.34s var(--ease);
    }
    .project:hover .thumb-inner {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
    }
    /* Layered thumbnail: a STATIC backdrop (card bg + year + logomark) with the
       UI mockup on top. On hover ONLY the UI glides up — the year & logo stay
       put — so it reads as the inner screen lifting, not a dissolve. */
    .thumb-inner .backdrop {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }
    /* The UI is the FULL exported app screen. Everything is driven from the
       element's TOP-LEFT corner (transform-origin: 0 0) so it maps 1:1 to the
       Figma thumbnail model, where the screen layer's top-left is placed at
       (--x, --y) and the frame clips whatever bleeds past its edges.
       REST: scaled up so the screen fills the card and bleeds off the
       bottom-right (grey shows only along the top + left, where the logo/year
       sit). HOVER: the screen settles to ~card width and tilts 4° about its
       top-left corner — matching the Figma "screen tilt on hover" card
       (node 311:100623): 300px wide in the 278px frame, origin at ~(54,41). */
    .thumb-inner .ui {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: auto;
      transform-origin: top left;
      transform: translate(var(--rx, 0px), var(--ry, 0px)) scale(var(--rs, 1));
      /* Faint lift so the screen doesn't read as pasted-flat on the grey
         backdrop — matches the drop-shadow baked into the Figma screens
         (blur 12, rgba(0,0,0,0.04), no offset), which was cropped out of the
         exported PNGs. */
      filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.04));
      transition: transform 0.5s var(--ease);
      will-change: transform;
    }
    /* hover (first three cards): the screen keeps its size (same --rs) but RISES
       and tilts — its top-left corner moves from (--rx,--ry) up/right to
       (--hx,--hy) and it rotates 5°. Matches the Figma master component
       (node 102:33616): rest origin (48,54) → hover origin (55,36), rot 5°. */
    .project:hover .thumb-inner .ui {
      transform: translate(var(--hx, 0px), var(--hy, 0px)) scale(var(--rs, 1)) rotate(5deg);
    }
    /* Concept (mobile mockup): on hover the phones grow slightly and rise so
       both are fully in view (Figma hover card, node 128:3022 — 188×212 at
       (77,63) vs the 176×209 at (82,90) rest). No CSS rotate — the tilt is
       already baked into the phone art. */
    .project:hover .thumb-inner.mock .ui {
      transform: translate(var(--hx, 0px), var(--hy, 0px)) scale(var(--hs, 0.7));
    }

    @media (prefers-reduced-motion: reduce) {
      .thumb, .curl, .thumb-inner .ui { transition: none; }
    }

    /* Title + category on ONE flowing line, separated by a dark "·" (Figma). The
       font-size:0 collapses the whitespace between the spans so the only gap is
       the separator's own margin. */
    .project-meta { display: block; font-size: 0; }
    .project-title    { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--text); }
    .project-category { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--muted); }
    .project-category::before { content: "·"; margin: 0 5px; color: var(--text); }
    /* muted mid-dot before a trailing note (e.g. "Metafore · Publishing soon!").
       The note + its dot stay together (nowrap) and wrap as one unit onto the next
       line when the row is tight — while "· Metafore" flows up with the title. The
       zero-width space before it in the markup is the break opportunity. */
    .project-category .cat-note { white-space: nowrap; }
    .project-category .cat-note::before { content: "·"; margin: 0 5px; }

    /* Empty placeholder thumbnail (first card — matches the design's blank
       inner). No UI/backdrop; the fold still reveals the paper. */
    .thumb-inner.empty { background: var(--thumb-fill); }

    /* Card logomark (top-left) + year (top-right), from the Figma thumbnail. */
    .thumb-inner .card-logo,
    .thumb-inner .card-year,
    .thumb-inner .card-label {
      position: absolute;
      top: 12px;
      z-index: 3;
      pointer-events: none;
    }
    .thumb-inner .card-logo {
      left: 12px;
      width: 24px; height: 24px;
      display: flex; align-items: center;
    }
    .thumb-inner .card-logo svg,
    .thumb-inner .card-logo img { display: block; width: 24px; height: auto; }
    .thumb-inner .card-year {
      right: 12px;
      font-family: var(--sans);
      font-size: 14px;
      line-height: 20px;
      color: var(--label);
    }
    /* Top-left text label (e.g. "Concept" on the 2022 card), from the Figma thumbnail. */
    .thumb-inner .card-label {
      left: 12px;
      font-family: var(--sans);
      font-size: 14px;
      line-height: 20px;
      color: var(--label);
    }

    /* "Publishing soon" badge (Metafore card) — a white pill flush with the
       card's bottom-right corner (Figma "Badge_icon_trailing"). It sits in
       .thumb-wrap (not .thumb-inner, which clips) so it can hug the edge; z-index
       keeps it above the peel flap. */
    .card-badge {
      position: absolute;
      right: 0; bottom: 0;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      font-family: var(--sans);
      font-size: 12px;
      line-height: 16px;
      color: var(--text);
      background: var(--card-bg);
      /* Only the inner (top-left) corner is rounded — 4px there, 0 on the three
         corners flush with the card edge (Figma "Badge_icon_trailing" radii). */
      border-radius: 4px 0 0 0;
      padding: 4px 8px;
      /* Two soft drop-shadows cast up-left toward the card (Figma badge effects). */
      box-shadow: -1px -1px 4px 0 rgba(0, 0, 0, 0.04),
                  -2px 0 6px 0 rgba(0, 0, 0, 0.06);
      pointer-events: none;
      transition: opacity 0.34s var(--ease);
    }
    .card-badge svg { display: block; }
    /* on hover the corner peels; fade the badge so the flap reveals cleanly */
    .project:hover .card-badge { opacity: 0; }

    /* hand-drawn "opens elsewhere" arrow beside a project category (4th card) */
    .project-arrow {
      display: inline-block;
      width: 8px; height: 8px;
      margin-left: 6px;
      vertical-align: baseline;
    }
    .project-arrow svg { display: block; width: 8px; height: 8px; }

    /* Hand-drawn lock after the category (case study is gated) — from Figma. */
    .project-lock {
      display: inline-block;
      width: 10px; height: 11px;
      margin-left: 6px;
      vertical-align: -1px;
    }
    .project-lock svg { display: block; width: 10px; height: 11px; }

    /* ---------- Experience ---------- */
    .exp-list { display: flex; flex-direction: column; gap: 40px; }
    .exp-item { display: flex; flex-direction: column; gap: 4px; }
    .exp-head { display: flex; align-items: center; gap: 8px; }
    .exp-company {
      font-size: 15px;
      line-height: 26px;
      font-weight: 500;
      color: var(--text);
      text-decoration: none;
      position: relative;
      white-space: nowrap;
      transition: color 0.18s ease;
    }
    /* same hand-drawn wavy underline as the bio links */
    .exp-company::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      bottom: -4px;
      height: 3px;
      background-color: var(--underline);
      -webkit-mask: var(--wave) repeat-x left center / auto 3px;
              mask: var(--wave) repeat-x left center / auto 3px;
      transition: background-color 0.18s ease;
    }
    /* Same accent recolor on hover as the bio links. */
    .exp-company:hover::after { background-color: rgba(184, 25, 25, 0.24); }
    .exp-date { font-size: 14px; line-height: 24px; color: var(--muted); }
    .exp-desc { font-size: 14px; line-height: 24px; color: var(--text); }
    /* Inline links inside a description: same hand-drawn wavy underline as the
       bio/company links, but inheriting the 14px description size. */
    .exp-desc a {
      color: var(--text);
      font-weight: 500;
      text-decoration: none;
      position: relative;
      white-space: nowrap;
      transition: color 0.18s ease;
    }
    .exp-desc a::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      bottom: -4px;
      height: 3px;
      background-color: var(--underline);
      -webkit-mask: var(--wave) repeat-x left center / auto 3px;
              mask: var(--wave) repeat-x left center / auto 3px;
      transition: background-color 0.18s ease;
    }
    .exp-desc a:hover::after { background-color: rgba(184, 25, 25, 0.24); }

    /* ---------- More work carousel (home) ---------- */
    .mw-preview-head { display: flex; align-items: center; justify-content: space-between; }
    .view-all {
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;
      text-decoration: none;
      position: relative;
      white-space: nowrap;
      transition: color 0.18s ease;
    }
    .view-all::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      bottom: -4px;
      height: 3px;
      background-color: var(--underline);
      -webkit-mask: var(--wave) repeat-x left center / auto 3px;
              mask: var(--wave) repeat-x left center / auto 3px;
      transition: background-color 0.18s ease;
    }
    .view-all:hover::after { background-color: rgba(184, 25, 25, 0.24); }

    /* Coverflow-style auto-playing carousel: cards are all absolutely stacked
       on center, JS moves each one to a -2..2 "slot" (translateX/scale/opacity
       set as inline custom props) every 3s. Card width is a % of the track so
       the whole thing scales with the column instead of needing breakpoints. */
    /* .section already puts 16px between its flex children (the head row and
       this) — add 4px more so More work specifically gets 20px, without
       touching the shared .section gap other sections rely on. */
    .mw-carousel { margin-top: 4px; }
    .mw-carousel-track {
      position: relative;
      width: 100%;
      /* All children are position:absolute, so the track has no in-flow
         content to size itself by — pin its height to the center card's box
         (Figma: 600px column, 270px-tall center card, +20px → 600/290).
         No overflow:hidden here: with exactly 5 images filling the 5 visible
         slots, no card is ever parked off-screen, and clipping the track
         was hard-cutting the cards' drop shadows into a visible box edge. */
      aspect-ratio: 600 / 290;
    }
    /* Card "mat" (white padding + hairline border) matches .mw-card on the
       more-work page — same padding/bg/border/radius. Unlike .mw-card, the
       black scrim here darkens the WHOLE card (mat included), not just the
       image. Shadow strength is stepped per stacking depth (data-depth, set
       by JS from |slots from center|) rather than a single scaled token —
       Figma's auto-scaled shadow reads too flat once cards overlap, so each
       level gets its own, deliberately bolder shadow to sell the stack. */
    .mw-carousel-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 73.3%;
      aspect-ratio: 440 / 290;
      margin: 0;
      display: block;
      padding: 5px;
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transform: translate(-50%, -50%) translateX(var(--tx, 0px)) scale(var(--s, 0.5));
      z-index: var(--z, 0);
      transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.7s ease;
    }
    /* depth 0 = center (most elevated), 1 = near, 2 = far (least elevated) */
    .mw-carousel-card[data-depth="1"] { box-shadow: 0 1.5px 5px rgba(0, 0, 0, 0.05), 0 10px 22px rgba(0, 0, 0, 0.06); }
    .mw-carousel-card[data-depth="0"] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.08); }
    .mw-carousel-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
    .mw-carousel-scrim {
      position: absolute;
      inset: 0;
      border-radius: 4px;
      background: #000;
      opacity: var(--scrim, 0);
      transition: opacity 0.7s ease;
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) { .mw-carousel-card, .mw-carousel-scrim { transition: none; } }

    /* ---------- Footer illustration ---------- */
    .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 70px;
      text-align: center;
    }
    /* Wrap holds the base 4-flower illustration plus extra "sprout" flowers
       (clones of one bloom from the illustration) that grow in on hover. */
    .footer-illo-wrap { position: relative; display: inline-block; line-height: 0; }
    .footer-illo { width: 95px; height: auto; display: block; }
    .footer-illo-wrap .sprout {
      position: absolute;
      bottom: 1px;                 /* root at the base of the illustration's stems */
      left: 50%;
      width: 15px; height: auto;
      /* pivot at the flower's actual stem base (≈73% across, near the bottom of
         the sprout art) so it stays planted while it leans and grows */
      transform-origin: 73% 98%;
      /* collapsed at the root; only scale changes on hover so it grows out along
         its lean (--r) like a stem fanning out of a bouquet */
      transform: translateX(var(--x)) rotate(var(--r)) scale(0);
      transition: transform 0.5s cubic-bezier(0.18, 0.7, 0.2, 1);
      transition-delay: var(--d);
      pointer-events: none;
      will-change: transform;
    }
    .footer-illo-wrap:hover .sprout,
    .footer-illo-wrap:focus-within .sprout {
      transform: translateX(var(--x)) rotate(var(--r)) scale(var(--s));
    }
    @media (prefers-reduced-motion: reduce) {
      .footer-illo-wrap .sprout { transition: none; }
    }
    .footer-note {
      font-size: 14px;
      line-height: 22px;
      font-weight: 400;
      color: var(--icon);
    }

    /* ---------- Custom cursor badge ---------- */
    /* A small white badge follows the pointer over interactive elements, showing
       contextual content per the design: "View" on cards, "Copy email" on the
       email chip, the Metafore logomark on Metafore links, an Instagram glyph on
       the drawing/videos links. Enabled only for fine pointers (see JS). */
    #cursor {
      position: fixed;
      top: 0; left: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 24px;
      width: max-content;          /* size to the text… */
      max-width: 200px;            /* …but wrap long captions to 2 lines */
      padding: 4px 8px;
      background: var(--card-bg);
      border: 0.5px solid var(--underline);
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 16px;
      color: var(--text);
      text-align: left;
      white-space: normal;
      pointer-events: none;
      will-change: transform;
    }
    #cursor.show { display: inline-flex; }
    /* icon-only badge (Metafore / Instagram) → square 24×24 per the design */
    #cursor.icon-only { width: 24px; padding: 4px; border-radius: 4px; }
    #cursor .cursor-icon { display: none; align-items: center; justify-content: center; }
    #cursor .cursor-icon.has { display: inline-flex; }
    #cursor .cursor-icon svg { display: block; }
    #cursor .cursor-text { display: none; }
    #cursor .cursor-text.has { display: inline; }
    /* trailing icon (e.g. the chevron in the "Hello! 👋" avatar badge) */
    #cursor .cursor-icon-after { display: none; align-items: center; justify-content: center; }
    #cursor .cursor-icon-after.has { display: inline-flex; }
    #cursor .cursor-icon-after svg { display: block; }
    /* Hide the native cursor over custom-cursor targets — only once JS confirms a
       fine pointer, so touch/keyboard users keep the normal cursor. */
    .has-custom-cursor [data-cursor],
    .has-custom-cursor [data-cursor-icon] { cursor: none; }
    /* img.cs-zoom's own cursor:zoom-in (below) would otherwise win over the
       inherited none, since it targets the hovered element directly — showing
       the browser's native zoom cursor stacked on top of our custom badge. */
    .has-custom-cursor [data-cursor-icon] img.cs-zoom { cursor: none; }
    @media (hover: none), (pointer: coarse) { #cursor { display: none !important; } }

    /* ---------- Floating dock (ruler aesthetic) ---------- */
    /* Geometry, colors, shadows, line, red marker and ruler all taken directly
       from the Figma component (Frame 2147262857, 256×60). */
    .dock {
      position: fixed;
      left: 50%;
      bottom: 32px;
      transform: translateX(-50%);
      width: 224px;
      height: 60px;
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);
      border-radius: 6px;
      box-shadow: var(--dock-shadow);
      z-index: 200;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    /* hide the dock while an image preview is open (main.js toggles this) */
    body.cs-lightbox-open .dock { opacity: 0; visibility: hidden; }
    @media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
    /* icons row across the top — 4 icons centre at 37/87/137/187 */
    .dock-icons {
      position: absolute;
      top: 13px; left: 0; right: 0;
      display: flex;
      justify-content: center;
      gap: 26px;
    }
    /* hairline separating the icons from the ruler */
    .dock-line {
      position: absolute;
      left: 0; right: 0; top: 43px;
      height: 1px;
      background: #EFEFEF;
    }
    /* red active marker — sits on the line beneath the active icon (JS
       repositions it precisely; 34px is the fallback, matching Home's centre
       in the 4-icon dock). */
    .dock-dot {
      position: absolute;
      left: 34px; top: 40px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      border: 1px solid var(--card-bg);
      box-sizing: border-box;
    }
    /* ruler tick marks along the bottom */
    .dock-ruler {
      position: absolute;
      left: 8px; right: 8px; bottom: 0;
      height: 14px;
      pointer-events: none;
    }
    .dock-ruler svg { display: block; width: 100%; height: 14px; }
    .dock-item {
      position: relative;
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      color: var(--muted);
      transition: color 0.18s ease;
    }
    .dock-item.active { color: var(--icon); }
    /* hover: only a slight icon-color change — no fill, no border */
    .dock-item:hover { color: var(--icon); }
    .dock-item.active:hover { color: var(--text); }
    .dock-item svg { display: block; width: 24px; height: 24px; }
    .dock-item svg path { stroke: currentColor; }
    .dock-item svg rect { stroke: currentColor; }
    .dock-item.active svg path,
    .dock-item.active svg rect { fill: currentColor; }
    /* Art icon: the outline brush is open strokes and can't be cleanly filled,
       so swap it for the solid brush glyph when the item is active. */
    .dock-item .dock-ico--filled { display: none; }
    .dock-item.active .dock-ico--outline { display: none; }
    .dock-item.active .dock-ico--filled { display: block; }
    .dock-item .dock-ico--filled path { stroke: none; fill: currentColor; }
    /* hover label tooltip above each icon */
    .dock-item::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: var(--card-bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 12px;
      line-height: 16px;
      padding: 4px 8px;
      border-radius: 4px;
      border: 0.5px solid var(--underline);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .dock-item:hover::after,
    .dock-item:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ---------- Case-study overlay ---------- */
    /* Clicking a card zooms the full page open FROM that card (the panel scales
       up from the card's position + fades in). The page's top image mirrors the
       card's top image, so it reads as the card simply zooming into the page. */
    /* full-bleed: the case study covers the ENTIRE screen (not a floating
       card on a dimmed backdrop) — it just behaves like a modal: opens over
       the page, locks scroll underneath, closes with the cross / Esc. */
    .cs-overlay {
      position: fixed;
      inset: 0;
      z-index: 400;
      visibility: hidden;
      pointer-events: none;
    }
    .cs-overlay.open { visibility: visible; pointer-events: auto; }

    /* The paper background appears quickly; the ZOOM lives on the cover image
       (a FLIP from the clicked card, set in JS) and the text FADES IN just
       after — so it reads as the card's image opening up, then the copy
       arriving slowly. */
    .cs-panel {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      background-color: var(--paper-bg);
      background-image: var(--paper-image);
      background-repeat: repeat;
      background-size: var(--paper-size);
      background-blend-mode: var(--paper-blend);
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    .cs-overlay.open .cs-panel { opacity: 1; }

    /* cover image zooms in with a single keyframe — identical for EVERY card
       (no dependence on where the card sits or how the title wraps). 0.42s is
       ~30% faster than the previous 0.6s. */
    .cs-cover { transform-origin: center center; }
    @keyframes cs-zoom {
      from { transform: scale(0.72); }
      to   { transform: scale(1); }
    }
    .cs-overlay.open .cs-cover { animation: cs-zoom 0.42s var(--ease); }
    @media (prefers-reduced-motion: reduce) {
      .cs-overlay.open .cs-cover { animation: none; }
    }

    /* The header (title / meta / cover) shows immediately on open. Everything
       below reveals on SCROLL: each content block fades + rises in as it enters
       the viewport, and stays put (one-time — no re-animation on scroll back up).
       JS adds .reveal-in via an IntersectionObserver. */
    .cs-content .cs-section > *,
    .cs-content .cs-divider,
    .cs-content .cs-footer {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.55s ease, transform 0.55s var(--ease);
    }
    .cs-content .cs-section > .reveal-in,
    .cs-content .cs-divider.reveal-in,
    .cs-content .cs-footer.reveal-in {
      opacity: 1;
      transform: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .cs-content .cs-section > *,
      .cs-content .cs-divider,
      .cs-content .cs-footer { opacity: 1; transform: none; transition: none; }
    }

    /* quick section nav (scroll-spy) — floats in the left gutter */
    .cs-nav {
      position: fixed;
      top: 50%;
      left: 56px;
      transform: translateY(-50%);
      z-index: 4;
      display: flex;
      flex-direction: column;
      gap: 18px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .cs-overlay.text-in .cs-nav { opacity: 1; }
    .cs-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1;
      color: var(--muted);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s var(--ease);
    }
    .cs-nav-item::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: transparent;
      flex: none;
      transition: background 0.3s var(--ease);
    }
    .cs-nav-item:hover { color: var(--text); }
    .cs-nav-item.active { color: var(--text); }
    .cs-nav-item.active::before { background: var(--accent); }

    /* content sits in a readable centred 600px column on the full-bleed page —
       exactly 600px, no horizontal padding, so text and images are a true
       600px wide (matching the design's 600px column). */
    .cs-content {
      max-width: 600px;
      margin: 0 auto;
      padding: 80px 0 80px;
    }
    /* only pad the sides once the viewport is too narrow to hold 600px */
    @media (max-width: 640px) {
      .cs-content { padding-left: 20px; padding-right: 20px; }
    }
    /* back chevron sits to the LEFT of the title, hanging into the gutter
       (per the design). It's fixed, so it stays pinned near the top of the
       viewport at every scroll position while the case study is open.
       left = column-centre (50%) − half-column (300) − 34px into the gutter. */
    .cs-title-row { display: flex; align-items: flex-start; }
    .cs-back {
      position: fixed;
      top: 88px;
      left: max(20px, calc(50% - 358px));
      flex: none;
      width: 26px; height: 26px;
      display: flex; align-items: center; justify-content: center;
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.04);
      color: var(--icon);
      cursor: pointer;
      z-index: 5;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .cs-back:hover {
      background: var(--card-bg-hover);
      box-shadow: 0 2px 6px rgba(10, 13, 18, 0.10), inset 0 0 0 1px rgba(10, 13, 18, 0.04);
    }
    /* The overlay moves focus to this button on open (main.js), which otherwise
       shows the browser's default blue focus ring. Suppress it for mouse/programmatic
       focus; keep a tasteful accent ring for keyboard users (accessibility). */
    .cs-back:focus { outline: none; }
    .cs-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* The dialog container receives focus on open (to move focus into the study
       for keyboard/AT users); it must never render a focus ring itself. */
    .cs-overlay:focus, .cs-overlay:focus-visible { outline: none; }
    /* On narrow widths the back arrow no longer has a side gutter to sit in, so it
       lines up over the title column. Lift it into the top padding so it sits ~12px
       ABOVE the title on first view instead of overlapping it; being fixed, it
       stays pinned there while scrolling. (Placed after the base rule so it wins.) */
    @media (max-width: 640px) {
      .cs-back { top: 26px; }
    }
    .cs-back svg { display: block; }
    .cs-section { scroll-margin-top: 32px; }
    .cs-category {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--label);
      margin-bottom: 12px;
    }
    .cs-title {
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
      color: var(--accent);
      margin-bottom: 24px;
    }
    .cs-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;   /* columns stretched across the full width (design: SPACE_BETWEEN + fill) */
      gap: 16px 40px;                   /* 40px = minimum column gap when space collapses; 16px row gap on wrap */
      padding-bottom: 24px;
      margin-bottom: 40px;
      border-bottom: 1px solid var(--card-border);
    }
    .cs-meta > div { display: flex; flex-direction: column; gap: 6px; }
    .cs-meta-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .cs-meta-val { font-size: 14px; line-height: 20px; color: var(--text); }
    .cs-cover {
      margin-bottom: 32px;
      background: var(--card-bg);
      border: 1px solid var(--hairline);    /* Figma cover frame: hairline border, no mat */
      border-radius: 4px;
      overflow: hidden;             /* image fills to the border (padding 0) */
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 6px 24px -14px rgba(0, 0, 0, 0.12);
    }
    .cs-cover img { display: block; width: 100%; height: auto; }

    /* Case Study 2 (Cosmofeed): the hero cover also sits on the 6px white mat,
       matching the Figma "Thumbnail" frame (white card, 6px padding, inner image
       radius 3). The .cs-frame figures inherit the mat from the base rule. */
    #caseStudyCosmo .cs-cover { padding: 6px; }
    #caseStudyCosmo .cs-cover img { border-radius: 3px; }
    /* This export is a self-contained white card (its baked-in shadow was cropped
       out of the PNG), so it sits flush with no mat/border and gets its lift from a
       CSS shadow instead. 6px radius matches the Figma card (Frame 2147262900). */
    #caseStudyCosmo .cs-frame--flush {
      padding: 0;
      border: none;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 28px -10px rgba(0, 0, 0, 0.14);
    }
    #caseStudyCosmo .cs-frame--flush > .cs-fig { border-radius: 6px; }

    .cs-section { margin-bottom: 60px; scroll-margin-top: 32px; }
    /* Merged sections group two headings under one nav item (About + Phase I on
       Unify, About + Introduction on Cosmofeed). The second heading gets a 32px
       gap from the first block, matching the design. */
    #cs-phase1 p + h2, #csc-intro p + h2 { margin-top: 32px; }
    /* every section heading is 16px / 30px Medium (from the design) */
    .cs-section h2,
    .cs-section h3 {
      font-size: 16px;
      line-height: 30px;
      font-weight: 500;   /* Helvetica Neue Medium */
      color: var(--text);
      margin-bottom: 4px;   /* heading sits close to its body text (from the design) */
    }
    .cs-section h3 { margin-top: 24px; margin-bottom: 4px; }
    /* a "hero" image directly under a heading: 16px above, 32px below (design) */
    .cs-section h2 + .cs-frame, .cs-section h3 + .cs-frame,
    .cs-section h2 + .cs-dubai, .cs-section h3 + .cs-dubai { margin-top: 16px; margin-bottom: 32px; }
    .cs-section h2 + ul, .cs-section h2 + ol,
    .cs-section h3 + ul, .cs-section h3 + ol { margin-top: 4px; }
    /* the "Solving for 3Ts" sub-headings (1. Technical, etc.) are 15px, and each
       sub-section is separated by 64px — except the first, which sits 12px under
       the "Solving for 3Ts" heading (from the design) */
    #cs-3ts h3 { font-size: 15px; line-height: 24px; margin-top: 64px; }
    #cs-3ts h3:first-of-type { margin-top: 12px; }
    #cs-problem h3 { margin-top: 32px; }
    #cs-impact h3 { margin-top: 48px; }

    /* ---- Case Study 2 (Cosmofeed): typography & spacing tuned to the Figma
       design. h3 sub-headings are 15/26 Medium; sub-heading gaps are 32px
       (Redesign/Research), 48px (Impact) and 60px (Addressing sub-sections). */
    #caseStudyCosmo .cs-section h3 { font-size: 15px; line-height: 26px; margin-top: 32px; }
    #caseStudyCosmo #csc-addressing h3 { margin-top: 60px; }
    #caseStudyCosmo #csc-addressing h3:first-of-type { margin-top: 12px; }
    #caseStudyCosmo #csc-impact h3 { margin-top: 48px; }
    /* images: 32px block gap in top-level sections, 24px inside Addressing */
    #caseStudyCosmo .cs-frame { margin: 32px 0; }
    #caseStudyCosmo #csc-addressing .cs-frame { margin: 24px 0; }
    /* framed figures use a 4px outer radius (Figma "Thumbnail" cards); the flush
       intro/feedback exports keep their own 6px radius set above. */
    #caseStudyCosmo .cs-frame:not(.cs-frame--flush) { border-radius: 4px; }
    /* the feedback screenshot sits 12px under its heading (design) */
    #caseStudyCosmo #csc-impact h3 + .cs-frame { margin-top: 12px; }
    /* blockquote: muted-grey body with dark emphasis, 32px block gap */
    #caseStudyCosmo .cs-section blockquote { margin: 32px 0; color: var(--quote-muted); }
    #caseStudyCosmo .cs-section blockquote strong { color: var(--text); }
    /* the attribution line sits in the dark text colour in the design (not muted) */
    #caseStudyCosmo .cs-section blockquote cite { color: var(--text); }
    /* list items keep the 6px inter-item gap (Figma text listSpacing = 6). */
    #caseStudyCosmo .cs-section li { margin-bottom: 6px; }
    /* bulleted lead-in labels (Frauds:, Product Policies:, Sale of illegal items:)
       — Medium weight with a hanging bullet, each starting a 40px-separated
       sub-block, sitting 4px above its body text (from the design) */
    #caseStudyCosmo .cs-bullet {
      position: relative;
      padding-left: 20px;
      font-weight: 500;
      margin: 60px 0 4px;
    }
    #caseStudyCosmo .cs-bullet::before {
      content: "\2022";
      position: absolute;
      left: 5px;
      color: var(--text);
    }
    /* first bullet sits 12px under the sub-section heading; a bullet directly
       above an image gets the design's 12px label-to-image gap */
    #caseStudyCosmo #csc-addressing h3 + .cs-bullet { margin-top: 12px; }
    /* Scoped to #csc-addressing so it out-specifies the section's 24px .cs-frame
       margin — a bullet directly above an image keeps the design's 12px gap. */
    #caseStudyCosmo #csc-addressing .cs-bullet + .cs-frame { margin-top: 12px; }
    /* body text right after a bullet sits 4px below it (override the p+p 12px) */
    #caseStudyCosmo .cs-bullet + p { margin-top: 0; }
    /* inline label beside a section heading (e.g. "Aug 2024", the 3Ts subtitle) */
    .cs-date,
    .cs-subtitle { font-weight: 400; font-size: 15px; color: var(--muted); margin-left: 10px; }
    /* subtle centred separator between sections (from the design) — sits in the
       60px section gap, centred (60px above from the section, 60px below) */
    .cs-divider { display: flex; justify-content: center; margin: 0 0 60px; }
    .cs-divider img { display: block; width: 200px; height: auto; }
    /* case-study footer: flower illustration + note + socials, centred at the
       end of the column (reuses the landing-page footer illustration + socials) */
    .cs-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 100px;
      text-align: center;
    }
    .cs-footer .social { justify-content: center; }
    .cs-section p {
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
    }
    .cs-section p + p { margin-top: 12px; }
    .cs-section ul, .cs-section ol { margin: 12px 0; padding-left: 22px; }
    .cs-section li { font-size: 15px; line-height: 26px; color: var(--text); margin-bottom: 6px; }
    .cs-section blockquote {
      margin: 24px 0;
      padding-left: 16px;
      border-left: 3px solid var(--accent);
      font-style: italic;
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
    }
    /* attribution line under a testimonial blockquote */
    .cs-section blockquote cite {
      display: block;
      margin-top: 8px;
      font-style: normal;
      font-size: 14px;
      color: var(--muted);
    }
    /* Case Study 1 (UnifyApps): blockquotes are two-tone in the design — the
       regular italic body is muted #666 and only the emphasised run is #3D3D3D
       (matches the Cosmofeed treatment). */
    #caseStudy .cs-section blockquote { color: var(--quote-muted); }
    #caseStudy .cs-section blockquote strong { color: var(--text); }
    /* metric cards: three self-contained card exports in an even row. They carry
       their own shadow (transparent PNGs), so no frame/border is added here. */
    .cs-stats {
      display: flex;
      gap: 16px;
      margin: 32px 0 0;
    }
    .cs-stats img {
      flex: 1 1 0;
      min-width: 0;              /* allow shrinking below the image's 568px intrinsic width */
      max-width: 100%;
      height: auto;
      display: block;
    }
    /* the metric cards stay in a single row at every width — each fills an equal
       share (flex: 1) and scales down together rather than stacking on mobile. */
    @media (max-width: 560px) {
      .cs-stats { gap: 8px; }
    }
    /* case-study figures: each screenshot fills a framed card — a hairline border
       and 6px radius, NO inner mat (Figma "V1": 0.5px #ECEAE7 border, padding 0,
       image edge-to-edge). The Dubai polaroids are intentionally NOT framed (they
       carry their own baked-in shadow/tilt). */
    .cs-frame {
      display: block;
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);      /* Figma frame border */
      border-radius: 6px;
      overflow: hidden;
      padding: 6px;                     /* 6px white mat around every screenshot */
      margin: 24px 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 6px 24px -14px rgba(0, 0, 0, 0.04);
    }
    .cs-fig { display: block; width: 100%; height: auto; }  /* fills the frame */
    .cs-frame > .cs-fig { margin: 0; border-radius: 3px; }  /* inner image radius inside the mat */
    /* Case Study 1 (UnifyApps): every figure export already BAKES IN its own
       6px white mat + ~4px rounded corners (Figma "Thumbnail" frames), so the
       CSS frame must NOT add its own padding — doing so produced a double mat
       (~12px). The Phase I "V1" screenshot is the exception: it's flush (no mat,
       6px corners). So here the card contributes only the hairline border +
       shadow, with radius matched to each baked corner. */
    #caseStudy .cs-frame { padding: 0; border-radius: 4px; }
    #caseStudy .cs-frame > .cs-fig { border-radius: 4px; }
    #caseStudy #cs-phase1 .cs-frame { border-radius: 6px; }
    #caseStudy #cs-phase1 .cs-frame > .cs-fig { border-radius: 6px; }
    /* the user-quotes graphic is a transparent SVG that already carries its own
       cards — it needs NO mount frame or background; it sits straight on the paper. */
    .cs-fig--plain { margin: 24px 0; border-radius: 0; box-shadow: none; background: none; }
    /* real (non-placeholder) images open in a lightbox on click */
    img.cs-zoom { cursor: zoom-in; }
    /* empty image slots that are placeholders in the design */
    .cs-fig.placeholder { aspect-ratio: 16 / 7; background: var(--thumb); }

    /* placeholder image slot (used until real screenshots are dropped in): a
       framed grey block with a small "image" glyph, matching the design's empty
       image frames (588×368 ≈ 3:2). Sits inside a .cs-frame like a real figure. */
    .cs-ph {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      aspect-ratio: 588 / 368;
      border-radius: 4px;                 /* INNER, matches .cs-fig */
      background: var(--thumb-fill);
      color: var(--ph-icon);
    }
    .cs-ph svg { display: block; width: 34px; height: 34px; }
    /* cover placeholder keeps the same look but the cover's own aspect ratio */
    .cs-cover .cs-ph { aspect-ratio: 16 / 9; }
    /* modal cover placeholder fills the fixed 16:10 cover box */
    .pm-cover .cs-ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

    /* Dubai-sprint photos: three scattered polaroids (rotation + shadow are
       baked into the exports), lightly overlapping and staggered like the
       design. Each rises independently on hover. */
    .cs-dubai {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin: 32px 0;
    }
    .cs-dubai img {
      width: 38%;
      height: auto;
      position: relative;
      /* drop-shadow (not box-shadow) so it follows each polaroid's tilted shape */
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.1));
      transition: transform 0.32s var(--ease);
    }
    .cs-dubai img:nth-child(1) { margin-top: 7%;  margin-right: -7%; z-index: 1; }
    .cs-dubai img:nth-child(2) { margin-top: 0;                      z-index: 3; }
    .cs-dubai img:nth-child(3) { margin-top: 6%;  margin-left: -7%;  z-index: 2; }
    .cs-dubai img:hover { transform: translateY(-12px); z-index: 4; }

    /* ---------- Intro block (moved from the old project modal) ---------- */
    /* Outcome metric cards (three-up), matching the Figma card frames:
       189×144, 0.5px hairline border, 6px radius, 16/20 padding, soft shadow. */
    .cs-metrics {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 16px;
      margin: 32px 0;
    }
    .cs-metric {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 16px 20px;
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);
      border-radius: 6px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.05);
    }
    .cs-metric-num {
      font-family: "Roboto Mono", ui-monospace, monospace;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: var(--accent);
    }
    .cs-metric-text { display: flex; flex-direction: column; gap: 2px; }
    .cs-metric-title { font-family: var(--sans); font-size: 14px; line-height: 24px; font-weight: 500; color: var(--text); }
    .cs-metric-desc { font-family: var(--sans); font-size: 14px; line-height: 22px; color: var(--quote-muted); }

    /* Embedded demo video (Canva) — the grey placeholder in the design. */
    .cs-video {
      position: relative;
      aspect-ratio: 600 / 380;
      margin: 32px 0 0;
      border-radius: 8px;
      overflow: hidden;
      background: var(--thumb-fill);
    }
    .cs-video iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    /* User-quote cards (Phase I): three exported cards (avatar + card + text),
       each carrying its own soft shadow + transparent padding, so they lay out
       in a simple 3-up grid with no extra chrome. */
    .cs-quotes {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 24px 0;
      padding: 0;
    }
    .cs-quotes img { display: block; width: 100%; height: auto; }
    @media (max-width: 560px) {
      /* Keep the outcome + quote cards in a horizontal row on phones so they
         stay compact instead of stretching to full width. */
      .cs-metrics { gap: 8px; }
      .cs-metric { padding: 12px 12px; gap: 12px; }
      .cs-metric-num { font-size: 14px; line-height: 20px; }
      .cs-metric-title { font-size: 13px; line-height: 18px; }
      .cs-metric-desc { font-size: 12px; line-height: 17px; }
      .cs-quotes { gap: 6px; }
    }

    /* ---------- Image lightbox / preview ---------- */
    .cs-lightbox {
      position: fixed;
      inset: 0;
      z-index: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;                              /* image → caption gap (design) */
      padding: 40px 72px;
      background: rgba(0, 0, 0, 0.6);         /* design overlay: black 60% */
      -webkit-backdrop-filter: blur(8px);     /* design: background blur radius 8 */
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      cursor: zoom-out;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    .cs-lightbox.open { opacity: 1; visibility: visible; }
    .cs-lightbox img.cs-lightbox-img {
      display: block;
      width: auto;
      height: auto;
      max-width: min(900px, 88vw);            /* design image width: 900px */
      max-height: 78vh;
      /* mat (padding + background) and radius are set inline per-image in JS to
         mirror the on-page figure exactly; these are just sane fallbacks. */
      background: var(--card-bg);
      padding: 6px;
      border-radius: 4px;
    }
    .cs-lightbox figcaption {
      font-family: var(--sans);
      font-size: 15px;                        /* design caption size */
      line-height: 26px;                      /* design caption line-height */
      color: rgba(255, 255, 255, 0.85);       /* design: white 85% */
      text-align: center;
      max-width: 900px;
    }
    /* prev / next navigators (design: 32px circle, black 80%, edge-anchored) */
    .cs-lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .cs-lightbox-nav:hover { background: rgba(0, 0, 0, 0.95); }
    .cs-lightbox-nav.prev { left: 24px; }
    .cs-lightbox-nav.next { right: 24px; }
    .cs-lightbox-nav svg { display: block; }

    /* ---------- Project intro modal ---------- */
    /* The UniFi apps card opens this first: a floating modal (cover image, a
       short summary, and a pinned CTA) over a LIGHTLY-BLURRED page — no black
       overlay, the page just softens behind it. Its CTA reveals the full case
       study. Styled to match the site: red eyebrow, Helvetica Neue throughout,
       soft rounded card. */
    .pm-overlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      /* dark, blurred scrim (matches the Figma modal background: black 60% +
         8px background-blur — same treatment as the preview/lightbox). */
      background: rgba(0, 0, 0, 0.6);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }
    .pm-overlay.open { opacity: 1; visibility: visible; }

    .pm-card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: min(560px, 100%);
      max-height: min(880px, calc(100vh - 48px));
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
      overflow: hidden;                          /* clip cover to rounded corners */
      transform: translateY(16px) scale(0.98);
      transition: transform 0.34s var(--ease);
    }
    .pm-overlay.open .pm-card { transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .pm-card { transform: none; transition: none; }
    }

    /* cover + header + body scroll together; the footer stays pinned */
    .pm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    .pm-cover {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: var(--thumb-fill);
      display: block;
    }
    .pm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .pm-close {
      position: absolute;
      top: 16px; right: 16px;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      border: none;
      border-radius: 50%;
      background: var(--chip-translucent);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: var(--text);
      cursor: pointer;
      z-index: 3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
      transition: background 0.15s ease;
    }
    .pm-close:hover { background: var(--card-bg); }
    .pm-close svg { display: block; }

    .pm-head { padding: 26px 28px 22px; }
    .pm-eyebrow {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1;
      color: var(--accent);
      margin: 0 0 14px;
    }
    .pm-title {
      font-family: var(--sans);
      font-size: 27px;
      line-height: 34px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      margin: 0 0 12px;
    }
    .pm-sub {
      font-family: var(--sans);
      font-size: 16px;
      line-height: 25px;
      color: var(--muted);
      margin: 0 0 18px;
    }
    .pm-tag {
      display: inline-block;
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1;
      color: var(--text);
      background: rgba(0, 0, 0, 0.05);
      border-radius: 999px;
      padding: 9px 14px;
    }

    .pm-rule { height: 1px; background: var(--card-border); margin: 0 28px; }

    .pm-body { padding: 24px 28px 28px; }
    .pm-body h3 {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 24px;
      font-weight: 500;
      color: var(--text);
      margin: 0 0 10px;
    }
    .pm-body h3 + p { margin: 0 0 4px; }
    .pm-body h3:not(:first-child) { margin-top: 24px; }
    .pm-body p {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 24px;
      color: var(--icon);
      margin: 0;
    }

    /* pinned footer + a soft fade so the body reads as scrolling under it */
    .pm-foot { position: relative; flex: none; padding: 16px 28px 20px; background: var(--card-bg); }
    .pm-foot::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: -28px;
      height: 28px;
      background: linear-gradient(to top, var(--card-bg), transparent);
      pointer-events: none;
    }
    .pm-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--cta-text);
      background: var(--cta-bg);
      border: none;
      border-radius: 12px;
      padding: 15px 20px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .pm-cta:hover { background: var(--cta-hover); }
    .pm-cta svg { display: block; }

    /* ---- Unify project modal (detailed intro — Figma node 320:129042) ---- */
    /* Fixed 540×760 card; the header + body scroll inside, footer stays pinned
       (clamped to the viewport so it never overflows on short screens). */
    .pm-study .pm-card {
      width: min(540px, 100%);
      height: min(760px, calc(100vh - 48px));
      max-height: none;
      border-radius: 10px;               /* Figma modal radius */
    }
    /* Inset, rounded cover image (6px white border on top/left/right). */
    .pm-study .pm-cover {
      padding: 6px 6px 0;
      aspect-ratio: auto;
      background: transparent;
      flex: none;            /* stays pinned at the top; only .pm-scroll scrolls */
    }
    .pm-study .pm-cover-ph {
      aspect-ratio: 528 / 314;
      border-radius: 8px;
      background: var(--thumb-fill);
      position: relative;
      overflow: hidden;
    }
    /* Embedded demo video (Canva for Unify, YouTube for Cosmofeed) fills the
       cover box; rounded corners clipped, grey placeholder shows while loading. */
    .pm-study .pm-cover-ph iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    .pm-study .pm-head { padding: 20px 20px 0; }
    /* Red, sentence-case study title (20/28 Medium). */
    .pm-study .pm-title {
      font-size: 18px;
      line-height: 28px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--accent);
      margin: 0 0 20px;
    }
    /* Role / Timeline / Company meta row (both project-intro modals). 12px gap
       between the label/value items; wraps onto the next line on narrow widths. */
    .pm-meta { display: flex; flex-wrap: wrap; gap: 12px; }
    /* Each column fills an equal share of the row (fill container) but never
       shrinks below its own content — so when the row gets too narrow the columns
       wrap to the next line (keeping the 12px gap) instead of overlapping. */
    .pm-meta-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: max-content; }
    .pm-meta-val { white-space: nowrap; }
    .pm-meta-label {
      font-family: var(--sans);
      font-size: 10px;
      line-height: 12px;
      font-weight: 500;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .pm-meta-val { font-family: var(--sans); font-size: 14px; line-height: 22px; color: var(--text); }
    .pm-study .pm-rule { margin: 13px 0 0; height: 0.5px; }

    .pm-study .pm-body {
      padding: 20px 20px 28px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    /* TLDR block: label + quote + narrative paragraphs. */
    .pm-tldr { display: flex; flex-direction: column; gap: 8px; }
    /* Scoped under .pm-study so it beats the base `.pm-body h3` rule (the label
       is an <h3>); otherwise h3's 17/24 + 10px margin leak in. */
    .pm-study .pm-tldr-label {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 26px;
      font-weight: 500;
      color: var(--text);
      margin: 0;
    }
    .pm-tldr-content { display: flex; flex-direction: column; gap: 16px; }
    /* Cosmofeed TLDR label sits tighter to its body (design gap 4 vs unify 8). */
    #projectModalCosmo .pm-tldr { gap: 4px; }
    .pm-tldr-content > p {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 24px;
      color: var(--text);
      margin: 0;
    }
    .pm-quote { display: flex; gap: 16px; margin: 0; }
    .pm-quote::before {
      content: "";
      flex: none;
      width: 3px;
      align-self: stretch;
      background: var(--accent);
      border-radius: 2px;
    }
    .pm-quote p {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 24px;
      font-style: italic;
      color: var(--text);
      margin: 0;
    }
    .pm-quote strong { font-weight: 500; }

    /* Three-up outcome stats. */
    .pm-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .pm-stat { display: flex; flex-direction: column; gap: 20px; padding: 0 16px; }
    /* Leading metric sits flush to the column's left edge (Figma: first stat has
       padding-left 0; both the 2-up and 3-up rows share this). */
    .pm-stat:first-child { padding-left: 0; }
    /* Hairline separators sit centred in the gutter with 16px of breathing room
       on BOTH sides — a right-hand border on every metric except the last
       (Figma nodes 320:129129 / 323:130174, 0.5px #E6E6E6). */
    .pm-stat:not(:last-child) { border-right: 0.5px solid var(--hairline); }
    .pm-stat-num { font-family: "Roboto Mono", ui-monospace, monospace; font-weight: 400; font-size: 16px; line-height: 24px; color: var(--accent); }
    .pm-stat-text { display: flex; flex-direction: column; gap: 2px; }
    .pm-stat-title { font-family: var(--sans); font-size: 14px; line-height: 24px; font-weight: 500; color: var(--text); }
    .pm-stat-desc { font-family: var(--sans); font-size: 14px; line-height: 22px; color: var(--quote-muted); }

    /* CTA with a trailing lock (locked case study). */
    .pm-study .pm-foot { padding: 16px 20px; }
    .pm-cta--locked { border-radius: 6px; font-size: 14px; line-height: 20px; padding: 8px 16px; gap: 6px; }

    /* Close button straddles the top-right corner (Figma "Button utility"):
       32px white circle, hairline border, soft shadow, dark X. The card must
       allow overflow for the button to hang off the corner, so the scroll and
       footer carry the rounding instead. */
    .pm-study .pm-card { overflow: visible; }
    /* Cover is pinned above the scroll, so the card's own rounded bg handles the
       top corners; the footer rounds the bottom. */
    .pm-study .pm-foot { border-radius: 0 0 10px 10px; }
    .pm-study .pm-close {
      top: -16px;
      right: -16px;
      background: var(--card-bg);
      border: 1px solid var(--hairline);
      color: var(--text);
      box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .cs-scrim, .cs-panel { transition: none; }
    }

    @media (max-width: 560px) {
      body { padding: 0 20px 108px; }
      .page { padding-top: 40px; gap: 60px; }
      .work-grid { grid-template-columns: 1fr; row-gap: 40px; }
      .cs-content { padding: 64px 20px 88px; }
      .cs-title { font-size: 24px; }
    }

    /* hide the floating nav when the gutter is too narrow to hold it */
    @media (max-width: 1079px) {
      .cs-nav { display: none; }
    }

    /* ---------- Art & play page (a dock-switched view) ---------- */
    /* Only one <main> is visible at a time. The attribute-selector rule beats
       .page's display:flex (higher specificity), so [hidden] truly hides. */
    .page[hidden], .art-page[hidden], .about-page[hidden] { display: none; }

    .art-page {
      position: relative;
      z-index: 1;
      width: 100%;
      /* 1200px is the Figma design width (4 × 285 cols + 3 × 20 gaps). Below that
         the gallery stays a centred block with growing side gutters (min with
         88vw) instead of bleeding to the screen edges — matches the contained,
         centred feel of the Home column. */
      max-width: min(1200px, 88vw);
      margin: 0 auto;
      padding-top: 80px;
    }

    /* Header is offset to the right, aligned to the 2nd grid column (per the
       design), reusing the landing column's 600px measure. */
    .art-head {
      max-width: 600px;
      margin-left: calc((100% - 60px) / 4 + 20px);   /* one column + one gap */
      display: flex;
      flex-direction: column;
      gap: 8px;                        /* title → body copy (Figma) */
      margin-bottom: 40px;
    }
    .art-title {
      font-family: var(--sans);
      font-weight: 500;                /* Helvetica Neue Medium, 24/36, accent */
      font-size: 24px;
      line-height: 36px;
      color: var(--accent);
    }
    .art-desc {
      display: flex;
      flex-direction: column;
      gap: 12px;                       /* between the two paragraphs (Figma) */
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
    }

    /* Balanced masonry (built in JS): images are distributed across the columns
       by height, then every column is stretched to a shared height so all
       columns END ON THE SAME LINE. Column count is set by JS per breakpoint. */
    .art-grid { display: flex; gap: 20px; align-items: stretch; }
    .art-col  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

    .tile {
      flex: 0 1 auto;                  /* JS sets flex-grow per tile so the
                                          column fills its shared height */
      min-height: 0;
      overflow: hidden;
      padding: 5px;                    /* white mat around the artwork */
      background: var(--card-bg);
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
                  0 6px 16px rgba(0, 0, 0, 0.05);
      transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
    }
    .tile:hover {
      transform: translateY(-3px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10),
                  0 12px 26px rgba(0, 0, 0, 0.08);
    }
    @media (prefers-reduced-motion: reduce) { .tile { transition: none; } }

    /* Artwork fills the mat at its natural aspect ratio (no crop). The grey
       shows only while the image loads. */
    .tile-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;               /* fill the tile's flex height; crop is
                                          minimal because columns are balanced */
      border-radius: 3px;
      background: var(--thumb-fill);
    }

    /* Footer: reuse the flower illustration + note + the shared chip-style
       socials (same as the landing / case-study footers), sitting well below
       the grid (matches the design's spacing). */
    .art-foot { margin-top: 160px; }
    .art-foot .social { justify-content: center; }

    /* Below the full 4-column desktop, drop the column-2 offset so the header
       aligns to the grid's left edge. The whole content block stays centred
       (via .art-page); the text itself is always left-aligned. */
    @media (max-width: 1200px) {
      .art-head { margin-left: 0; }
    }
    @media (max-width: 900px) {
      .art-foot { margin-top: 100px; }
    }
    @media (max-width: 520px) {
      .art-page { padding-top: 40px; }
    }

    /* ---------- More work page (a dock-switched view) ---------- */
    .work-page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: min(1200px, 88vw);
      margin: 0 auto;
      padding-top: 80px;
    }

    .work-head {
      max-width: 600px;
      margin: 0 auto 40px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .work-title {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      color: var(--accent);
    }
    .work-desc { font-size: 15px; line-height: 26px; color: var(--text); }

    /* Bento grid of side-project previews: 2 fluid columns (matches the art
       grid's 20px gap). Each tile keeps the desktop 590:400 crop ratio at
       any width — height scales with the column instead of staying a fixed
       400px, so narrower screens shrink the whole image instead of cropping
       further into it. */
    .mw-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .mw-card {
      display: block;
      margin: 0;
      aspect-ratio: 59 / 40;
      overflow: hidden;
      padding: 5px;                    /* white mat around the screenshot */
      background: var(--card-bg);
      border: 0.5px solid var(--hairline);
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
                  0 6px 16px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
    }
    .mw-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10),
                  0 12px 26px rgba(0, 0, 0, 0.08);
    }
    .mw-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
    @media (prefers-reduced-motion: reduce) { .mw-card { transition: none; } }

    .work-foot { margin-top: 100px; }
    .work-foot .social { justify-content: center; }

    @media (max-width: 700px) {
      .mw-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .work-page { padding-top: 40px; }
      .work-foot { margin-top: 60px; }
    }

    /* ---------- About page (a dock-switched view) ---------- */
    .about-page {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--col);       /* 600px content column, centred (matches Figma) */
      margin: 0 auto;
      padding-top: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .about-title {
      font-family: var(--sans);
      font-weight: 500;            /* Helvetica Neue Medium, 24/36, accent red */
      font-size: 24px;
      line-height: 36px;
      color: var(--accent);
      text-align: center;
    }

    .about-inner {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Photo pile: three white-matted cards, lightly tilted and offset, stacked
       (Figma "Group 37007" — 520×354 group of 490×310 cards). */
    .about-stack {
      position: relative;
      width: 100%;
      max-width: 529px;
      aspect-ratio: 529 / 428;   /* hugs the tighter pile: front card at top, deepest at bottom */
      margin-top: 32px;            /* title → stack (Figma gap) */
      cursor: pointer;             /* click anywhere to send the front card back */
    }
    /* Each card sits at the same origin and is placed into one of THREE SLOTS via
       transform, so cards can glide between slots on click. */
    .about-photo {
      position: absolute;
      top: 0; left: 0;
      width: 92.63%;              /* 490 / 529 */
      padding: 1.4%;              /* thin white mat (~4.9px on a 490 card) */
      background: var(--card-bg);
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07),
                  0 12px 28px -12px rgba(0, 0, 0, 0.10);
      transform-origin: 50% 50%;
      transition: left 0.62s cubic-bezier(0.33, 1, 0.68, 1),
                  top 0.62s cubic-bezier(0.33, 1, 0.68, 1),
                  transform 0.62s cubic-bezier(0.33, 1, 0.68, 1),
                  box-shadow 0.62s cubic-bezier(0.33, 1, 0.68, 1);
      will-change: left, top, transform;
    }
    .about-photo .ph-media {
      position: relative;
      display: block;
      border-radius: 3px;
      overflow: hidden;
    }
    .about-photo img {
      display: block;
      width: 100%;
      aspect-ratio: 490 / 390;   /* image height ~340→380px, width unchanged */
      object-fit: cover;
      object-position: center bottom;  /* default: crop keeps the bottom of each photo */
    }
    /* Photos whose subject sits up top crop from the top instead. */
    .about-photo img.crop-top {
      object-position: center top;
    }
    /* Photos whose subject sits mid-frame crop from the centre. */
    .about-photo img.crop-center {
      object-position: center center;
    }
    /* Overlay belongs to the SLOT, not the image: whichever card is in a slot
       gets that slot's darkness. Bottom = darker, middle = lighter, top = none.
       It cross-fades as cards move, so the tint stays put while photos cycle. */
    .about-photo .ph-overlay {
      position: absolute;
      inset: 0;
      background: #000;
      opacity: 0;
      transition: opacity 0.62s cubic-bezier(0.33, 1, 0.68, 1);
      pointer-events: none;
    }
    /* Five slots forming a tight, lightly-fanned pile — cards sit nearly on top
       of one another with just a small offset/rotation so the deck reads as a
       stack, not a spread. Offsets are % of the container so it scales. data-pos
       0 = front. */
    .about-photo[data-pos="0"] { left: 5.5%; top: 0;    transform: rotate(0.4deg);  z-index: 5; }
    .about-photo[data-pos="1"] { left: 4.9%; top: 1.3%; transform: rotate(-0.6deg); z-index: 4; }
    .about-photo[data-pos="2"] { left: 4.3%; top: 2.6%; transform: rotate(1.0deg);  z-index: 3; }
    .about-photo[data-pos="3"] { left: 3.7%; top: 3.9%; transform: rotate(1.7deg);  z-index: 2; }
    .about-photo[data-pos="4"] { left: 3.1%; top: 5.2%; transform: rotate(2.3deg);  z-index: 1; }
    .about-photo[data-pos="5"] { left: 2.5%; top: 6.5%; transform: rotate(2.9deg);  z-index: 0; }
    /* Tint deepens with depth so the pile reads even where cards barely peek out. */
    .about-photo[data-pos="0"] .ph-overlay { opacity: 0;    }
    .about-photo[data-pos="1"] .ph-overlay { opacity: 0.07; }
    .about-photo[data-pos="2"] .ph-overlay { opacity: 0.14; }
    .about-photo[data-pos="3"] .ph-overlay { opacity: 0.22; }
    .about-photo[data-pos="4"] .ph-overlay { opacity: 0.30; }
    .about-photo[data-pos="5"] .ph-overlay { opacity: 0.37; }
    /* Front card, on its way to the back of the pile: a lift with a slight
       tilt (full size, no shrink) — it rises in place, drops behind the new
       front card right at the top of that lift (z-index step inside the
       keyframe, same position, no jump), then eases back down to its resting
       spot while hidden. The end state matches the plain data-pos resting
       transform exactly, so there's no snap when flip-out is cleared at
       animationend. */
    .about-photo.flip-out {
      animation: about-card-flip 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes about-card-flip {
      0%      { z-index: 10; transform: translateY(0)    rotate(0.4deg); }
      42%     { z-index: 10; transform: translateY(-20%) rotate(11deg); }
      42.001% { z-index: 1; }
      100%    { z-index: 1;  transform: translateY(0)    rotate(2.9deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .about-photo { transition: none; }
      .about-photo .ph-overlay { transition: none; }
      .about-photo.flip-out { animation: none; }
    }
    /* Reset (on re-entering About) snaps the pile back with no glide. */
    .about-stack.no-anim .about-photo,
    .about-stack.no-anim .about-photo .ph-overlay { transition: none; }
    .about-stack.no-anim .about-photo.flip-out { animation: none; }

    /* Hand-drawn caption that floats beside the deck (Figma "Love hopping art
       galleries" + Arrow_01). One element; JS sets its text from the front card
       and cycles it between three slots — right / left-top / left-bottom. */
    .deck-caption {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--hand);
      font-size: 18px;
      line-height: 1.1;
      color: var(--text);
      pointer-events: none;             /* clicks fall through to the deck */
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 6;
    }
    /* Text wraps within a 180px container (≈ two lines); aligned toward the deck.
       width:max-content + max-width caps it at 180px (and stops the flex item from
       collapsing to word-width when positioned outside its containing block). */
    .deck-caption .dc-text {
      flex: none;
      width: max-content;
      max-width: 180px;
      white-space: normal;
      text-align: left;
    }
    .deck-caption.show { opacity: 1; }
    .deck-caption .dc-arrow { flex: none; display: block; }
    .deck-caption .dc-arrow img { height: 52px; width: auto; display: block; }
    /* Left slots: arrow moves to the deck side (right of the text) and flips
       horizontally so it still points back at the deck; text hugs the deck. */
    .deck-caption[data-slot="left-top"],
    .deck-caption[data-slot="left-bottom"] { flex-direction: row-reverse; }
    .deck-caption[data-slot="left-top"]  .dc-arrow,
    .deck-caption[data-slot="left-bottom"] .dc-arrow { transform: scaleX(-1); }
    .deck-caption[data-slot="left-top"]  .dc-text,
    .deck-caption[data-slot="left-bottom"] .dc-text { text-align: right; }
    /* Slots (anchored just outside the deck's left / right edges). */
    .deck-caption[data-slot="right"] {
      left: calc(100% + 12px); top: 60%; transform: translateY(-50%);
    }
    .deck-caption[data-slot="left-top"] {
      right: calc(100% + 12px); top: 26%; transform: translateY(-50%);
    }
    .deck-caption[data-slot="left-bottom"] {
      right: calc(100% + 12px); top: 84%; transform: translateY(-50%);
    }
    /* Not enough room in the margins on narrow screens — hide the floating caption. */
    @media (max-width: 1024px) { .deck-caption { display: none; } }

    /* Copy block: left-aligned body, 15/26, #3D3D3D (Figma text frame) */
    /* Hint caption under the deck (Figma: 14/20, #8F8F8F, centered, 12px below). */
    .about-caption {
      width: 100%;
      margin: 12px 0 0;            /* deck → caption (Figma gap); no default p-margin */
      text-align: center;
      font-size: 14px;
      line-height: 20px;
      color: var(--muted);
    }
    /* On small screens the floating deck caption is hidden (see max-width:1024px
       above), so this bottom line carries the front card's caption instead of the
       "quick facts" hint — keeping the same hint style (14/20, #8F8F8F, sans). */

    .about-copy {
      width: 100%;
      margin-top: 48px;            /* caption → copy (Figma gap) */
      display: flex;
      flex-direction: column;
      gap: 12px;                   /* between paragraphs (Figma gap) */
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
    }

    /* ---- Extended About content: detours list, photo strip, "now" note ---- */
    .about-more {
      width: 100%;
      margin-top: 60px;            /* intro copy → first section (Figma gap) */
      display: flex;
      flex-direction: column;
      gap: 60px;                   /* between sections (Figma gap) */
      text-align: left;
    }
    .am-block { display: flex; flex-direction: column; gap: 8px; }
    .am-heading {
      margin: 0;
      font-family: var(--sans);
      font-weight: 500;            /* Helvetica Neue Medium, 16/30 */
      font-size: 16px;
      line-height: 30px;
      color: var(--text);
    }
    .am-block p {
      margin: 0;
      font-size: 15px;
      line-height: 26px;
      color: var(--text);
    }
    .am-block p strong,
    .about-copy strong { font-weight: 500; }   /* Figma Medium emphasis */
    .am-para { display: flex; flex-direction: column; gap: 12px; }   /* between paragraphs (Figma gap) */

    /* "Let's connect!" contact list — label, a filler line, then the handle
       + an action icon (copy for email, external-link for social links). */
    .connect-block { gap: 10px; }   /* heading → list (overrides .am-block's default 8px) */
    .connect-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .connect-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .connect-label {
      flex: none;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 15px;
      color: var(--text);
    }
    /* Same hand-drawn wavy hairline as the detours rail (rail-line.svg), just
       oriented horizontally, so the filler reads as hand-drawn, not a plain rule. */
    .connect-line {
      flex: 1 1 auto;
      height: 8px;
      background: url("/assets/common/rail-line-horizontal.svg") left center / 40px 8px repeat-x;
    }
    .connect-value {
      position: relative;
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--text);
      text-decoration: none;
    }
    .connect-value .connect-icon { flex: none; color: inherit; }
    /* Force the post-copy tick (swapped in by main.js, sized for the 15x12
       footer envelope) down to the same 12x12 box as the copy icon it replaces. */
    .connect-value .email-glyph { width: 12px; height: 12px; }

    /* Numbered "stepper" list with a connecting rail and hand-drawn numbers. */
    .am-detours { display: flex; flex-direction: column; gap: 16px; }
    .am-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
    .am-step { position: relative; display: flex; gap: 16px; align-items: flex-start; }
    .am-step:not(:last-child)::before {   /* thin (0.5px) hand-drawn wavy rail between badges */
      content: "";
      position: absolute;
      left: 6px; top: 22px; bottom: -18px;   /* 8px box centred on the 20px badge */
      width: 8px;
      background: url("/assets/common/rail-line.svg") center top / 8px 40px repeat-y;
    }
    .am-num {
      flex: none;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--thumb);
      color: var(--text);
      font-family: var(--hand);
      font-size: 15px; line-height: 20px;
      text-align: center;
      position: relative; z-index: 1;   /* sit above the rail */
    }
    .am-step p { margin: 0; font-size: 15px; line-height: 26px; color: var(--text); }

    /* Second photo pile — a horizontal fan of small tilted cards (Figma "Group 36886"). */
    .am-strip {
      position: relative;
      width: 100%;
      max-width: 580px;
      aspect-ratio: 580 / 208;
      align-self: center;
      margin-top: 8px;
    }
    .am-card {
      position: absolute;
      width: 22.9%;                /* 133 / 580 */
      padding: 0.69%;              /* 4px mat on the 580 strip (Figma) */
      background: var(--card-bg);
      border-radius: 4px;          /* Figma card radius */
      box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 10px 22px -12px rgba(0,0,0,0.10);
      transform-origin: 50% 50%;
      /* rise composes with each card's own tilt (translate first, then rotate) */
      transform: translateY(var(--rise, 0px)) rotate(var(--rot, 0deg));
      transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      cursor: pointer;
    }
    .am-card:hover {
      --rise: -8px;                /* lift 8px on hover */
      z-index: 6;                  /* pop above the fan */
      box-shadow: 0 6px 14px rgba(0,0,0,0.10), 0 18px 34px -14px rgba(0,0,0,0.16);
    }
    .am-card .am-photo {
      display: block;
      width: 100%;
      aspect-ratio: 125 / 167;
      object-fit: cover;
      border-radius: 3px;          /* Figma image radius */
      background: var(--thumb);         /* placeholder until real images are added */
    }
    .am-card:nth-child(1) { left: 1.6%;  top: 14%;  --rot: 6.28deg;  z-index: 1; }
    .am-card:nth-child(2) { left: 19.8%; top: 6.3%; --rot: 2.6deg;   z-index: 2; }
    .am-card:nth-child(3) { left: 38.4%; top: 1%;   --rot: 1.05deg;  z-index: 3; }
    .am-card:nth-child(4) { left: 59.8%; top: 4.3%; --rot: -5.76deg; z-index: 4; }
    .am-card:nth-child(5) { left: 78.8%; top: 8.7%; --rot: -6.66deg; z-index: 5; }
    @media (prefers-reduced-motion: reduce) { .am-card { transition: none; } }

    .about-foot { margin-top: 160px; }
    .about-foot .social { justify-content: center; }

    @media (max-width: 520px) {
      .about-page { padding-top: 40px; }
      .about-foot { margin-top: 100px; }
    }

    /* ---------- Scroll / entrance reveal (Art + About views) ----------
       Elements marked [data-reveal] fade + rise into place. On opening a view
       the lead text reveals first; 0.5s later the in-view content follows, and
       everything further down reveals as it scrolls into frame (JS-driven). */
    [data-reveal] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
    [data-reveal]:not(.revealed) { opacity: 0; transform: translateY(16px); }
    /* Tiles keep their snappy hover transform/shadow while still fading in. */
    .tile[data-reveal] { transition: transform 0.32s var(--ease), box-shadow 0.28s var(--ease), opacity 0.6s var(--ease); }
    @media (prefers-reduced-motion: reduce) {
      [data-reveal] { transition: none; }
      [data-reveal]:not(.revealed) { opacity: 1; transform: none; }
    }