/* Generated by src/site/scope-themes.js from src/site/themes/portfolios.css. Edit the source, not this file. */
.t-portfolios {
    --red: #9b0041; --coral: #e8394a; --pink: #f0a4c0; --blush: #fcecf2;
    --ink: #0d0d12; --ink-2: rgba(13, 13, 18, 0.78); --muted: rgba(13, 13, 18, 0.56); --line: rgba(13, 13, 18, 0.12);
    --head: 'Right Grotesk Compact', 'Arial Narrow', Arial, sans-serif;
    --body: 'ABC Monument Grotesk', Inter, -apple-system, 'Segoe UI', sans-serif;
    --max: none; --gutter: clamp(48px, 5vw, 104px); --header-height: 76px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  *:is(.t-portfolios,.t-portfolios *) { box-sizing: border-box; } /* Lenis handles smooth scrolling */
  .t-portfolios { margin: 0; background: #fff; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  img:is(.t-portfolios,.t-portfolios *) { display: block; max-width: 100%; }
  a:is(.t-portfolios,.t-portfolios *) { color: inherit; text-decoration: none; }
  h1:is(.t-portfolios,.t-portfolios *), h2:is(.t-portfolios,.t-portfolios *), h3:is(.t-portfolios,.t-portfolios *), p:is(.t-portfolios,.t-portfolios *), figure:is(.t-portfolios,.t-portfolios *), ul:is(.t-portfolios,.t-portfolios *) { margin: 0; } ul:is(.t-portfolios,.t-portfolios *) { padding: 0; list-style: none; }
  :focus-visible:is(.t-portfolios,.t-portfolios *) { outline: 2px solid var(--coral); outline-offset: 3px; }
  .container:is(.t-portfolios,.t-portfolios *) { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
  .h2:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; color: var(--red); font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; }
  .lead:is(.t-portfolios,.t-portfolios *) { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); }
  .kicker:is(.t-portfolios,.t-portfolios *) { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--pink); }
  .kicker:is(.t-portfolios,.t-portfolios *)::before { content: ''; width: 32px; height: 2px; background: var(--pink); }

  /* Scroll reveal */
  .rv:is(.t-portfolios,.t-portfolios *) { opacity: 0; transform: translateY(32px); transition: opacity 0.9s ease, transform 0.9s var(--ease); }
  .rv.in:is(.t-portfolios,.t-portfolios *) { opacity: 1; transform: none; }
  .rv-d1:is(.t-portfolios,.t-portfolios *) { transition-delay: 0.12s; } .rv-d2:is(.t-portfolios,.t-portfolios *) { transition-delay: 0.24s; } .rv-d3:is(.t-portfolios,.t-portfolios *) { transition-delay: 0.36s; }

  /* ---------- Intro + jump panels ---------- */
  .intro:is(.t-portfolios,.t-portfolios *) { margin-top: var(--header-height); padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
  .intro h1:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; color: var(--red); font-size: clamp(56px, 9vw, 140px); line-height: 0.88; }
  .intro .lead:is(.t-portfolios,.t-portfolios *) { max-width: 46ch; margin-top: clamp(20px, 2.4vw, 32px); }
  .intro .panels:is(.t-portfolios,.t-portfolios *) { margin-top: clamp(40px, 5vw, 64px); }

  /* ---------- Each portfolio: numbered title, then the About-style sections ---------- */
  .pf:is(.t-portfolios,.t-portfolios *) { scroll-margin-top: var(--header-height); }
  .pf__head:is(.t-portfolios,.t-portfolios *) { padding-top: clamp(72px, 9vw, 128px); }
  .pf__head .kicker:is(.t-portfolios,.t-portfolios *) { color: var(--coral); } .pf__head .kicker:is(.t-portfolios,.t-portfolios *)::before { background: var(--coral); }
  .pf__head h2:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; color: var(--red); font-size: clamp(48px, 7.4vw, 116px); line-height: 0.88; margin-top: 16px; max-width: 14ch; }
  .pf__head + .story:is(.t-portfolios,.t-portfolios *) { padding-top: clamp(48px, 6vw, 80px); }

  /* ---------- What the portfolio does: label, then the spiel ---------- */
  .story:is(.t-portfolios,.t-portfolios *) { padding: clamp(64px, 8vw, 112px) 0 clamp(24px, 3vw, 40px); }
  .story__grid:is(.t-portfolios,.t-portfolios *) { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 2.4vw, 32px); align-items: start; }
  .story__label:is(.t-portfolios,.t-portfolios *) { grid-column: 1 / span 12; display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
  .story__label span:is(.t-portfolios,.t-portfolios *) { flex: 1; height: 1px; background: var(--line); transform: translateY(-10px); }
  .story__text:is(.t-portfolios,.t-portfolios *) { grid-column: 1 / span 7; }
  .story__text p + p:is(.t-portfolios,.t-portfolios *) { margin-top: 1.2em; }
  @media (max-width: 900px) { .story__text:is(.t-portfolios,.t-portfolios *) { grid-column: 1 / -1; } }

  /* ---------- What I'm working on ---------- */
  .work:is(.t-portfolios,.t-portfolios *) { padding: clamp(64px, 8vw, 112px) 0; }
  .work__head:is(.t-portfolios,.t-portfolios *) { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 5vw, 96px); align-items: end; margin-bottom: clamp(28px, 3vw, 40px); }
  .work__grid:is(.t-portfolios,.t-portfolios *) { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
  .work figure:is(.t-portfolios,.t-portfolios *) { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 18px; }
  .work img:is(.t-portfolios,.t-portfolios *) { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
  .work__item:hover img:is(.t-portfolios,.t-portfolios *) { transform: scale(1.05); }
  .work .num:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--coral); }
  .work h4:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.02; color: var(--red); margin-top: 10px; }
  .work p:is(.t-portfolios,.t-portfolios *) { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 12px; }

  /* ---------- Resources: white tiles on blush ---------- */
  .res:is(.t-portfolios,.t-portfolios *) { background: var(--blush); padding: clamp(64px, 8vw, 112px) 0; }
  .res__head:is(.t-portfolios,.t-portfolios *) { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
  .tiles:is(.t-portfolios,.t-portfolios *) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(32px, 4vw, 56px); }
  .tile:is(.t-portfolios,.t-portfolios *) { position: relative; aspect-ratio: 4 / 3; padding: 22px; background: #fff; color: var(--red); border: 1px solid rgba(155, 0, 65, 0.15); display: flex; flex-direction: column; justify-content: flex-end; transition: opacity 0.9s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease); }
  .tile__num:is(.t-portfolios,.t-portfolios *) { position: absolute; top: 20px; left: 22px; font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--coral); transition: color 0.4s ease; }
  .tile__site:is(.t-portfolios,.t-portfolios *) { position: absolute; top: 20px; right: 22px; font-size: 12px; color: var(--muted); transition: color 0.4s ease; }
  .tile__name:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 0.98; }
  .tile__go:is(.t-portfolios,.t-portfolios *) { font-size: 13.5px; margin-top: 10px; color: var(--muted); transition: color 0.4s ease; }
  .tile:hover:is(.t-portfolios,.t-portfolios *) { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-8px); }
  .tile:hover .tile__num:is(.t-portfolios,.t-portfolios *), .tile:hover .tile__site:is(.t-portfolios,.t-portfolios *), .tile:hover .tile__go:is(.t-portfolios,.t-portfolios *) { color: var(--pink); }
  .tile:hover .tile__go span:is(.t-portfolios,.t-portfolios *) { transform: translate(3px, -3px); }
  .tile__go span:is(.t-portfolios,.t-portfolios *) { display: inline-block; transition: transform 0.4s var(--ease); }

  /* ---------- Jump panels: expanding, as on the homepage ---------- */
  .panels:is(.t-portfolios,.t-portfolios *) { display: flex; gap: 12px; height: clamp(380px, 36vw, 520px); }
  .panel:is(.t-portfolios,.t-portfolios *) { position: relative; flex: 1; min-width: 0; overflow: hidden; margin: 0; color: #fff; transition: flex 0.8s var(--ease); }
  .panel img:is(.t-portfolios,.t-portfolios *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
  .panel:is(.t-portfolios,.t-portfolios *)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,18,0.78) 0%, rgba(13,13,18,0.1) 55%, rgba(13,13,18,0) 100%); pointer-events: none; }
  .panel figcaption:is(.t-portfolios,.t-portfolios *) { position: absolute; z-index: 1; left: clamp(20px, 2.2vw, 32px); right: clamp(20px, 2.2vw, 32px); bottom: clamp(20px, 2.2vw, 32px); }
  .panel__num:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--pink); }
  .panel__title:is(.t-portfolios,.t-portfolios *) { font-family: var(--head); font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.02; margin-top: 6px; max-width: 14ch; }
  .panel__go:is(.t-portfolios,.t-portfolios *) { display: inline-block; font-size: 14px; margin-top: 12px; color: var(--pink); }
  @media (hover: hover) {
    .panels:hover .panel:is(.t-portfolios,.t-portfolios *) { flex: 0.75; }
    .panels .panel:hover:is(.t-portfolios,.t-portfolios *) { flex: 2; }
    .panel:hover img:is(.t-portfolios,.t-portfolios *) { transform: scale(1.05); }
  }

  @media (max-width: 900px) { .work__head:is(.t-portfolios,.t-portfolios *), .res__head:is(.t-portfolios,.t-portfolios *) { grid-template-columns: 1fr; } .work__grid:is(.t-portfolios,.t-portfolios *) { grid-template-columns: 1fr; } .tiles:is(.t-portfolios,.t-portfolios *) { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 767px) { .panels:is(.t-portfolios,.t-portfolios *) { flex-direction: column; height: auto; } .panel:is(.t-portfolios,.t-portfolios *) { flex: none; height: 300px; } }
  @media (max-width: 560px) { .tiles:is(.t-portfolios,.t-portfolios *) { grid-template-columns: 1fr; } .tile:is(.t-portfolios,.t-portfolios *) { aspect-ratio: auto; min-height: 180px; } }
  @media (prefers-reduced-motion: reduce) { *:is(.t-portfolios,.t-portfolios *), *:is(.t-portfolios,.t-portfolios *)::before, *:is(.t-portfolios,.t-portfolios *)::after { animation: none !important; transition-duration: 0.01ms !important; } .rv:is(.t-portfolios,.t-portfolios *) { opacity: 1; transform: none; } }
  /* Page margins match the homepage */
  @media (max-width: 1023px) { .t-portfolios { --gutter: 32px; } }

  /* Page builder: label above a large title in the intro */
  .intro .kicker:is(.t-portfolios,.t-portfolios *) { color: var(--coral); margin-bottom: clamp(16px, 2vw, 24px); } .intro .kicker:is(.t-portfolios,.t-portfolios *)::before { background: var(--coral); }