/* Figma Portfolio / 04 Presentation: 1440 desktop and 390 mobile. */
.portfolio-page { background:#fff; color:#212121; }
.portfolio-page main { background:#fff; }
.portfolio-page #main { max-width:none; margin:0; padding:0; }
body.portfolio-page > main.forge-preview-page { max-width:none; padding:0; }
.portfolio-page :is(h1,h2,h3,p) { margin:0; white-space:normal; }
.portfolio-page :is(h1,h2) { font-family:"obviously-wide",sans-serif; font-weight:900; }
.portfolio-hero { position:relative; isolation:isolate; overflow:hidden; padding:44px 30px 50px; background:#fdb719; }
.portfolio-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background:url(/img/wave-current-2.svg) repeat-x; background-size:1064.619px 912.84px; background-position:calc(50% - 252.31px) -210px; }
.portfolio-hero__eyebrow { font-family:"obviously",sans-serif; font-weight:700; font-size:16px; line-height:22px; color:#000; }
.portfolio-hero h1 { margin-top:24px; font-size:108px; line-height:100px; color:#fff; }
.portfolio-features { display:flex; flex-direction:column; gap:128px; padding:128px 30px; }
.portfolio-feature { display:flex; flex-direction:column; gap:32px; min-width:0; }
.portfolio-feature__intro { display:flex; flex-direction:column; gap:18px; text-align:center; }
.portfolio-feature__category { font-family:"obviously",sans-serif; font-weight:700; color:#0095d7; font-size:13px; line-height:18px; }
.portfolio-feature__title { font-size:96px; line-height:92px; text-transform:uppercase; overflow-wrap:anywhere; }
.portfolio-feature__services { font-size:18px; line-height:25px; }
.portfolio-feature__media { padding:0; background:transparent; }
.portfolio-feature__image { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center; background:#c0c0c0; }
.portfolio-missing-art { width:100%; aspect-ratio:16/9; background:#c0c0c0; }
.portfolio-feature__details { display:flex; align-items:center; justify-content:space-between; gap:64px; }
.portfolio-feature__description { max-width:850px; font-size:30px; line-height:37px; }
.portfolio-button { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:10px; padding:18px 24px; font-family:"obviously-wide",sans-serif; font-weight:900; font-size:16px; line-height:20px; text-transform:uppercase; background:#0095d7; color:#fff; }
.portfolio-arrow { display:block; flex:none; width:18.911px; height:18.677px; background:currentColor; -webkit-mask:url(/img/cta-arrow.svg) center/contain no-repeat; mask:url(/img/cta-arrow.svg) center/contain no-repeat; }
a.portfolio-button:hover { background:#007eb7; }
.portfolio-page a:focus-visible { outline:3px solid #0095d7; outline-offset:5px; }
.portfolio-identities { display:grid; grid-template-columns:360px minmax(0,1fr); align-items:center; gap:60px; padding:128px 30px; background:#e2f3f9; }
.portfolio-identities__intro h2 { font-size:36px; line-height:38px; }
.portfolio-identities__intro p { margin-top:18px; font-size:28px; line-height:34px; }
.portfolio-identities__grid,.portfolio-archives__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:60px; }
.portfolio-card { min-width:0; }
.portfolio-card__link { display:block; color:inherit; }
.portfolio-card__art { height:300px; overflow:hidden; }
.portfolio-card__image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.portfolio-card__caption { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.portfolio-card__category { font-family:"obviously",sans-serif; font-weight:700; font-size:11px; line-height:16px; color:#0095d7; }
.portfolio-card__title-row { display:flex; gap:16px; align-items:center; }
.portfolio-card__title-row h3 { flex:1; min-width:0; overflow-wrap:anywhere; font-family:"obviously",sans-serif; font-weight:700; font-size:24px; line-height:30px; }
.portfolio-card__link:hover h3 { color:#007eb7; }
.portfolio-archives { padding:128px 30px; background:#fff; }
.portfolio-archives__intro { margin-bottom:36px; text-align:center; }
.portfolio-archives__intro h2 { color:#f77c00; font-size:64px; line-height:60px; }
.portfolio-archives__intro p { margin-top:18px; font-size:30px; line-height:36px; }
.portfolio-card--archive .portfolio-card__art { height:auto; aspect-ratio:678/450; padding:24px; background:#4d4d4d; }
.portfolio-card--archive .portfolio-card__image { object-fit:cover; }
.portfolio-card--archive .portfolio-card__caption { margin-top:14px; }
.portfolio-card .portfolio-arrow { display:none; }
.portfolio-contact { position:relative; overflow:hidden; background:#f77c00; padding:70px 24px; }
.portfolio-contact__bg { position:absolute; inset:-45px -51px; width:calc(100% + 102px); height:calc(100% + 90px); object-fit:cover; object-position:left center; }
.portfolio-contact__content { position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:50px; }
.portfolio-contact h2 { max-width:1012px; font-size:94px; line-height:86px; text-transform:uppercase; text-align:right; text-box:trim-both cap alphabetic; }
.portfolio-contact h2 strong { color:#fed475; font-weight:inherit; }
.portfolio-contact p { font-size:57px; line-height:1.3; letter-spacing:-1.71px; color:#fff; text-align:right; }
.portfolio-contact .portfolio-button { background:#fff; color:#212121; font-size:22px; line-height:22px; text-box:trim-both cap alphabetic; }
.portfolio-contact .portfolio-button:hover { background:#fed475; }
.portfolio-page .footer-brand { padding:70px 40px; }
.portfolio-page .footer-credits { padding:70px 24px; }
/* Match the shared .container caps; section backgrounds still span the viewport. */
@media (min-width:701px) {
  .portfolio-page { --portfolio-container-width:1440px; }
  .portfolio-hero,.portfolio-features,.portfolio-identities,.portfolio-archives {
    padding-inline:max(30px,calc((100% - var(--portfolio-container-width)) / 2 + 30px));
  }
  .portfolio-contact {
    padding-inline:max(24px,calc((100% - var(--portfolio-container-width)) / 2 + 24px));
  }
}
@media (min-width:2201px) {
  .portfolio-page { --portfolio-container-width:2000px; }
}
@media (max-width:1100px) and (min-width:701px) {
  .portfolio-identities { grid-template-columns:260px minmax(0,1fr); gap:30px; }
  .portfolio-identities__intro h2 { font-size:28px; line-height:32px; }
  .portfolio-identities__grid { gap:30px; }
  .portfolio-feature__details { gap:30px; }
  .portfolio-feature__description { font-size:26px; line-height:32px; }
  .portfolio-feature__title { font-size:clamp(52px,6.66vw,96px); }
  .portfolio-contact h2 { font-size:7vw; line-height:.92; }
}
@media (max-width:700px) {
  .portfolio-hero { padding:30px 16px 34px; }
  .portfolio-hero::before { background-position:-600px -80px; }
  .portfolio-hero__eyebrow { font-size:12px; line-height:16px; }
  .portfolio-hero h1 { max-width:358px; margin-top:20px; font-size:44px; line-height:44px; }
  .portfolio-hero h1 span { display:block; }
  .portfolio-features { padding:36px 16px 56px; gap:64px; }
  .portfolio-feature { gap:22px; }
  .portfolio-feature__intro { gap:12px; }
  .portfolio-feature__category { font-size:10px; line-height:14px; }
  .portfolio-feature__title { font-size:60px; line-height:58px; }
  .portfolio-feature__title--squidbooks { width:100%; max-width:358px; align-self:center; font-size:48px; line-height:46px; }
  .portfolio-feature__services { font-size:15px; line-height:21px; }
  .portfolio-feature__details { flex-direction:column; align-items:stretch; gap:20px; }
  .portfolio-feature__description { font-size:25px; line-height:30px; }
  .portfolio-feature__cta { width:100%; font-size:clamp(12px,3.6vw,16px); white-space:nowrap; }
  .portfolio-identities { display:block; padding:40px 16px 48px; }
  .portfolio-identities__intro { text-align:center; margin-bottom:30px; }
  .portfolio-identities__intro h2 { font-size:32px; line-height:32px; }
  .portfolio-identities__intro p { font-size:24px; line-height:30px; }
  .portfolio-identities__grid,.portfolio-archives__grid { grid-template-columns:minmax(0,1fr); gap:60px; }
  .portfolio-archives { padding:40px 16px 56px; }
  .portfolio-archives__intro { margin-bottom:28px; }
  .portfolio-archives__intro h2 { font-size:36px; line-height:36px; }
  .portfolio-archives__intro p { font-size:24px; line-height:30px; }
  .portfolio-card--archive .portfolio-card__art { padding:16px; }
  .portfolio-contact { padding:50px 16px; }
  .portfolio-contact__content { gap:40px; }
  .portfolio-contact h2 { font-size:48px; line-height:44px; }
  .portfolio-contact p { font-size:30px; line-height:45px; letter-spacing:0; }
  .portfolio-contact .portfolio-button { font-size:18px; line-height:20px; }
  .portfolio-page .footer-brand { padding:50px 16px; }
  .portfolio-page .footer-credits { padding:50px 24px; }
}
@media (max-width:360px) {
  .portfolio-feature__title { font-size:50px; line-height:50px; }
  .portfolio-feature__title--squidbooks { font-size:42px; line-height:42px; }
  .portfolio-identities__intro h2 { font-size:28px; }
  .portfolio-button { font-size:14px; padding-inline:14px; }
  .portfolio-feature__cta { font-size:12px; }
  .portfolio-contact h2 { font-size:40px; line-height:39px; }
  .portfolio-contact .portfolio-button { font-size:16px; }
}